Auto-populate Grid for Blog Pages within “The Loop” (advanced)

If you want to use Essential Grid for the Blog, Category, Archive, Tags, Author, Search pages of your theme, the following code snippet can be added to your corresponding theme files.

This example is for adding the custom code inside The Loop. for an “outside The Loop” example, Click Here

First you need to find the theme folder holding the template files needed. The following process works with every theme template file using the WordPress loop. We will be using the loop because this way manual post ordering, number of posts per page, sticky post positioning, all query data, filter/actions on post, etc. keep intact.

So you could use it on the following files (find out more about the hierarchy here):

  • index.php
  • home.php
  • category.php
  • archive.php
  • author.php
  • archive-(postype).php
  • taxonomy.php
  • date.php
  • tag.php
  • search.php

Now you need to locate the loop inside the chosen file. The loop starts with the following line:

while ( have_posts() ) : the_post();

Please place the declaration of our post array before this line so that it is reading:

$my_post_array = array();
while ( have_posts() ) : the_post();

Now look for the end of the loop’s “endwhile;” and exchange all code in between with this single line:

$my_post_array[] = $post->ID;

This single line will populate the array with all queried post IDs.

Next step is to copy the shortcode of your prefered Essential Post Grid right after the loops end, put in the post array and echo it out with executing the shortcode before:

echo do_shortcode('');

Here is the example source embeded into the index.php of the “Twenty Fifteen” standard theme:

* The main template file
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* e.g., it puts together the home page when no home.php file exists.
* Learn more: {@link}
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<?php if ( is_home() && ! is_front_page() ) : ?>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
<?php endif; ?>
// Start the loop.
$my_post_array = array();
while ( have_posts() ) : the_post();
* populate array with all queried post IDs
$my_post_array[] = $post->ID;
// End the loop.
echo do_shortcode( '' );
// Previous/next page navigation.
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );
// If no content, include the "No posts found" template.
else :
get_template_part( 'content', 'none' );
</main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?> 

Remember to coordinate the WordPress “Post per Page” setting with the pagination setting of Essential Grid.

If you want to use the Essential Grid included pagination only please set the “Post per Page” in the Reading Settings to an abnormal huge number like 99999. This will make the theme’s default pagination disappear.

If you want to change the number of posts per page depending on the post type or other conditionals you can use the pre_get_posts filter:

Auto-populate Grid for Blog Pages within “The Loop” (advanced)

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author


Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!