Previously, we introduced to you how to create thumbnails and featured images for categories using Meta Box and Gutenberg. So in this tutorial, let’s find out how to do it with taxonomies. Basically, it’s quite similar to the method for categories. So if you don’t use any page builders, you can refer to our last post. Otherwise, try this way with Oxygen Builder in this article.
Traditionally, we often need these features for a portfolio page, like this demo that I’m going to create:


Preparation
You’ll need these plugins:
- Meta Box core plugin: provides a framework to create custom fields. You can download and install it from wordpress.org;
- MB Custom Post Type & Custom Taxonomies: a free extension of Meta Box to create custom post type. It’s also available on wordpress.org;
- Meta Box Builder: a premium extension of Meta Box providing a UI on the back end to create and configure custom fields without code;
- MB Term Meta: a premium extension of Meta Box to add custom field created with Meta Box to categories, tags, or any custom taxonomies;
- MB Views: this Meta Box premium extension helps you create templates without touching the theme’s files;
Finally, Oxygen Builder. You should use the 3.9 version to have the native integration with Meta Box.
After having all the required plugins, let’s move to display thumbnails and featured images for taxonomies.
Video Version
Create a New Post Type and Taxonomy
Go to Meta Box > Post Types > New Post Type to create a new post type. I created a new post type with the name as Portfolio as below:
After creating a custom post type for the portfolio, I’m going to create a new taxonomy called Portfolio Type.
Visit Meta Box > Taxonomies > Add New. Similar to creating a new custom post type, just enter the name for the taxonomy.
In the Post Types tab, choose Portfolio to apply this taxonomy to this post type. And don’t forget to click Publish.
Now in the Dashboard menu, you can see the new Portfolio post type and Portfolio Type taxonomy. Just add terms for the taxonomy. It’s the same as creating a new category in WordPress.
Create Custom Fields for Taxonomy
In this step, I’m going to create custom fields for users to set up featured images and thumbnails for the created taxonomy.
Head to Meta Box > Custom Fields > Add New > Add Fields. I’m creating 2 fields with the field types are URL and Single Image. Users can input an image by entering the image URL into the URL field. Or they can upload images to the Media Library in the Single Image field.
With the URL field, your website doesn’t need to store these images. As for uploading images with the Single Image field, your site will load faster. However, if you have a large number of taxonomies or you need high-quality images, using the Single Image field may cause a bad effect on your server.
These fields are so simple that I just enter the name and ID for them without any further configuration. But remember the ID of them as you need this information in the next steps.
In the Settings tab, select Taxonomy for the Location, and choose the Portfolio Type taxonomy. Then, publish it.
After creating these fields, visit the Portfolio Type taxonomy and you will see 2 custom fields like this. Just upload an image for each term in this taxonomy.
Now, let’s move to the next part to display the portfolio and its thumbnails on the front end with MB Views.
Display Thumbnails for Taxonomy on the Front End
Step 1: Create a Template
Let’s use MB Views to create a new template without touching the theme’s files. Just go to Meta Box > Views > Add New, and add this code to the Template tab:
{% set args = {taxonomy: 'portfolio-type',hide_empty: false} %} {% set portfolios = mb.get_terms( args ) %} <div class="portfolio container"> <h1 class="heading-title">Portfolio</h1> <div class="thumbnail-images"> {% for portfolio in portfolios %} <div class="item"> <div class="overlay-thumbnail-categories"> {% set image_upload = mb.get_term_meta( portfolio.term_id, 'upload_portfolio_thumbnail', true ) %} {% set image_url = mb.get_term_meta( portfolio.term_id, 'url_portfolio_thumbnail', true ) %} {% if image_upload %} {% set image_upload_link = mb.wp_get_attachment_image_src( image_upload, large) %} <div class="thumbnail" style="background-image:url({{ image_upload_link [0] }})"></div> <img src="{{ image_upload_link[0] }}"> {% elseif image_url %} <div class="thumbnail" style="background-image:url({{ image_url }})"></div> <img src="{{ image_url }}"> {% else %} <img src="http://demo1.elightup.com/test-metabox/wp-content/uploads/2020/11/oriental-tiles.png"> {% endif %} </div> <div class="category-title"> <div class="category-name">{{ portfolio.name }}</div> <p class="description"> {{ portfolio.description }} </p> <a href="{{ mb.get_category_link( portfolio.term_id ) }}" target="_blank" rel="noopener">View More</a> </div> </div> {% endfor %} </div> </div>
Explanation:
{% set args = {taxonomy: 'portfolio-type',hide_empty: false} %}
: to declare theargs
variable with the data taken from the taxonomy that has the slug asportfolio-type
;{% set portfolios = mb.get_terms( args ) %}
: this is used to pass the returned data of the args variable to this portfolios variable;{% for portfolio in portfolios %}
: This loop will list all the terms of the taxonomy;{% set image_upload = mb.get_term_meta()
and{% set image_url = mb.get_term_meta()
: they create theimage_upload
andimage_url
variables to take the value of the fields that have IDs asupload_portfolio_thumbnail
andurl_portfolio_thumbnail
from the corresponding terms;{% if image_upload %}
: if this variable has value, it will createimage_upload_link
variable to get the link of the uploaded image;
wp_get_attachment_image_src ()
: to get the link of the uploaded image of the corresponding term;<img src="{{ }}">
: to display the image by the link assigned to the corresponding variable;{% elseif image_url %}
: if theimage_upload
variable has no value, it will get the value from theimage_url
variable;<img src="http://demo1.elightup.com/test-metabox/wp-content/uploads/2020/11/oriental-tiles.png">
: In case that you don’t upload any image or insert any URL to the 2 custom fields, it will display a default image from this link. You can choose the default image as you want;{{ portfolio.name }}
: this displays the name of the terms;{{ portfolio.description }}
: this displays the description of the terms;<a href="{{ mb.get_portfolio_link( portfolio.term_id ) }}" target="_blank" rel="noopener">View More</a>
: this code shows View More texts, and places the link of the corresponding post into it. So, when people hover over a thumbnail of a post, the texts will appear, and they can click to read more.
After adding the code, move to the Type section and select Shortcode.
After publishing, your template is saved as a shortcode, and you can use this shortcode to display the template anywhere on your website.
Step 2: Add the Template to a Page on the Front End
Now, we’re going to display the template to a page on the front end with Oxygen.
First, create a new page, or you can use an existing page, and then click Edit Template. After the visual template editor of Oxygen shows up, click Add and choose the Shortcode component.
Paste the shortcode of the view here and save. You can immediately see the list of terms here with the thumbnails.
Step 3: Style the Portfolio Section Using CSS
To make it look better, I will add some CSS in the CSS tab of the view. You can refer to my CSS code here.
It looks much better now, isn’t it?
So we’ve done with the thumbnails. Move to the next part to deal with featured images.
Display Featured Image of Taxonomy on the Front End
I already have an archive page for each term of the taxonomy. But there haven’t been any featured images for it yet so I will create one at the top.
Step 1: Add the Featured Image to the Archive Page
Go to Oxygen > Template > Archive > Edit with Oxygen. Next, select a term to preview it.
Then, click Structure to see all the elements and structure of your page.
I’ll add a component named Code Block, and drag and drop it into the Section, above the Div. Then, select PHP & HTML and add this code:
<?php $terms= get_the_terms( $post->ID, 'portfolio-type'); $background_image = get_term_meta( $terms[0]->term_id, 'upload_portfolio_thumbnail', true ); if ($background_image) { $link_image = wp_get_attachment_image_src( $background_image, 'full' ); $link_image_source = $link_image[0]; } else { $link_image_source = get_term_meta( $terms[0]->term_id, 'url_portfolio_thumbnail', true ); } if ( !empty( $terms ) ){ $term = array_shift( $terms ); } ?> <div class="port-thumbnail"> <img class="thumbnail-cat" src="<?php echo $link_image_source ?>"> </div> <div class="portfolio-heading"><?php echo $term->name; ?></div> <div class="portfolio-description"><?php echo category_description(the_category_id()); ?> </div>
Explanation:
$terms= get_the_terms( $post->ID, 'portfolio-type')
: to get the list of the term from the taxonomy that the ID asportfolio-type
;get_term_meta ()
: to get the custom fields’ value of the corresponding terms;src="<?php echo $link_image_source ?>
: to display images from the links that are returned from the$link_image_source
variable;if ($background_image) {$link_image = wp_get_attachment_image_src( $background_image, 'full' );$link_image_source = $link_image[0];}else {$link_image_source = get_term_meta( $terms[0]->term_id, 'url_portfolio_thumbnail', true );}
The logic of this part is quite similar to the code of the view in step 2 of the first part. It sets a rule to decide which image to display;if ( !empty( $terms ) ){
: to check which archive page of which term that users are in;<?php echo $term->name; ?>
: to display the name of the corresponding term that users are in;<?php echo category_description(the_category_id()); ?>
: similarly, to display the description of the corresponding term;
Here is the result:
Step 2: Style the Featured Image Section
If you want your featured images to be more beautiful, like the demo that I showed at the beginning of this post, add some CSS to Oxygen. Go to Manage > Stylesheets > Add Stylesheet and add this code:
.port-thumbnail { position: relative; height: 100vh; } .archive-page-layout .port-thumbnail .thumbnail-cat { position: absolute; top: 0; height: 100%; width: 100%; } .portfolio-heading { max-width: 1200px; margin: 0 auto; width: 100%; font-size: 56px; font-weight: 700; color: #00B1B3; } .portfolio-description { max-width: 1200px; margin: 0 auto; width: 100%; } .archive-page-layout .ct-section-inner-wrap .ct-code-block { width: 100%; } .portfolio-description p { margin: 0; } .port-thumbnail .thumbnail-cat { width: 100%; height: 100vh; }
The featured image looks much better now:
Visit other terms, you can see that all featured images are displayed beautifully.
Last Words
With Meta Box and Oxygen, creating thumbnails and featured images for taxonomy becomes easier, right? In the event that you don’t want to use a page builder, remember to refer to this tutorial using only Meta Box.
Good luck!
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display a User List On the Frontend with Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download Buttons Using Custom Fields with Meta Box Plugin
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show Posts with Specific Criteria - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
How to get image URL from term meta if it is Image Advanced field with a single image uploaded?
for example I have Collections, and each collection has meta image with it. What will be the syntax of MBView to call such URL?
I suggest using Insert Field in MBView. It's such a powerful feature.
Is there a tutorial to display taxonomy icons for multiple taxonomies in a custom post type?
I'm using the code provided on this tutorial to display my custom taxonomy terms on woocommerce products. But the terms are showing on every product, even if they're not associated with term(s).
If I add a term from this custom taxonomy to one single product, it's displayed on every other product on the frontend !
Any clue why this is happening?