Display Groups of Custom Posts by their Custom Taxonomy Term

Resolved

(@tnoguchi)

Hi,

I’m trying to output a portfolio page composed of sections of CPT post thumbnails organized by their custom taxonomy term slugs.

While it’s easy for me to output the terms associated with the custom taxonomy, I’m not sure how one nests a custom query to retrieve the posts associated with each term in the foreach loop.

I’ve included the code that I’ve worked on; but this is a bit beyond my PHP skill level.

//retrieves an array of the terms as slugs
$terms = get_terms('tn_cstm_work_taxonomy', 'fields=names');

// This returns all posts in the custom taxonomy, rather than posts for each term
    $projectsArgs = array(
            'tax_query' => array(array(
                    'taxonomy' => 'tn_cstm_work_taxonomy',
                    'field' => 'slug',
                    'terms' => $terms
            ))
          );

        foreach ( $terms as $term ) {        ?>
      <div class="row">
//Populates the the section and titles with the slug; needed for navigation
        <section id="<?php echo $term; ?>" class="large-12 columns" data-magellan-destination='<?php echo $term; ?>'>
           <h3><?php echo $term; ?></h3>
           <ul class="large-block-grid-4 small-block-grid-2">

            <?php
            $projects = new WP_Query($slug); while ($projects->have_posts()) : $projects->the_post(); ?>

              <li>
                  <?php
                        //outputs thumbnails for gallery
                         if(function_exists('tn_cstm_work_thumb')) {
                          tn_cstm_work_thumb();
                    ?>
              </li>

            <?php endwhile; wp_reset_postdata(); ?>

          </ul>
        </section>
      </div><!-- .row -->     

<?php } ?>

This is obviously incorrect, the custom query will just pull all of the posts associated with any term in the custom taxonomy. Is there a way to output just the posts associated with each term?

Any hints, or help would be appreciated.

Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

Thread Starter

tnoguchi

(@tnoguchi)

10 years, 10 months ago

Well after taking a break and consulting the oracle, I was able to find a helpful post on stackoverflow with a solution by Diogenes.

The solution actually makes a lot of sense; two nested foreach loops, one to retrieve the category terms and the other to retrieve the individual posts under each category:

<!-- Begin custom tax loop -->
  <?php
  //Retrieve custom taxonomy terms using get_terms and the custom post type.
    $categories = get_terms('tn_cstm_work_taxonomy');
   //Iterate through each term
    foreach ( $categories as $category ) :
    ?>
      <div class="row">
       //Use $category->slug to retrieve the slug
        <section id="<?php echo $category->slug; ?>" class="large-12 columns" data-magellan-destination='<?php echo $category->slug; ?>'>
           <h3><?php echo $category->name; ?></h3>

           <ul class="large-block-grid-4 small-block-grid-2">
            <?php
           //Setup the query to retrieve the posts that exist under each term
            $posts = get_posts(array(
              'post_type' => 'tn_cstm_portfolio',
              'orderby' => 'menu_order',
              'order' =>  'ASC',
              'taxonomy' => $category->taxonomy,
              'term'  => $category->slug,
              'nopaging' => true,
              ));
            // Here's the second, nested foreach loop that cycles through the posts associated with this category
            foreach($posts as $post) :
              setup_postdata($post); ////set up post data for use in the loop (enables the_title(), etc without specifying a post ID--as referenced in the stackoverflow link above)
            ?>

              <li>
                  <?php
//retrieves the post thumbnail for each post
                         $thumb = get_post_thumbnail_id();
                          $img_url = wp_get_attachment_url( $thumb,'medium' ); //get full URL to image (use "large" or "medium" if the images too big)
                          $image = aq_resize( $img_url, 300, 270, true ); //resize & crop the image using aqua resizer https://github.com/sy4mil/Aqua-Resizer
                  ?>
    <figure class="work-thumb">
        <a class="th" href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
            <?php if($image) : ?>
                <img src="<?php echo $image ?>" alt="<?php the_title(); ?> thumb"/>
            <?php else : ?>
                <img class="" src="<?php bloginfo('stylesheet_directory'); ?>/img/small-placeholder.png" alt="placeholder image"> 

            <?php endif; ?>
        </a>
        <figcaption><h4><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4></figcaption>
    </figure>

<?php }
                    ?>
              </li>

            <?php endforeach; ?>

          </ul>
        </section>
      </div><!-- .row -->     

  <?php endforeach; ?>//Easy Peasy