{"id":17788,"date":"2019-12-23T13:49:23","date_gmt":"2019-12-23T13:49:23","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=17788"},"modified":"2023-03-14T11:03:30","modified_gmt":"2023-03-14T11:03:30","slug":"how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/","title":{"rendered":"How to Display Custom Taxonomies in the Taxonomy Tiles Widget"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>If you have ever worked with <em>JetWooBuilder<\/em>, you know that the<strong> Taxonomy Tiles<\/strong> widget displays the images of the <em>WooCommerce<\/em> product categories.<\/p>\n\n\n\n<p>However, following the tutorial below, you can use the <strong>Taxonomy Tiles<\/strong> widget to display custom taxonomies and default WP categories. In order to do this, you have to make some changes to the child theme.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"preparations\">Preparations<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<ol>\n<li>Go to your WP Dashboard and <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/creating-custom-taxonomy-with-jetengine\/\" target=\"_blank\" rel=\"noopener noreferrer\">create several custom taxonomies<\/a>.<\/li>\n\n\n\n<li>Create image <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-add-the-custom-meta-fields-to-the-posts\/\" target=\"_blank\" rel=\"noopener noreferrer\">meta fields<\/a> for these taxonomies.<\/li>\n\n\n\n<li>Upload and add all the necessary images.<\/li>\n<\/ol>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/custom-taxonomy.png\" alt=\"text meta field for the video format\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"displaying-custom-taxonomies\">Displaying Custom Taxonomies<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"code-adding-to-display-taxonomies\">Code Adding to display Taxonomies<\/h3>\n\n\n\n<p>Go to your WordPress directory and open the functions.php file. Add the following snippet of code there.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Crocoblock\/e910c5d01b096f5cf8b9ec57d89467ca.js\"><\/script>\n\n\n\n<p>Where <strong>&#8220;post_custom_tax\u201d<\/strong> is the key to a taxonomy you need to be displayed. If you have several of them, copy and paste this line and change the taxonomy key in each of them.<\/p>\n\n\n\n<p><strong>\u201cCustom Taxonomy\u201d<\/strong> is the actual name of your taxonomy which will be displayed in the <strong>Show<\/strong> dropdown list in the <strong>Elementor<\/strong> panel. You can name it as you wish.<\/p>\n\n\n\n<p>Next, drag-n-drop the <strong>Taxonomy Tiles<\/strong> widget on the needed page and have a look if your custom taxonomies are displayed in the list.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/edit-taxonomy-tiles.png\" alt=\"text meta field for the video format\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"code-adding-to-display-images\">Code Adding to Display Images<\/h3>\n\n\n\n<p>Now, add the following snippet of code in the functions.php file as well.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Crocoblock\/66aab65da740d7d7ae2b72c9b7a52a0d.js\"><\/script>\n\n\n\n<p>In case you have several custom taxonomies, you have to copy the \u201c<strong>if<\/strong>\u201d part for each of them and change the names and IDs.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/custom-taxonomy-images.png\" alt=\"text meta field for the video format\"\n\n\n\n<p>That\u2019s what you have in the end.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/frontend-taxonomy-tiles.png\" alt=\"text meta field for the video format\"\n\n\n\n<h3 class=\"wp-block-heading\" id=\"displaying-default-wp-categories\">Displaying default WP categories<\/h3>\n\n\n\n<p>If you want to display default WP categories, you have to follow all the steps above except for the code that will be different.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Crocoblock\/835aa5eddb86512d1c6d37b549d54f0e.js\"><\/script>\n\n\n\n<p>The <strong>$taxonomy[&#8216;category&#8217;] = esc_html__( &#8216;Post Category&#8217;, &#8216;jet-woo-builder&#8217; );<\/strong> part is responsible for displaying WP categories.<\/p>\n\n\n\n<p>Then, add the following snippet of code in order to display the images.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Crocoblock\/a6478cb38ef12785d65b6be80c965672.js\"><\/script>\n\n\n\n<p>The <strong>if ( $tax-&gt;taxonomy === &#8216;category&#8217; ) { $image_key = &#8216;category_featured_image&#8217;;<\/strong> part of code is responsible for displaying the images of the default WP categories.<\/p>\n<\/div><\/div>\n\n\n\n<p>That\u2019s it! Now you can display not only <em>WooCommerce<\/em> taxonomies with the <strong>Taxonomy Tiles<\/strong> widget but also the custom ones and default WP categories.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to display custom taxonomies with Taxonomy Tiles widget.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[525],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display Custom Taxonomies in the Taxonomy Tiles Widget | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find out how you can display custom taxonomies with the help of the Taxonomy Tiles widget from JetWooBuilder.\" \/>\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\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Custom Taxonomies in the Taxonomy Tiles Widget | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find out how you can display custom taxonomies with the help of the Taxonomy Tiles widget from JetWooBuilder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-14T11:03:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/custom-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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/\",\"name\":\"How to Display Custom Taxonomies in the Taxonomy Tiles Widget | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-12-23T13:49:23+00:00\",\"dateModified\":\"2023-03-14T11:03:30+00:00\",\"description\":\"Find out how you can display custom taxonomies with the help of the Taxonomy Tiles widget from JetWooBuilder.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Display Custom Taxonomies in the Taxonomy Tiles Widget\"}]},{\"@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":"How to Display Custom Taxonomies in the Taxonomy Tiles Widget | Crocoblock","description":"Find out how you can display custom taxonomies with the help of the Taxonomy Tiles widget from JetWooBuilder.","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\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Custom Taxonomies in the Taxonomy Tiles Widget | Crocoblock","og_description":"Find out how you can display custom taxonomies with the help of the Taxonomy Tiles widget from JetWooBuilder.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/","og_site_name":"Help Center","article_modified_time":"2023-03-14T11:03:30+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/custom-taxonomy.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/","name":"How to Display Custom Taxonomies in the Taxonomy Tiles Widget | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-12-23T13:49:23+00:00","dateModified":"2023-03-14T11:03:30+00:00","description":"Find out how you can display custom taxonomies with the help of the Taxonomy Tiles widget from JetWooBuilder.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetwoobuilder\/how-to-display-custom-taxonomies-in-the-taxonomy-tiles-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Display Custom Taxonomies in the Taxonomy Tiles Widget"}]},{"@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\/article\/17788"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"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=17788"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=17788"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=17788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}