I have a page set up with six posts per page with two rows of three posts. If I only have one post up, I would like the other five to have “placeholder images” letting the viewers know that more posts are coming. Kind of like this:
![enter image description here](https://i.stack.imgur.com/UMBZB.jpg)
I would create the placeholder images to put in there.
Here is how my blog is set up. Pretty basic. Has anybody ever done anything like this before?
<div id="article-list">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-info">
<?php the_title( sprintf( '<h1 class="entry-title"><a href="https://wordpress.stackexchange.com/questions/161266/%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>
<?php mobile_mix_posted_on(); ?>
</div>
<?php if ( '' != get_the_post_thumbnail() ) {
the_post_thumbnail();
} ?>
</article><!-- #post-## -->
<?php endwhile; ?>
<?php mobile_mix_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
</div>
You can add a filter to 'loop_start'
, count how may posts you have and inject the needed number of “fake” posts that are intances of WP_Post
not having a reference in DB.
add_filter( 'loop_start', function( $query ) {
$module = $query->post_count % 6;
$to_fill = $module === 0 ? 0 : 6 - $module ;
if (
(int) $query->post_count === 0
|| (int) $to_fill === 0
|| ! $query->is_main_query()
|| $query->is_singular()
// probably you need to put other conditions here e.g. $query->is_front_page()
// to affect only specific pages and not all...
) {
return;
}
$query->post_count += $to_fill;
$query->found_posts += $to_fill;
$fake = clone $query->posts[0];
$fake->post_title="Coming Soon";
$fake->post_name="coming-soon";
$fake->is_fake = TRUE;
$fake->ID = 0;
$fake_posts = array_fill( 0, $to_fill, $fake );
$query->posts = array_merge( $query->posts, $fake_posts );
} );
Edit: avoid template editing
Now we have to prevent fake posts to have a permalink
add_filter( 'the_permalink', function( $permalink ) {
if ( isset($GLOBALS['post']->is_fake) ) {
return '#';
}
return $permalink;
} );
And use coming soon image as post thumbnail:
add_filter( 'get_post_metadata', function( $check, $pid, $key ) {
global $post;
if ( $key === '_thumbnail_id' && empty($pid) && isset( $post->is_fake ) ) {
$check = 1; // just a non falsey number to pass has_thumbnail check
}
return $check;
}, PHP_INT_MAX, 3 );
add_filter( 'post_thumbnail_html', function( $html, $pid ) {
global $post;
if ( empty($pid) && isset( $post->is_fake ) ) {
$html="<img src="https://example.com/path/to/coming-soon.png" alt="coming Soon" />";
}
return $html;
}, PHP_INT_MAX, 2 );