{"id":501,"date":"2020-11-26T10:12:25","date_gmt":"2020-11-26T10:12:25","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=501"},"modified":"2022-12-15T11:30:13","modified_gmt":"2022-12-15T11:30:13","slug":"cannot-display-taxonomy-terms-with-color-picker-field","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/","title":{"rendered":"Displaying Taxonomy Terms in Different Colors with Color Picker Field"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"add-anbspmeta-boxnbspto-the-given-taxonomy\">Add a&nbsp;Meta Box&nbsp;to the Given Taxonomy<\/h2>\n\n\n\n<p>Add this meta box at the Custom Post Type creation stage or anytime later. Just go to&nbsp;<strong><em>JetEngine &gt; Meta Boxes<\/em><\/strong>, click&nbsp;<strong>\u201cAdd New,\u201d<\/strong>&nbsp;and configure the&nbsp;<strong>General Settings<\/strong>&nbsp;as follows:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/meta-box-for-taxonomy.png\" alt=\"meta box for taxonomy\">\n\n\n\n<p>Learn more on <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-group-the-custom-meta-fields-for-the-certain-post-types-into-meta-boxes\/\">How to Create a Custom Meta Box<\/a>.<\/p>\n\n\n\n<p>You should also add a new meta field and set \u201cColorpicker\u201d as its&nbsp;<strong>Field type<\/strong>. Please note that you should have a ready-made taxonomy to be able to attach this meta box to it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"set-colors-for-each-taxonomy-term\">Set Colors for Each Taxonomy Term<\/h2>\n\n\n\n<p>Please proceed to the taxonomy terms section (or Tags) and click to edit one of them. In the newly-opened window, select and assign the color you fancy. Update the changes. Repeat the routine for every taxonomy term on your list.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/selecting-colors-for-property-types-tags.png\" alt=\"selecting colors for property types tags\">\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-a-new-listing\">Create a New Listing<\/h2>\n\n\n\n<p>Go to&nbsp;<strong><em>JetEngine &gt; Listings<\/em><\/strong>, click&nbsp;<strong>\u201cAdd New,\u201d<\/strong>&nbsp;and set \u201cTerms\u201d as a&nbsp;<strong>Listing Source<\/strong>. In the&nbsp;<strong>From taxonomy<\/strong>&nbsp;select, pick the name of the taxonomy you\u2019ve been working on. Click to create a new listing and check its settings in Elementor.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/listing-item-settings-in-elementor.png\" alt=\"listing item settings in elementor\">\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-field-editing\">Dynamic Field Editing<\/h2>\n\n\n\n<p>Add the&nbsp;<strong>Dynamic Field<\/strong>&nbsp;widget to the blank canvas and select \u201cTerm name\u201d as the&nbsp;<strong>Object Field<\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/dynamic-field-editing-in-elementor.png\" alt=\"dynamic field editing in elementor\">\n\n\n\n<p>Now it\u2019s possible to apply the color you\u2019ve previously set in the color picker field. Click to edit the Section, press the&nbsp;<strong>Style<\/strong>&nbsp;tab, then choose \u201cCustom\u201d for&nbsp;<strong>Background Type<\/strong>. Press the Dynamic Tag icon. Hit the last icon to the right of the&nbsp;<strong>Color<\/strong>&nbsp;item, and you\u2019ll see a small window.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/dynamic-tag-for-section.png\" alt=\"dynamic tag for section\">\n\n\n\n<p>Then select the \u201cCustom field\u201d option within JetEngine attributes:<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/custom-field-selection.png\" alt=\"custom field selection\">\n\n\n\n<p>Once the custom field window pops up, choose the custom field \u201cColor\u201d you\u2019ve created in Step 1.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/color-custom-field.png\" alt=\"color custom field\">\n\n\n\n<p>As a result, the entire Section will achieve the background color selected for this Term in the&nbsp;<strong>Color<\/strong>&nbsp;meta field. Don\u2019t forget to save the Listing.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/custom-color-applied.png\" alt=\"custom color applied\">\n\n\n\n<p>That\u2019s how the <strong>Colorpicker <\/strong>meta field works. You can now add this Listing to any page you wish using the <strong>Listing Grid<\/strong> widget. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use this tip when you want to attach and then showcase a color to a custom taxonomy, term, or tag.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","tipstricks-tags":[359],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Color Picker Field for Taxonomy Terms | Troubleshooting<\/title>\n<meta name=\"description\" content=\"Learn how to configure the color picker field on the backend and then create vibrant background shading for taxonomy terms in the front.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Color Picker Field for Taxonomy Terms | Troubleshooting\" \/>\n<meta property=\"og:description\" content=\"Learn how to configure the color picker field on the backend and then create vibrant background shading for taxonomy terms in the front.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-15T11:30:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/meta-box-for-taxonomy.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/\",\"name\":\"Using Color Picker Field for Taxonomy Terms | Troubleshooting\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2020-11-26T10:12:25+00:00\",\"dateModified\":\"2022-12-15T11:30:13+00:00\",\"description\":\"Learn how to configure the color picker field on the backend and then create vibrant background shading for taxonomy terms in the front.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & tricks\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Displaying Taxonomy Terms in Different Colors with Color Picker Field\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Color Picker Field for Taxonomy Terms | Troubleshooting","description":"Learn how to configure the color picker field on the backend and then create vibrant background shading for taxonomy terms in the front.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/","og_locale":"en_US","og_type":"article","og_title":"Using Color Picker Field for Taxonomy Terms | Troubleshooting","og_description":"Learn how to configure the color picker field on the backend and then create vibrant background shading for taxonomy terms in the front.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/","og_site_name":"Help Center","article_modified_time":"2022-12-15T11:30:13+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/09\/meta-box-for-taxonomy.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/","url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/","name":"Using Color Picker Field for Taxonomy Terms | Troubleshooting","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2020-11-26T10:12:25+00:00","dateModified":"2022-12-15T11:30:13+00:00","description":"Learn how to configure the color picker field on the backend and then create vibrant background shading for taxonomy terms in the front.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-taxonomy-terms-with-color-picker-field\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Tips & tricks","item":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/"},{"@type":"ListItem","position":3,"name":"Displaying Taxonomy Terms in Different Colors with Color Picker Field"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks\/501"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/tips-and-tricks"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"tipstricks-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tipstricks-tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}