In this Genesis Grid loop tutorial you will learn how to configure all of the basic settings.
So, what is the Genesis grid loop, what does it look like?
See the image below…
This is the code we will be editing in this Genesis grid loop tutorial. In the StudioPress theme I’m using for this tutorial, the code is in home.php
genesis_grid_loop( array(
'features' => 1,
'feature_image_size' => 0,
'feature_image_class' => 'align none post-image',
'feature_content_limit' => 0,
'grid_image_size' => 'grid',
'grid_image_class' => 'align none post-image',
'grid_content_limit' => 0,
'more' => __( 'Continue reading...', 'genesis' ),
'posts_per_page' => 5,
) );
But before you edit any PHP on your WordPress site or start this Genesis grid loop tutorial, make sure you know how to back up and restore any files you might damage.
If you make a single typo when editing PHP, WordPress could stop working and you may find the only way to fix it is by using FTP. Save yourself a lot of trouble, learn how to back up, repair and restore your site using FTP before you edit any PHP files.
The Genesis grid loop tutorial, lets get started.
These are some of the things we can change using the grid loop settings in home.php.
- Whether or not to show a full blog post, several full blog posts, or just a teaser of the featured blog post at the top of the home page.
- Whether or not to show a featured image for the featured blog posts.
- Change the image size for the posts shown in the grid layout.
- Change the amount of teaser text in the grid layout.
- Change the read more text in the featured post and grid posts. (We do this in two different places.)
- Add new image sizes to our grid and align them left or right.
- Choose how many posts to display in the grid loop.
First we’ll change the number of featured posts that appear at the top of our grid loop home page.
Featured posts use the full width available in your theme. Featured posts display above the smaller grid post layout.
- In your WordPress dashboard choose Appearance > Editor.
- Look to the right hand side of your screen and select home.php.
- In the code, scroll down to find… /** Add support for Genesis Grid Loop **/
- Find ‘features’ => 1,
- change the number 1 to the number of large featured posts you want to see on the home page.
- Click the big blue Update File button.
If you typed the number 3, you will now have three large featured posts at the top of your home page and some smaller teaser posts underneath.
Next we’ll choose to display or not display a featured image.
If you don’t already have a featured image set for the post, edit the post and look in the right hand sidebar for an option that says Set featured image.
Now that your post has a featured image, you can edit the code in the Genesis grid loop.
In your dashboard choose Appearance > Editor > home.php (This is where the grid loop code is in Balance, the theme I’m using in this Genesis grid loop tutorial, your theme could be different .)
Find…
'feature_image_size' => 0,Type 0 to hide the featured image, type 1 to display it…
'feature_image_size' => 0, /** hides featured image */
'feature_image_size' => 1, /** displays featured image */
Setting the content limit.
Next we’ll change the amount of text that displays from the featured post(s). Featured posts appear at the top of the blog page when the grid loop is being used.
Find
'feature_content_limit' => 0,The 0 setting tells WordPress not to limit the featured post content so the full post content is displayed. This includes images, headlines and lists etc.
If your post has a more tag, the post will display up to the more tag. The more tag will override any other settings you make.
If we replace the 0 with a number, that number of characters will appear from each featured post at the top of our site. But all formatting and images will be removed.
'feature_content_limit' => 350,Settings for the grid section.
For the next part of our Genesis grid loop tutorial, we’ll move on to the settings for the posts displayed in the grid that appears below the featured posts.
You can change the size of the images in the grid but you can only use sizes taken from the…
/** Add new image sizes */
section of the functions.php file.
To find what sizes are available, in your WordPress dashboard go to Appearance > Editor. Then look to the right of your screen for Theme Functions (functions.php). Click this link to open the functions.php file in your editor.
Search for some code that looks like this…
/** Add new image sizes */
add_image_size( 'grid', 295, 100, TRUE );
add_image_size( 'portfolio', 300, 200, TRUE );
Just before the numbers you will see the names of the image sizes you can use.
If your grid layout is currently using the grid size, 295, 100 and you want your grid images to be larger, just type the name of the larger image, portfolio, in to your home.php grid loop settings.
'grid_image_size' => 'grid',becomes
'grid_image_size' => 'portfolio',You can only use sizes that have already been set in functions.php.
Make a new image size to use in the grid loop.
If you want to make a new image size to use in your grid loop, just edit the settings in functions.php. Copy one of the image settings already declared and edit it to suit your needs.
/** Add new image sizes */
add_image_size( 'small', 100, 100, TRUE );
add_image_size( 'grid', 295, 100, TRUE );
add_image_size( 'portfolio', 300, 200, TRUE );
I added a new size, 100, 100 to the settings and called it small.
If you add a new image size, use the Regenerate Thumbnails plugin to build the new thumbnail sizes.
To make your small thumbnail align left, in the grid loop code change…
'grid_image_class' => 'align none post-image',To…
'grid_image_class' => 'alignleft post-image',Grid teaser text limit
If you want to choose how many characters appear in the grid teaser section just type a number in this piece of code…
'grid_content_limit' => 0,if I change it to
'grid_content_limit' => 175,then 175 characters will be displayed for each post in the grid.
Grid loop “Continue Reading” text, (More…)
Editing the more text that appears beneath the posts in the grid section.
Just find this line of code in the grid loop section of home.php.
'more' => __( 'Continue reading...', 'genesis' ),and change the text that says Continue reading…
The more text in the large featured posts section is controlled by code in the functions.php file.
In your WordPress dashboard go to Appearance > Editor. Then look to the right of your screen for Theme Functions (functions.php). Click this link to open the functions.php file in your editor. Search for some code that looks like this…
/** Customize 'Read More' text */
add_filter( 'get_the_content_more_link', 'balance_read_more_link' );
add_filter( 'the_content_more_link', 'balance_read_more_link' );
function balance_read_more_link() {
return...
}
After the word return, you’ll see a long line of code. Find and edit the part that says Continue Reading. (PS. I couldn’t include the full code, WordPress kept stripping it out, sorry.)
__( 'Continue Reading' )
Change the text that says Continue Reading.
There are just a couple more steps in our Genesis grid loop tutorial…
Setting the number of posts that you want to appear on each page.
You must do this in Settings > Reading > Blog pages to show at most…
And in home.php grid loop settings
'posts_per_page' => 4,
(On modern themes you can do this just using Settings > Reading, you don’t need the ‘posts_per_page’ => 4, setting in the new grid loop.)
If you have a lot of blog posts, you can choose how many appear at a time on each page of your grid loop, blog post listing.
If you’ve set the grid loop to display one featured post and you set ‘posts_per_page’ => 5, in the grid loop settings in home.php. When someone views your home page, they’ll see one large featured post and beneath this, four teasers linking to four blog posts.
This gives you a nice looking layout on the home page, the grid ends with two nicely aligned teaser posts. But if you set the number of posts to 4 you get an uneven layout.
You can add two featured posts to make the layout look the way you want it to. Or set the number of posts to be ragged on inner pages. It’s up to you.
Wow! That was a hard slog. After such a long grid loop tutorial I think we both deserve a cup of tea and a biscuit, don’t you?