Skip to main content
3 of 10
added 54 characters in body

Complex Custom Loop with Includes

The Problem

I have a complex loop designed for showcasing my portfolio.

Here is the criteria:

  • Portfolio is powered by a custom post type called PORTFOLIO
  • Each post will be assigned a class of either 'landscape' or 'portrait' so that I can serve two different featured image sizes, and it's handled by dev logic, to add visual interest to the layout on each visit
  • Needs to paginate
  • I have included a graphic to illustrate what I am trying to achieve
  • I have variables (count, classes, customClass), that won't work inside includes unless they are added as global variables, which I know is poor practice

Details & What I Have Tried

The code below is working, but I know it is not optimal. I am seeking input on how to improve this to be more digestible.

  • I have the article element in an include template, as it is repurposed so often. Is this the correct/best approach? Seems repetitive, thus making me assume it is incorrect.

As noted above, I am also leveraging global variables which I would like to resolve, as I understand that is a no-no.

This is my existing loop, but it feels wrong and messy.

//----------------------- WORK PAGE LOOP
<?php 
  // ASSIGN IMG ORIENTATION
  $classes = array(
   'landscape',
   'portrait',
  );
  $count = 0;
  $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;
  $args  = array(
     'post_type'          => 'portfolio',
     'orderby'            => 'rand',
     'posts_per_page'     => 99,
     'paged'              => $paged,
     'paged'              => 1,
   );
 $portfolio_loop = new WP_Query($args); 
?>

//----------------------- GRID BEGINS
<div class="grid__row">
  <!-- THE LOOP -->
  <?php while ($portfolio_loop->have_posts()): 
    $portfolio_loop->the_post();  
    $count++; 
    $customClass = $classes[$portfolio_loop->current_post%2];
  ?>

  <!-- ROW 1 -->
  <?php if (in_array($count, array( 1,2,3 )) && $paged == 1) :   ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 2 -->
  <?php elseif ($count <= 5 && $paged ==1 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="count-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 3 -->
  <?php elseif ($count <= 7 && $paged ==1 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 4 -->
  <?php elseif($count > 7 && $count < 12 && $paged == 1) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 5 -->
  <?php elseif($count > 11 && $count < 16 && $paged == 1) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="count-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 6 -->
  <?php elseif ($count > 15 && $paged == 1) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="count-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    [![enter image description here][1]][1]</div>

  <?php endif; ?>
  <?php endwhile; ?>

</div>

This is my include file:

<?php 
  // GLOBAL VARIABLES
  global $count;
  global $classes;
  global $customClass;
?> 

<article id="post-<?php the_ID(); ?>" <?php post_class( $customClass . $count . ' m-b-20--sm m-b-75--lg'); ?>>
  <!-- COMING SOON -->
  <?php if(has_term('coming-soon', 'portfolio_status')) { ?>
    <?php get_template_part('template-parts/portfolio/portfolio', 'soon-badge'); ?>
  <?php } else { ?>
  <?php } ?>
  <!-- COMING SOON --> TEST: <?php echo $customClass; ?>
  <figure class="lazyload portfolio__image m-b-30--md m-b-20--sm"> 
    <?php if(!has_term('coming-soon', 'portfolio_status')) { ?>
    <a href="<?php echo get_permalink(); ?>">  
    <?php } 
      if ($customClass == "landscape") {
        echo the_post_thumbnail('portfolio-landscape');
      }
      elseif ($customClass == "portrait") {
        echo the_post_thumbnail('portfolio-portrait');
      }
    ?>  
    <?php if(!has_term('coming-soon', 'portfolio_status')) { ?>
    </a>
    <?php } ?>    
  </figure>
  <span class="block meta"><?php echo strip_tags(get_the_term_list( $post->ID, 'portfolio_categories', ' ',', ')); ?></span>
  <h2 class="h4 portfolio__title">
    <span class="h4">
      <?php if(!has_term('coming-soon', 'portfolio_status')) { ?>
      <a href="<?php echo get_permalink(); ?>">  
        <?php } ?>     
          <?php the_title(); ?>
        <?php if(!has_term('coming-soon', 'portfolio_status')) { ?>
      </a>
      <?php } ?>
    </span>
  </h2>
  <div class="portfolio__excerpt m-t-10"><?php the_excerpt(); ?></div>
  <?php get_template_part('template-parts/portfolio/portfolio', 'tags'); ?>
</article>