Creating a grid layout on your blog’s homepage makes it easier for people to view more posts at once, and it’s also just visually interesting. Angela and I both have standard blog post setups on our personal blogs, but on TBM we decided to mix things up. Today let’s talk about how to create a grid layout on your WordPress Genesis theme! We always recommend the Genesis Framework because it’s secure, highly customizable, SEO optimized, and great for coders and non-coders alike.
If you don’t want to hire a developer or get your hands into any intense codes, plugins are your best bet for creating a grid layout. I’ve worked with a mix of three plugins, which are all pretty similar but have slightly different features. Here is a little about each plugin and what it will help you accomplish:
Genesis Grid Loop: This plugin makes it very easy to display your posts (or search results, portfolio items, etc) in a grid layout. It lets you add “features” and “teasers”, creating a few different layout options. Genesis Grid Loop doesn’t involve any coding unless you want to go a step further and add extra customizations like hover effects.
Genesis Sandbox Featured Post: If you have a home page that is widgetized (check with your developer or theme creator if you’re not sure), Genesis Sandbox Featured Post is an awesome way to change up the way your posts are displayed. You can put them in columns and rows, define a content limit with a “read more” button, and easily adjust your image sizes. There are several tutorials out there that will help you customize this plugin (I always turn to Sridhar Katakam).
Genesis Featured Posts Combo: This commercial plugin is very similar to Sandbox, but much more advanced. You can choose between many different layouts and even incorporate pagination into your grid. For TBM, we chose this one over Sandbox because its special features worked better for what we were trying to accomplish.
Once you’ve installed one of these plugins, just follow the instructions on the plugin homepage to learn how to set up and customize your grid.
If you feel more experienced with coding or just want to learn more, I’m happy to direct you toward more detailed tutorials on creating grid layouts. Send over an email! :)
Maria Carolina says
Amazing tutorial.
http://www.mcarolina.com.br
Chinmoy Paul says
For grid layouts I shall suggest my latest plugin “Simple Grid Layouts” (http://genesisdeveloper.me/simple-grid-layouts/). User can create a grid page in 5 mins from their dashboard.
Jennifer says
I love it, thank you for sharing!