Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

Multiple Grid Loops on Home Page – Genesis Framework

So after messing around for hours trying to figure out how to place multiple grid loops on one page, I’ve got it!

I scoured the forums and tutorials on the studio press site but unfortunately, there really isn’t too much detail if you are a novice in developing with Genesis and WordPress.  But I managed to figure something out so… here we go!

Add this to your functions.php file:

[code]
add_action( ‘genesis_before_loop’, ‘child_maybe_do_grid_loop’ );
function child_maybe_do_grid_loop() {

// Amend this conditional to pick where this grid looping occurs
if ( is_home() ) {

// Remove the standard loop
remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );

// Use the prepared grid loop
add_action( ‘genesis_loop’, ‘child_grid_loop’ );

}
}
[/code]

So here’s what’s happening (or at least what I think is happening). The child_maybe_do_grid_loop function is being called BEFORE the loop is actually called. In that function we are saying IF you are on the home page – more on conditional tags here – then get rid of the original loop and add the new loop called ‘child_grid_loop’.

Here’s the code for the new grid loop.

[code]
function child_grid_loop() {

$grid_args = array(
‘features’ => 0,
‘feature_image_size’ => 0,
‘feature_image_class’ => ‘alignleft post-image’,
‘feature_content_limit’ => 0,
‘grid_image_size’ => ‘grid-thumbnail’,
‘grid_image_class’ => ‘alignleft post-image’,
‘grid_content_limit’ => 0,
‘more’ => __( ‘Continue reading →’, ‘genesis’ ),
‘posts_per_page’ => 6
);

genesis_grid_loop( $grid_args );
}
[/code]

This is taken directly from studiopress.

Now here’s the tricky part, I wanted to add more than one loop. If you add this code directly to home.php and change the function name, it doesn’t work! Plus I wanted to add a different layout to my homepage so I couldn’t use the standard tutorials provided by Studiopress because they end the file in genesis() which doesn’t let me change the layout.

So I added the following code to my functions.php file.

[code]
function child_grid_loop_cat() {
$grid_args = array(
‘features’ => 0,
‘feature_image_size’ => 0,
‘feature_image_class’ => ‘alignleft post-image’,
‘feature_content_limit’ => 0,
‘grid_image_size’ => ‘grid-thumbnail’,
‘grid_image_class’ => ‘alignleft post-image’,
‘grid_content_limit’ => 0,
‘more’ => __( ‘Continue reading →’, ‘genesis’ ),
‘cat’ => 5,
‘posts_per_page’ => 6
);

genesis_grid_loop( $grid_args );
}

function child_grid_loop_cat_six() {
$grid_args = array(
‘features’ => 0,
‘feature_image_size’ => 0,
‘feature_image_class’ => ‘alignleft post-image’,
‘feature_content_limit’ => 0,
‘grid_image_size’ => ‘grid-thumbnail’,
‘grid_image_class’ => ‘alignleft post-image’,
‘grid_content_limit’ => 0,
‘more’ => __( ‘Continue reading →’, ‘genesis’ ),
‘cat’ => 6,
‘posts_per_page’ => 6
);

genesis_grid_loop( $grid_args );
}
[/code]

Same Grid code, but notice the different function names. Plus the addition of the categories.  Now I have 3 different grid loops in my functions file.

Create the page home.php.  Here the sample homepage content I created:

[code highlight=”4,8,12″]

<!–?php get_header(); ?–>
<div style="padding: 20px;"><!–?php dynamic_sidebar(‘Top’); ?–></div>
<div><!–?php child_grid_loop(); ?–></div>
<div style="padding: 20px;"><!–?php dynamic_sidebar(‘Top2’); ?–></div>
<div><!–?php child_grid_loop_cat(); ?–></div>
<div style="padding: 20px;"><!–?php dynamic_sidebar(‘Top3’); ?–></div>
<div><!–?php child_grid_loop_cat_six(); ?–></div>
<div style="padding: 20px;"><!–?php dynamic_sidebar(‘Top4’); ?–></div>
<!–?php get_footer(); ?–>

[/code]

The SideBars and padding on the divs were just for organization purposes. But TADAAA!!!!!! It worked.  Here’s the sample page.

Now I can style my page however I want, add the loops, and my homepage is complete!!

I’m sure that there are probably other more efficient ways to do this but I know this one works.

If anyone knows of a different way or has questions, please comment!!

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top