Recently, on yoogozi.com, I wanted to display all of the posts we have, but not the entire text, or even a portion of it. I just wanted to show the featured image and the titles, in a grid format.
This way it is much easier for someone to browse through all of our articles in a condensed way. Scanning is what we need to remember that people are doing on the internet.
So I figured the title of the article, as well as the featured image, in a smaller display, would work.
Here are the steps I took.
How to implement a WordPress Grid using Loopbuddy
Step 1: Get loopbuddy and install it
Loopbuddy is a powerful premium plugin from iThemes that let’s you take over the WordPress loop. You can get it at iThemes.com. (This is not an affiliate link but will soon be!)
You may have to configure your theme to have it work with loopbuddy. The overall codex is here but the specific steps for making it work with a non iThemes theme (if necessary) are here.
Step 2: Create a query
After install, loopbuddy will have several queries already present.
In the admin area, navigate to “Loopbuddy-Query Editor”, duplicate the one named “Archive”, and modify it like so:
- Rename the title to “All Posts” or whatever you’d like
- Choose the number of posts you’d like to display. For a grid like ours, it’s probably best to do something like 20 or 21.
Step 3: Create a layout
In the admin area, navigate to “Loopbuddy-Layout Editor”, duplicate the one named “Single Post”, and modify it like so:
- In the editing area, there are several rows, with each row pertaining to a different portion of the layout of a post. You can see which is which by placing your mouse over the area and seeing what is displayed in the tooltip. We want to put some Post Tags and Special Tags (located on the right of the screen) in the content area, which is the 4th row down.
- Drag and drop a Text tag (located in the Special Tags area). Click on the gear and make the changes shown in the below pic, hitting Save Settings when done. What we’re doing is adding the opening tag of a div that will be at the beginning of our “loop” so we can style the post appropriately.
- Drag and drop a Post Thumbnail tag (located in the Post Tags area) to the right of the Text tag you just added. Click on the gear and modify it to choose the Post Permalink in the Link Display field and choose your image size. You might want to start off with “Large” and then work your way down in size later on. Don’t forget to save your settings.
- Drag and drop a Title tag (located in the Post Tags area) to the right of the Post Thumbnail tag you just added. We are going to pull out the Title of the post and display it. So click on the gear and modify it as shown.
We’re thus adding a custom CSS class to make the title look like what we want. - Drag and drop a Text tag (located in the Special Tags area) to the right of the Title tag. Click on the gear and make the changes shown in the below pic, hitting Save Settings when done. What we’re doing is adding the ending part of some HTML code that will be at the end of our “loop”. The layout should then look something like this:
- Down in the Settings area, gift it a Group Title of whatever you want to call it. And then we’ll want to apply CSS to the group as a whole, so we’ll add a class called “grid_page”. Then add some Pre-Loop HTML to configure the title on the page. Here’s a pic of what it should look like.
- Then click on the “Save Settings” button.
Step 4: Make the page use loopbuddy
Create a page and title it “All Posts”.
Edit the page and scroll down and to the right, you’ll see a section for “Loop Buddy”.
- Enable it by checking the check box
- Select a query of “All Posts”
- Select a layout of “All Posts”.
Step 5: Add some CSS
We’ll want to add the CSS to cover the Page heading (allposts_header), the group CSS class (grid_page to apply to the posts), and the background that will go around each posts (all-posts-background).
Here is all of the CSS we’ll be using with a few comments:
And the final WordPress grid layout, (see the first 3 columns only):
Conclusion
Displaying a WordPress grid for your posts may take a little bit of effort but it certainly makes your user’s happy as they can quickly scan and find what’s relevant.
And the more they can find what’s relevant, the longer they will consume your content and the greater fan they will be of YOU!
