How to Create a Custom Taxonomy in WordPress

You can create custom taxonomy and term fields in WordPress. Sometimes, we require to create a custom category and it’s meta fields which cannot be achieved by the default taxonomy. This can give you a customized layout with contents in the WordPress template. The custom taxonomy and term fields will depend upon the template layout. In the last WordPress tutorial, I have shown you to create custom post types, custom posts, and custom fields. Also, I listed out the custom posts and meta fields in the custom template layout. Today, I will extend the same project to create the custom taxonomy and term fields which will be working as a category. So, let’s begin.

Prerequisites

I will be starting with the ongoing WordPress project that I have created in previous post. Because, I have already created the custom posts type, custom post and the meta fields. Also, I have setup a custom template. So, for the better understanding, I will extend the previous post because I don’t want to write the same steps again and again.

Create Custom Taxonomy in WordPress

In the last tutorial, we had converted an HTML layout into WordPress. Then, for the services section, we had created the post types, and then we had listed out at the below layout.

Now, we will be creating the taxonomy for the portfolio section. In the portfolio section, we have static content. So, we will be considering this section as a taxonomy. Basically, we will create the taxonomy and under the taxonomy, we will create the posts.

How to Use Contact Form 7 in WordPress Custom Template

Create Custom Taxonomy Using Toolset

In the Toolset you will find the Taxonomies. Add a new taxonomy for the portfolios as showing below.

So, we have created the taxonomy for the testimonial. Therefore we have the category. Now, we will create custom post type, custom posts under this category. Here, I have specified the Testimonial in which the posts will be categorized. Because the posts will be under any category (taxonomy).

In the Dashboard, you will find the Testimonials (custom post type) that we have created. When you will hover on it, you will have the Taxonomy belongs to this post type.

Now, under this taxonomy, we will be creating the taxonomy term as showing below.

I have added two more terms here.

How to Create a Custom Blog in WordPress

Get Custom Taxonomy Terms

We will be listing out the taxonomy terms by using the get_terms() function. This function will take the parameter as an array of taxonomy name.

$terms = get_terms( array() );

Now, we will be passing the taxonomy name for which the terms will be listing out. In our case, the taxonomy name is testimonial-taxonomy.

<?php
  $terms   =   get_terms(array(
      'taxonomy' => 'testimonial-taxonomy',
      'hide_empty' => false,
  ));

   echo "<pre>";
   print_r($terms);
   echo "</pre>";

?>

You can find out the taxonomy name under the Toolset->Taxonomy->Edit taxonomy. The taxonomy slug is the taxonomy name.

When you run the above snippet, you will have the result as showing below.

Here, we have the taxonomy terms array. Here, array count is 3. Because, I have added total 3 terms in this taxonomy.

Now, we will be extracting the array and putting out to the layout.

<!-- Portfolio Grid-->
        <section class="page-section bg-light" id="portfolio">
            <div class="container">
                <div class="text-center">
                    <h2 class="section-heading text-uppercase">Portfolio</h2>
                    <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>

                <!-- portfolio taxonomy -->

                <div class="row">
                <?php 
                    $terms   =   get_terms(array(
                        'taxonomy' => 'testimonial-taxonomy',
                        'hide_empty' => false,
                        'order' =>  'desc'
                    ));

                    foreach($terms as $term):?>
                        <div class="col-lg-4 col-sm-6 mb-4">
                            <div class="portfolio-item">
                                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
                                    <div class="portfolio-hover">
                                        <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                    </div>
                                    <img class="img-fluid" src="<?php echo get_template_directory_uri();?>/custom-template/assets/img/portfolio/01-thumbnail.jpg" alt="" />
                                </a>
                                <div class="portfolio-caption">
                                    <div class="portfolio-caption-heading"> <?php echo $term->name; ?> </div>
                                    <div class="portfolio-caption-subheading text-muted"> Illustration </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>                   
                </div>
            </div>
        </section>

