Creating taxonomy thumbnails & featured Images

We are going to create taxonomy thumbnails and featured images using custom fields. The images will be saved in custom fields, then displayed as thumbnails and featured images of the taxonomy on a portfolio page, like this:

Video version

Preparation

In addition to using the Meta Box, make sure you already have these extensions:

• MB Custom Post Type & Custom Taxonomies: a free extension of Meta Box to create custom post types. It’s also available on wordpress.org;
• Meta Box Builder: It provides 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 fields created with Meta Box to categories, tags, or any custom taxonomies;
• MB Views: It helps you create templates without touching the theme’s files;

Finally, Oxygen Builder. I build the pages with Oxygen in this practice. You should use the 3.9 version or the higher one to have native integration with Meta Box.

Creating a new post type and taxonomy

Creating a new post type

Go to Meta Box > Post Types > New Post Type.

After publishing, you will see your new post type displayed on the admin dashboard.

Creating taxonomy and terms

Go to Meta Box > Taxonomies > Add New.

Upon creating the desired taxonomy, move to the Post Types tab and choose Portfolio to apply this taxonomy to the post type. And don’t forget to click Publish.

After publishing, a new Portfolio post type and Portfolio Type taxonomy appear in the Dashboard menu. Just add terms for the taxonomy. It’s the same as creating a new category in WordPress.

Creating custom fields

Go to Meta Box > Custom Fields > Add New to create some fields.

I will create two fields, as follows:

• URL: It allows users to input an image by entering the image URL.
• Single Image: It supports uploading images to the Media Library.

These fields are so simple that I just enter their name and ID without any further configuration.

Then, move to the Settings tab, set the Location as Taxonomy and select Portfolio Type.

Then, go to the Portfolio Type taxonomy, and you will see the fields. Let’s upload images for each term here.

Displaying thumbnails on the frontend

Creating a template

Go to Meta Box > Views > Add New, and create a new view.

In the Template tab, I used this code:

{% 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_url = mb.get_term_meta( portfolio.term_id, 'url_portfolio_thumbnail', true ) %}
                {% if 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;
• 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;
• <imgsrc="http://demo1.elightup.com/test-metabox/wp-content/uploads/2020/11/oriental-tiles.png">: In case you don’t upload any image or insert any URL to the two 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 post's thumbnail, the texts appear, and they can click to read more.

Now, move to the Type section and select Shortcode.

After publishing, your template will appear as a shortcode. You can use it to display the template anywhere on your website.

Adding the template to a page

Go to Pages > Add New to create a new page. You can also use an existing page.

Then, click Edit with Oxygen. In the case, you use any other page builder, you also can use the shortcode and insert as we’re doing in this step.

In Oxygen, click Add and search for Shortcode.

Then, paste the shortcode into the Full Shortcode item. And you can see the list of terms that appears with the thumbnails.

Styling the portfolio section

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.

Here is the result:

Displaying featured images of taxonomy

I have an archive page for each taxonomy term. However, they haven’t had featured images yet, so I will create one at the top.

Adding 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');
   $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;
• 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:

Styling the featured image section

Go to Manage > Stylesheets > Add Stylesheet and add code:

Here is my example CSS that I showed at the beginning of this post:

.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, and you can see that all featured images are displayed beautifully.