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:

Taxonomy Thumbnails
Taxonomy Thumbnails
Featured image of a term on an archive page
Featured image of a term on an archive page

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:

create a new post type for the portfolio

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.

creating a taxonomy for the portfolio

In the Post Types tab, choose Portfolio to apply this taxonomy to this post type. And don’t forget to click Publish.

Choose Portfolio to apply the taxonomy to the post type in the Post Types tab.

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.

the new Portfolio post type and Portfolio Type taxonomy in the Dashboard menu.

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.

Select Taxonomy for the Location, and choose the Portfolio Type taxonomy in Setting tab.

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.

upload an image for each term in the taxonomy in Portfolio Type tab.

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 the args variable with the data taken from the taxonomy that has the slug as portfolio-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 the image_upload and image_url variables to take the value of the fields that have IDs as upload_portfolio_thumbnail and url_portfolio_thumbnail from the corresponding terms;
  • {% if image_upload %}: if this variable has value, it will create image_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 the image_upload variable has no value, it will get the value from the image_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.

select Shortcode in Type section.

After publishing, your template is saved as a shortcode, and you can use this shortcode to display the template anywhere on your website.

The shortcode to display the template anywhere.

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.

Display the template to a page on the front end with Oxygen.

Paste the shortcode of the view here and save. You can immediately see the list of terms here with the thumbnails.

Paste the shortcode of the view.

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.

add some CSS in the CSS tab of the view

It looks much better now, isn’t it?

The result of displaying portfolio section using CSS.

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.

archive page for each term of the taxonomy.

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.

Go to Oxygen > Template > Archive > Edit with Oxygen and select a term to preview.

Then, click Structure to see all the elements and structure of your page.

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:

select PHP & HTML in Code Block component.

<?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 as portfolio-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:

The result after adding the Featured Image to the Archive Page

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:

Go to Manage > Stylesheets > Add Stylesheet and add code to style featured image section.

.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:

The featured image after styling

Visit other terms, you can see that all featured images are displayed beautifully.

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!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. Display the Most Viewed Posts - P1 - using MB Views
  13. How to Add Custom Fields to Display Banners using Meta Box Plugin
  14. How to Add Guest Author in WordPress using Meta Box (Part 1)
  15. How to Add Guest Author in WordPress using Meta Box (Part 2)
  16. How to Add Related Posts to WordPress Using Meta Box
  17. How to Build a Hotel Booking Website Using Meta Box - P1
  18. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  19. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  20. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  21. How to Create a Classified Ads Website using Meta Box
  22. How to Create a Product Page - P2 - Meta Box + Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box + Bricks
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe with Meta Box Plugin
  31. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  32. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  33. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  34. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  35. How to Create a Team Members Page - P4 - Just Meta Box
  36. How to Create ACF Flexible Content Field with Meta Box
  37. How to Create an Auto-Updated Cheat Sheet in WordPress
  38. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  39. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  40. How to Create an FAQs Page -P3- Using Meta Box
  41. How to Create Buttons with Dynamic Link using Custom Fields
  42. How to Create Category Thumbnails & Featured Images Using Custom Fields
  43. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  44. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  45. How to Create Online Admission Form for School or University
  46. How to Create Online Reservation Form for Restaurants using Meta Box
  47. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  48. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  49. How to Display Images from Cloneable Fields - P2 - with Oxygen
  50. How to Display Images from Cloneable Fields - P3 - with Elementor
  51. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  52. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  53. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  54. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  55. How to Manually Reorder Posts with Meta Box
  56. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  57. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

3 thoughts on “How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen

  1. 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?

Leave a Reply