How to display category names from a custom post type inside WordPress

Hi there,

I’ve been building my web design portfolio website where I had a custom post type called “our-work” which had it’s own categories for that custom post type.

I wanted to use Isotope to filter my portfolio items inside my custom post type using categories from my custom post type.

So I would have:

Category buttons: All, Logos, Websites, Business cards etc..
Wp Query that loops through and displays all my items in my custom post type.

So with Isotope you can filter items in a list based on its class like below:

<div>
	<a href="" data-filter="*">All</a>
	<a href="" data-filter=".business-card">Business Cards</a>
	<a href="" data-filter=".website">Website</a>
	<a href="" data-filter=".logo">Logo</a>
</div>
<div>
	<div class="website">Website</div>
	<div class="logo">Logo</div>
	<div class="website logo">Website, Logo</div>
	<div class="business-card logo">Business Card, Logo</div>
	<div class="logo">Logo</div>
	<div class="business-card logo website">Business Card, Logo, Website</div>
	<div class="business-card">Business Card</div>
	<div class="logo website">Logo, Website</div>
</div>

So I wanted the links at the top to pull from the category list automatically so that I don’t have to hardcode it. And I also wanted to automatically loop through the items in my custom post type and then display each category that each post is categorised as in the data-filter attribute.

So first things first.

Add a custom post type in your functions.php file with its own categories.

This adds a custom post type called Our Work. You can name this anything you want.

<?php
add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'our-work',
    array(
      'labels' => array(
        'name' => __( 'Our Work' ),
        'singular_name' => __( 'Our Work' )
      ),
      'public' => true,
      'has_archive' => true,
      'taxonomies' => array( 'newcat' ),
    )
  );
}
?>

This adds a taxonomy or categories to your custom post type.

<?php
add_action( 'init', 'create_newcat_taxonomy' );

function create_newcat_taxonomy() {
  register_taxonomy(
    'newcat', // This should be the same as the taxonomies value above so that it's linked
    'our-work', // This should be the same as the top register_post_type above so that it's linked to your custom post type
    array(
      'label' => 'Category',
      'hierarchical' => true,
    )
  );
}
?>

The code below displays the buttons that you click on to filter portfolio items.

<div class="filters-button-group text-center bottom20">
    <a class="btn btn-success" data-filter="*">All</a>
    <?php $category_ids = get_all_category_ids(); ?>
    <?php
        $args = array(
            'orderby' => 'slug',
            'parent' => 0,
            'taxonomy' => 'newcat',
            );
        $categories = get_categories( $args );
        foreach ( $categories as $category ) {
            echo '<a class="btn btn-success" data-filter=".' . $category->slug . '">' . $category->name . '</a>';
        }
    ?>
</div>

This code loops through all the items in your custom post type and adds the categories to the data-filter attribute which each post is categorised as.

<?php
    $my_query = new WP_Query('post_type=our-work&showposts=25');
    while ($my_query->have_posts()) : $my_query->the_post();
?>
<div class="grid-item col-md-4 <?php
    $categories = get_the_terms( $post->ID, 'newcat' );
    foreach( $categories as $category ) {
        echo $category->slug . " ";
    }
?>">
    <img class="img-responsive" src="<?php bloginfo('template_url'); ?>/images/graphic-design.png" alt="">
    <p>
        <?php
            $categories = get_the_terms( $post->ID, 'newcat' );
            foreach( $categories as $category ) {
                echo $category->name;
            }
        ?>
    </p>
</div>
<?php endwhile; ?>

Please comment below if you don’t understand this or if it’s a little bit un-clear.

This article was written by Francois View Profile
Hi. I'm currently 31 years old and I'm a full time Front-End Web Developer. I love cats and I love life.... sometimes. I created this blog when I was figuring out how Wordpress works and it eventually started to get a whole lot of traffic. I'm now trying to help fellow South Africans with general how to stuff for example how to renew your car license disc and also reviews like restaurants etc. I haven't done much yet but I will soon start to do more and more. I will try to write as many blog posts as I can. I hope you enjoy this blog and don't forget to leave a comment. Oh and you're welcome to write a guest post or review. Just click on Write Guest Post on the top main menu.
Twitter | Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *

3 × 4 =