Loop through Categories and Display Posts Within

WordPress logo

Recently I had a website requiring a page template to display a post type’s categories and output the posts within that category on a WordPress website I was developing. This is an interesting request and the end result’s output should look like this:

  • Category 1 Title
    • Title of Post 1 in Category 1
    • Title of Post 2 in Category 1
    • Title of Post 3 in Category 1
  • Category 2 Title
    • Title of Post 1 in Category 2
    • Title of Post 2 in Category 2
    • Title of Post 3 in Category 2
  • Category 3 Title
    • Title of Post 1 in Category 3
    • Title of Post 2 in Category 3
    • Title of Post 3 in Category 3

Make sense? Of course, you can also output more than just the post title. Post thumbnails and excerpts are just two more ways to make the display more visually appealing and provide additional information to your user. Check out this image of a recent client’s site using this type of layout:

Categories display posts within

Displaying and Separating Custom Posts by Taxonomy

Pop this code in a WordPress page template and specify the post type you wish to display:

Update 4/18/13: I have updated the code below to be clearer and more easily customized.

 $post_type ) );

foreach( $taxonomies as $taxonomy ) :

    // Gets every "category" (term) in this taxonomy to get the respective posts
    $terms = get_terms( $taxonomy );

    foreach( $terms as $term ) : ?>

        

name; ?>

$post_type, 'posts_per_page' => -1, //show all posts 'tax_query' => array( array( 'taxonomy' => $taxonomy, 'field' => 'slug', 'terms' => $term->slug, ) ) ); $posts = new WP_Query($args); if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<?php echo get_the_title(); ?>


So… what’s going on here? First, we are using get_object_taxonomies() to return all of the taxonomy names of a defined object type. Next we use two foreach loops to output the posts per category.

Here is the code without any HTML tags for developing your own layout:

 $post_type ) );

foreach( $taxonomies as $taxonomy ) :

    // Gets every "category" (term) in this taxonomy to get the respective posts
    $terms = get_terms( $taxonomy );

    foreach( $terms as $term ) : ?>

      name; ?>

         $post_type,
                'posts_per_page' => -1,  //show all posts
                'tax_query' => array(
                    array(
                        'taxonomy' => $taxonomy,
                        'field' => 'slug',
                        'terms' => $term->slug,
                    )
                )

            );
        $posts = new WP_Query($args);

        if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>

                    
                            
                    
                           <?php echo get_the_title(); ?>
                    

                   

                        
                   

        

    

You can find this solution on several posts if you have been Googling. Here’s the post on WordPress.org Forums where I found the solution: Displaying and Separating Custom Posts by Taxonomy.

Have a variation to this? Let’s hear it! Please post any updates or comments below: