The code in this download folder enables you to turn the query loop block of posts into a tiled grid. The grid includes 4 posts in each section like this :
Regardless of how many posts per page you set, the code will display them as seen above on 1 page or when the next page link is clicked.
Features
The code :
- Targets sets of 4 posts so each set of 4 in the loop are displayed in a tiled grid.
- Overlays the title and date on each post image.
- Includes media queries to display the grid in 1 column on smaller screens. Default is set to 960px in the CSS which you can easily modify.
- Only affects the query loop block on 1 page based on the post/page id you use in the PHP code.
You can use the default Query Loop block settings to style any element without the need to edit or add custom CSS rules.
Insert Query Loop Block
There’s several steps you’ll need to take to insert the correct block.
- Click the + sign to insert a new block
- Search for query loop and click on it
- Once the query loop block is inserted into your page, click Start Blank
- Then click Image, Date, Title
Here’s the screenshots showing you which way to go.
The code in the download folder only supports the Image, Date, Title variation otherwise you’ll need to modify the CSS to position other post elements correctly over the featured image.
Code Installation
There’s 3 steps :
- You’ll need to edit the PHP code and swap out the page id on line 11 with the ID of the page where you want to insert the query loop block.
- Then you can copy & paste the PHP code to the end of your child themes functions file or code snippets/plugin.
- Copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear server and browser caching.
Leave a Reply