How to show static placeholder when less post elements in archive page?

by

I’m doing an archive page for a theme that will contain only images thumbnails. The maximum amount of thumbnails that the page layout can contains is 12. So as query I would like to been able to get two different results.

If there is 12 thumbnails, show them all.

If there is less than that maximum, fill the rest with the amount of placeholder that you need to bring the result to 12.

Here my first draft:

 <?php 

    $count = 1;
    query_posts( 'posts_per_page=12&order=ASC' );

    if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="archive-post-single">
            <?php if ( has_post_thumbnail() ) { 
            ?>


            <a href="https://wordpress.stackexchange.com/questions/36051/<?php echo get_permalink(); ?>"><?php the_post_thumbnail(); ?></a>


            <?php

            }

            ?>  

        </div>


        <?php $count++;
      endwhile; endif; ?>

    <?php if ($count < 12) { ?>

<div class="archive-post-single">
<img src="<?php bloginfo('template_directory'); ?>/images/thumb.png" alt="" />
</div>
<?php } ?>
    </div>  

        <?php wp_reset_query(); ?>

3 Answers
3

There are two kinds of loops in PHP:

  • With a unknown amount of elements ( while(), foreach(), do() while, etc)
  • With a specific number of elements (for() )

You need a loop with a specific number of elements (in this case 12 elements). So a while loop is not what you need. At first take a look at the loop which is normaly used in WordPress

$posts = new WP_Query( 'numberposts=12' );
echo '<ol>';

while( $posts->have_posts() ) {
  $posts->the_post();
    $title = get_the_title();
    echo '<li>' . $title . '</li>';
}

echo '</ol>';

This loop display posts as long as there are any posts left. If there are only five posts, only five posts will be displayed.

Let assume you have only five posts, but want to display 12 list elements. Let start with a loop which will create 12 list elements.

echo '<ol>';
for( $number = 0; $number < 12; $number++ ) {
  // create list element
}
echo '</ol>';

Now we need a switch inside our loop to decide if there is another post to display or not. If there is another post, display the post title. If not, display something else like a placeholder.

echo '<ol>';
  for( $number = 0; $number < 12; $number++ ) {

   if( $number < $post_count ) {
     // display post
   } else {
     //display placeholder
   }

echo '</ol>';

As long as the number of the current loop item is smaller as the amount of all posts, display a post, else display the placeholder.

Now we just need the number of posts. This is quiet easy: $post_count = $posts->post_count;

$posts = new WP_Query( 'numberposts=12' );
$post_count = $posts->post_count;

    echo '<ol>';

    for( $number = 0; $number < 12; $number++ ) {

      if( $number < $post_count ) {
        // display the post
        $posts->the_post();
        $title = get_the_title();
        echo '<li>' . $title . '</li>';

      } else {
        //display the placeholder
        echo '<li>No more posts</li>';

      }
    }

    echo '</ol>';

I hope this will help and clarify the difference between a while-loop and a for-loop.

Leave a Comment