Here, I have printed the term name here and rest are the static content. Now, we have the three terms hence, the terms name are displaying out here.

But, what about the terms image and the description?

We haven’t passed any value for the image and the description. For these two values, we will have to pass with the taxonomy term. So, let’s do that.

How to Create Custom Template in WordPress

Create Term Field For Custom Taxonomy Term

The term field will work as a meta field for the terms. We can create the term field by navigating to Toolset->Term Fields (as showing in screenshot).

Then add new term field there like showing below. We will be creating the term field for adding the image.

In the next step, we will set the scope of visibility for the term field. Actually, we can specify for which this term field will be applicable. So, we have created this taxonomy term for the Testimonial Taxonomy.

Edit the scope of term field usability as showing below.

Now, you will have a pop up window to specify the usability with. Here, I have selected the Testimonial Taxonomy.

In the next step, we will have to create an input for this taxonomy term field. Therefore, to create the input field, click on the Add New Field button. Choose the input type, here, we are adding the image for the taxonomy term. Hence, select the image field from the list of inputs.

Now, we’ll have the option to add the image in the taxonomy term.

Navigate again to the Testimonial taxonomy and edit one by one. You will have the below screenshot.

Here, I have added the term image and description. For the description there is the default option to add it. So, when we will fetch the terms, you will have the description in the terms array.

But, we haven’t the term field (image) that we have added.

How to Convert HTML Template to WordPress

Fetch Term Field of Custom Taxonomy Term

To fetch the term meta, WordPress has the inbuilt function get_term_meta(). The below function takes an argument as a term id. Make sure to put this function inside the loop of terms listing.

 get_term_meta( term_id );

Therefore, I have put the snippet inside the term loop.

<?php
    $images         =   get_term_meta( $term->term_id );
    echo "<pre>";
    print_r($images);
    echo "</pre>";
?>

The above snippet will return the array of the meta fields and values. At this moment, we have only one meta field (term field) as the featured image. That’s why it returned the array of the featured images.

You can extract the image by using a foreach loop. But, we have the only one image, so we can do it by putting the index of array to get the featured image.

After retrieving the terms and the term meta, the final snippet will be this.

<!-- Portfolio Grid-->
        <section class="page-section bg-light" id="portfolio">
            <div class="container">
                <div class="text-center">
                    <h2 class="section-heading text-uppercase">Portfolio</h2>
                    <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>

                <!-- portfolio taxonomy -->

                <div class="row">
                    <?php 
                        $terms   =   get_terms(array(
                            'taxonomy' => 'testimonial-taxonomy',
                            'hide_empty' => false,
                            'order' =>  'desc'
                        ));

                    foreach($terms as $term):?>
                        <div class="col-lg-4 col-sm-6 mb-4">
                            <div class="portfolio-item">
                                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
                                    <div class="portfolio-hover">
                                        <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                    </div>

                                    <?php 
                                        $images = get_term_meta( $term->term_id );
                                     ?>
                                    <img class="img-fluid" src="<?php echo $images['wpcf-featured_img'][0];?>" alt="" />
                                </a>
                                <div class="portfolio-caption">
                                    <div class="portfolio-caption-heading"> <?php echo $term->name; ?> </div>
                                    <div class="portfolio-caption-subheading text-muted"> <?php echo $term->description; ?>  </div>
                                </div>
                            </div>
                        </div>                        
                    <?php endforeach; ?>                     
                </div>
            </div>
        </section>

In the above code, I have passed the term description and featured image (term meta). Now, I have the result as showing below.

Laravel 7 RESTful APIs For Todo App with Passport Auth

Conclusion

We have learned to create a custom taxonomy in WordPress. Also, we have gone through the taxonomy term, and the term meta. The taxonomy term is a custom category that WordPress allows us to manage as per our theme accordingly. In many cases, we cannot create and use the default category because it won’t allow you to customize as the requirement. Hence, to overcome the issue and for the ease, we create custom taxonomy and the term. You can put the post inside the custom taxonomy that we have created.