Skip to main content
deleted 14 characters in body
Source Link
<div class="portfolio grid__container">

  <?php 
    // VARIABLE FOR IMG ORIENTATION 
    $classes = array(
      'landscape',
      'portrait',
    );
    // COUNT THE POSTS
    $count = 0;
    // PAGINATE
    $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1;
    // ARGUMENTS
    $args  = array(
      'post_type'          => 'portfolio',
      'orderby'            => 'rand',
      'posts_per_page'     => 18,
      'paged'              => $paged,
    );
    // CUSTOM LOOP QUERY
    $portfolio_loop = new WP_Query($args);
    ?>  

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

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

  <!-- ROW 2 // LESS THAN OR EQUAL TO 5 -->
  <?php elseif ($count <= 5 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 3 // LESS THAN OR EUQAL TO 7 -->
  <?php elseif ($count <= 7 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 4 // LESS THAN OR EQUAL TO 12 -->
  <?php elseif($count <= 10 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

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

  <!-- ROW 6 -->
  <?php else : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <?php endif; ?> <!-- END CONDITIONAL STATEMENTS-->
  <?php endwhile; ?>
  </div> <!-- GRID_ROW -->

<?php wp_reset_postdata(); ?>

<?php
  $big = 999999999; // need an unlikely integer

  echo paginate_links( array(
    'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format'  => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $portfolio_loop->max_num_pages
  ) );
?>
        
</div>
<div class="portfolio grid__container">

  <?php 
    // VARIABLE FOR IMG ORIENTATION 
    $classes = array(
      'landscape',
      'portrait',
    );
    // COUNT THE POSTS
    $count = 0;
    // PAGINATE
    $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1;
    // ARGUMENTS
    $args  = array(
      'post_type'          => 'portfolio',
      'orderby'            => 'rand',
      'posts_per_page'     => 18,
      'paged'              => $paged,
    );
    // CUSTOM LOOP QUERY
    $portfolio_loop = new WP_Query($args);
    ?>  

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

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

  <!-- ROW 2 // LESS THAN OR EQUAL TO 5 -->
  <?php elseif ($count <= 5 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 3 // LESS THAN OR EUQAL TO 7 -->
  <?php elseif ($count <= 7 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 4 // LESS THAN OR EQUAL TO 12 -->
  <?php elseif($count <= 10 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

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

  <!-- ROW 6 -->
  <?php else : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <?php endif; ?> <!-- END CONDITIONAL STATEMENTS-->
  <?php endwhile; ?>
  </div> <!-- GRID_ROW -->

<?php wp_reset_postdata(); ?>

<?php
  $big = 999999999; // need an unlikely integer

  echo paginate_links( array(
    'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format'  => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $portfolio_loop->max_num_pages
  ) );
?>
        
</div>
<div class="portfolio grid__container">

  <?php 
    // VARIABLE FOR IMG ORIENTATION 
    $classes = array(
      'landscape',
      'portrait',
    );
    // COUNT THE POSTS
    $count = 0;
    // PAGINATE
    $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1;
    // ARGUMENTS
    $args  = array(
      'post_type'          => 'portfolio',
      'orderby'            => 'rand',
      'posts_per_page'     => 18,
      'paged'              => $paged,
    );
    // CUSTOM LOOP QUERY
    $portfolio_loop = new WP_Query($args);
    ?>  

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

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

  <!-- ROW 2 // LESS THAN OR EQUAL TO 5 -->
  <?php elseif ($count <= 5 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 3 // LESS THAN OR EUQAL TO 7 -->
  <?php elseif ($count <= 7 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 4 // LESS THAN OR EQUAL TO 12 -->
  <?php elseif($count <= 10 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

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

  <!-- ROW 6 -->
  <?php else : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <?php endif; ?> <!-- END CONDITIONAL STATEMENTS-->
  <?php endwhile; ?>
  </div> <!-- GRID_ROW -->

<?php wp_reset_postdata(); ?>

<?php
  $big = 999999999; // need an unlikely integer

  echo paginate_links( array(
    'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format'  => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $portfolio_loop->max_num_pages
  ) );
?>
        
</div>
added 3156 characters in body
Source Link

Updated V2 Code

  • Simplified conditional statements, not sure why I made them so complicated before.
  • Removed double instances of $paged and updated pagination to use the built in WordPress paginate_links snippet as noted by @Rajiii4u
<div class="portfolio grid__container">

  <?php 
    // VARIABLE FOR IMG ORIENTATION 
    $classes = array(
      'landscape',
      'portrait',
    );
    // COUNT THE POSTS
    $count = 0;
    // PAGINATE
    $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1;
    // ARGUMENTS
    $args  = array(
      'post_type'          => 'portfolio',
      'orderby'            => 'rand',
      'posts_per_page'     => 18,
      'paged'              => $paged,
    );
    // CUSTOM LOOP QUERY
    $portfolio_loop = new WP_Query($args);
    ?>  

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

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

  <!-- ROW 2 // LESS THAN OR EQUAL TO 5 -->
  <?php elseif ($count <= 5 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 3 // LESS THAN OR EUQAL TO 7 -->
  <?php elseif ($count <= 7 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 4 // LESS THAN OR EQUAL TO 12 -->
  <?php elseif($count <= 10 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

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

  <!-- ROW 6 -->
  <?php else : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <?php endif; ?> <!-- END CONDITIONAL STATEMENTS-->
  <?php endwhile; ?>
  </div> <!-- GRID_ROW -->

<?php wp_reset_postdata(); ?>

<?php
  $big = 999999999; // need an unlikely integer

  echo paginate_links( array(
    'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format'  => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $portfolio_loop->max_num_pages
  ) );
?>
        
</div>

Updated V2 Code

  • Simplified conditional statements, not sure why I made them so complicated before.
  • Removed double instances of $paged and updated pagination to use the built in WordPress paginate_links snippet as noted by @Rajiii4u
<div class="portfolio grid__container">

  <?php 
    // VARIABLE FOR IMG ORIENTATION 
    $classes = array(
      'landscape',
      'portrait',
    );
    // COUNT THE POSTS
    $count = 0;
    // PAGINATE
    $paged = (get_query_var('paged') > 1) ? get_query_var('paged') : 1;
    // ARGUMENTS
    $args  = array(
      'post_type'          => 'portfolio',
      'orderby'            => 'rand',
      'posts_per_page'     => 18,
      'paged'              => $paged,
    );
    // CUSTOM LOOP QUERY
    $portfolio_loop = new WP_Query($args);
    ?>  

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

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

  <!-- ROW 2 // LESS THAN OR EQUAL TO 5 -->
  <?php elseif ($count <= 5 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 3 // LESS THAN OR EUQAL TO 7 -->
  <?php elseif ($count <= 7 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--6" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <!-- ROW 4 // LESS THAN OR EQUAL TO 12 -->
  <?php elseif($count <= 10 ) : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

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

  <!-- ROW 6 -->
  <?php else : ?>
    <div class="grid__cell grid__cell__small--12 grid__cell__medium--4" id="counter-<?php echo $count; ?>">
      <?php get_template_part('template-parts/portfolio/portfolio', 'article'); ?>
    </div>

  <?php endif; ?> <!-- END CONDITIONAL STATEMENTS-->
  <?php endwhile; ?>
  </div> <!-- GRID_ROW -->

<?php wp_reset_postdata(); ?>

<?php
  $big = 999999999; // need an unlikely integer

  echo paginate_links( array(
    'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format'  => '?paged=%#%',
    'current' => max( 1, get_query_var('paged') ),
    'total'   => $portfolio_loop->max_num_pages
  ) );
?>
        
</div>
deleted 28 characters in body
Source Link
  • I understand that WP as of 5.5+ allows arguments within template files: https://make.wordpress.org/core/2020/07/17/passing-arguments-to-template-files-in-wordpress-5-5/ – so when I try passing the variables like so: <?php get_template_part('template-parts/portfolio/portfolio', 'article', $count, $classes, $customClass); ?> it renders everything but the featured imagedoes not work.
  • I have the article element housed in an include template, as it is repurposed so often. Is this the correct/best approach?
  • I understand that WP as of 5.5+ allows arguments within template files: https://make.wordpress.org/core/2020/07/17/passing-arguments-to-template-files-in-wordpress-5-5/ – so when I try passing the variables like so: <?php get_template_part('template-parts/portfolio/portfolio', 'article', $count, $classes, $customClass); ?> it renders everything but the featured image.
  • I have the article element housed in an include template, as it is repurposed so often. Is this the correct/best approach?
added 377 characters in body
Source Link
Loading
added 43 characters in body
Source Link
Loading
added 645 characters in body
Source Link
Loading
deleted 69 characters in body
Source Link
Loading
added 54 characters in body
Source Link
Loading
deleted 34 characters in body
Source Link
Loading
Source Link
Loading