Loop through Categories and Display Posts Within


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:

Loop through Categories and 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.


<?php
/*
 * Loop through Categories and Display Posts within
 */
$post_type = 'features';
 
// Get all the taxonomies for this post type
$taxonomies = get_object_taxonomies( array( 'post_type' => $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 ) : ?>
 
        <section class="category-section">
 
        <div class="row">
        <div class="span12">
            <h2 class="mid-heading"><?php echo $term->name; ?></h2>
        </div>
 
        <?php
        $args = array(
                'post_type' => $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(); ?>
 
            <div class="span4">
 
                <article class="inner-post clearfix">
 
                    <div class="inner-img whitebox">
                    <?php if(has_post_thumbnail()) { ?>
                            <?php the_post_thumbnail(); ?>
                    <?php }
                    /* no post image so show default */
                    else { ?>
                           <img src="<?php bloginfo('template_url'); ?>/assets/img/default-img.png" alt="<?php echo get_the_title(); ?>" title="<?php echo get_the_title(); ?>" width="110" height="110" />
                    <?php } ?>
                    </div>
 
                    <div class="inner-content">
 
                    <h3 class="heading-size-14 font-weight-600"><a href="<?php echo get_permalink(); ?>" title="Read more about <?php echo get_the_title(); ?>"><?php  echo get_the_title(); ?></a></h3>
 
                        <?php the_excerpt(); ?>
                    </div>
                </article><!-- about-box -->
 
 
            </div>
 
        <?php endwhile; endif; ?>
        </div>
        <hr>
        </section>
 
    <?php endforeach;
 
endforeach; ?>

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.

ПОЛЕЗНО  Replace word's in translation

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

<?php
/*
 * Loop through Categories and Display Posts within
 */
$post_type = 'features';
 
// Get all the taxonomies for this post type
$taxonomies = get_object_taxonomies( array( 'post_type' => $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 ) : ?>
 
      <?php echo $term->name; ?>
 
        <?php
        $args = array(
                'post_type' => $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 if(has_post_thumbnail()) { ?>
                            <?php the_post_thumbnail(); ?>
                    <?php }
                    /* no post image so show a default img */
                    else { ?>
                           <img src="<?php bloginfo('template_url'); ?>/assets/img/default-img.png" alt="<?php echo get_the_title(); ?>" title="<?php echo get_the_title(); ?>" width="110" height="110" />
                    <?php } ?>
 
                   <?php  echo get_the_title(); ?>
 
                        <?php the_excerpt(); ?>
                   
 
        <?php endwhile; endif; ?>
 
    <?php endforeach;
 
endforeach; ?>

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.

ПОЛЕЗНО  Post Featured image column on admin post list page

источник инфы