Display the Terms of a Custom WordPress Taxonomy

Have you been working with custom WordPress taxonomies and post types? There are many ways to display associated terms in a custom WordPress taxonomy for a post. In this article we will go through them to show you how you can easily display the associated terms.

We can do pretty much everything with custom taxonomies. They can be used for content to serve as regular categories or tags but they can also be used as a filterable option on a search page. They could be used also just to give a better description or specification of a content, product, portfolio or something else.

Examples which I will show you here can be used on different parts of your WordPress site since every example is a function so that you can use it on a single post page, archive or even in a widget.

Linked Terms of WordPress Taxonomy

The first example is the simplest one. This example is displaying the terms with links wrapped around each term name. The function we will use is the_terms.

php the_terms( $id, $taxonomy, $before, $sep, $after ); ?> 

Since this function will always show linked terms, our example of this function will be used to handle various restaurants food types. We will show which food types our restaurants are serving.

We will use this settings:

  • Taxonomy: food_type,
  • Text before terms: Serving:,
  • Separator: ‘,’,
<div class="restaurant_food_types">
  <?php the_terms( get_the_id(), 'food_type', __( "Serving" ), "," ); ?>
</div>

Here we are not setting the last parameter because we do not need it. If you really want to close the list, then you could use a fullstop for the last parameter.

Linked Terms in a List

This example will return (not display) a list of terms. This is almost the same as the first example but we will need to display the HTML string we get from the function. The function that is used here is get_the_term_list.

<?php get_the_term_list( $id, $taxonomy, $before, $sep, $after ) ?> 

We will use the same configuration as the above example but we will list them inside a list and then show them.

<?php
  $the_terms = get_the_term_list( get_the_id(), 'food_type', __( "Serving" ) . "<ul><li>", "</li><li>", "</li></ul>" );
?>
<div class="restaurant_food_types">
  <?php echo $the_terms; ?>
</div>

How did we get the list by doing the above? The first thing before any term is listed we are displaying the word Serving: concatenated with the opening tag of ul and a tag of li. While the terms are listed, each is ending with a closing tag </li> and an opening tag <li>. The last term is not ending in that way, but it is ending with two closing tags, one for li and one for ul.

Here is a simplified example of the building process of this HTML string. Do notice that here I did not include the linked terms but only the names so the example is easy to read.

<?php
/**Example:
 * Terms: fish, meat, vege
 * Step 1:
 * Serving: <ul><li>fish
 * Step 2
 * Serving <ul><li>fish</li><li>meat
 * Step 3
 * Serving <ul><li>fish</li><li>meat</li><li>vege
 * Step 4
 * Serving <ul><li>fish</li><li>meat</li><li>vege</li></ul>
?>

Custom display of Terms in a WordPress Taxonomy

Here we will show few examples of how you can easily make your own custom display of terms. Here you do not need to link the terms and by using this function you can use it for anything that has to do with WordPress Taxonomies. The function that is enabling that is wp_get_post_terms.

<?php 
$args = array('orderby' => 'name', 'order' => 'ASC', 'fields' => 'all');
$terms = wp_get_post_terms( $post_id, $taxonomy, $args ); 
?>

We can also change the attribute fields and set them to ids or names and then we will only receive the requested data. If it is left to all then we will receive a full object of each term that contains several data:

  • term_id – the id of the term itself
  • name – the term name
  • slug – a slug generated from the term name
  • term_group – the term_id of the parent term (also stored as ‘parent’)
  • term_taxonomy_id -the id of the taxonomy that the term belongs to
  • taxonomy – the name of the taxonomy that the term belongs to
  • description – the taxonomy description
  • parent – the term_id of the parent term (also stored as ‘term_group’)
  • count – the number of uses of this term

In the scenario when only ids or names are requested we will get an array with those data such as:

<?php
// returned IDs
array( 30, 23, 34 );

// returned names
array( 'Food', 'Vege', 'Meat' );
?>

Working with Term object

So now that we know that this function is something that will gives us more data than the two before, we can go and create our own function that will utilize this one and display a list of terms with Name and Description.

<?php 

function my_terms( $post_id, $taxonomy, $echo = true, $description = true ) {

  $terms = wp_get_post_terms( $post_id, $taxonomy ); 
  
  $output = "";
  
  //If there are any terms associated with the $post_id
  if( count( $terms ) > 0 ) {
    
    $output .= "<ul>";
    
    foreach( $terms as $term ) {
    
      $output .= "<li> . $term->name;
      
      if( $description ) {
        
        $output .= "<small>" . $term->description . "</small>";
      }
      
      $output .= "</li>";
    }
    
    $output .= "</ul>";
    
  }
  
  if( $echo ) {
    echo $output;
  } else {
    return $output;
  }
}



?>

We have defined a function here that does take the post ID and the taxonomy but also takes to boolean parameters:

  • echo – if true, it will display the list otherwise it will return it
  • description – if true, it will display the description alongside the term name

Here are some examples on how this function can be used:

<?php
my_terms( $post_id, 'food_type', true, true ); //Show the list with the description

my_terms( $post_id, 'food_type', true, false ); //Show the list without the description

$food_types = my_terms( $post_id, 'food_type', false, true ); //Return the list with the description
echo $food_types; //Display the list

$food_types_no_desc = my_terms( $post_id, 'food_type', false, false ); //Return the list without the description
echo $food_types_no_desc; //Display the list
?>

If we would like to wrap the terms in a links we could use the function get_term_link to generate the link by providing the term id and the taxonomy in the function. After that we would wrap our term name with a </a> element that would contain the link in its href attribute.

Conclusion

WordPress API is full of useful functions that can be used for many purposes. Some of those functions are a simplified version of a more complex one. The first two examples are simplified versions of the function in the third example. By using the complex one we can control the output and make our own type of output.

With the function we have created we control how the terms are displayed and what data we will use.

https://www.ibenic.com/display-terms-custom-wordpress-taxonomy/
«
»
ACF (3)
Admin Column (4)
Breadcrumbs (2)
CSS (6)
Custom post types (4)
Custom Taxonomies (3)
Customizer (4)
Hooks & Filters (3)
Jquery (9)
LAMP (10)
Login (5)
Meta boxes (6)
Multisite (2)
My Code (1)
Open Graph Meta Tags (1)
Redirects (2)
SEO (4)
Theme Building (5)
Title Tags (2)
Typography (3)
Uncategorised (54)
User Roles & Capabilities (2)
White labeling (9)
Working with Images (11)
Working with videos (2)
WP Database (1)