How to Create Magazine Style Layouts with GeneratePress Theme?

GeneratePress is the lightweight theme you should try if speed is your primary focus. Earlier the theme was focusing too much on speed by not providing lot of features like author box. However, the latest GeneratePress Pro version with GenerateBlocks Pro combination unlocked different possibilities. Creating magazine style layout is one such feature and you can do that without any heavy page builder plugins like Elementor.

Magazine Style Home Page

When you have thousands of blog articles under different categories, then having a magazine style home page will help to showcase the content nicely. However, the speed will get plummeted if you use Elementor, WP Bakery or any other page builder plugins. Though the process is lengthier and complicated with GeneratePress, you will get 100/100 score in Google PageSpeed Insights with the magazine layout like below.

Here are the things you should know before starting:

• You need pro versions of GeneratePress theme as well as GenerateBlocks plugin.
• You can use the available blocks or demos as a starting point to make your task easier.
• Some knowledge about using Query Loop block in WordPress can help to understand the functions like offsetting.

Importing Magazine Demo or Block

GeneratePress offers few magazine style demos in the Site Library section. If you like one of them, simply import the theme and edit the content as per your need.

• Go to “Appearance > GeneratePress > Site Library” section.
• Select demos like Info or Newsroom that comes with magazine/news style layout.

• If the preview is congested in the screen, you can go to GeneratePress demo site to view Info and Newsroom templates.
• Follow the instructions to import theme options or content as per your need.

As you can see the demo site only needs GenerateBlocks plugin and not the pro version. However, you need the pro version for importing magazine style demo blocks. Edit your home or the magazine style page and insert a “Pattern Library” block.

This will open all available pattern blocks and filter “Query Loop” to view all magazine style blocks. Click the block you like to insert it on your page.

Customizing Magazine Style Blocks

Now that you have created a base template and the next step is to customize the inserted blocks or demo template. The block will look like below on your Gutenberg editor, select one of the inserted blocks and go to “Block” tab in the right sidebar to start customizing the setup.

There are numerous customizations options available to change each block as per your need. You can adjust the layout, typography, spacing, colors, backgrounds and effects as per your need. Here we will focus on few important things for the Query Loop block.

Adding Query Loop Offset Parameter

When you check the imported magazine style blocks, you can find it consists of multiple query loop blocks in single container. You can use the “List View” in Gutenberg editor to easily navigate through the blocks. For example, the below block contains two Query Loops used with offset feature to avoid overlapping of articles.

Let’s say, you simply wanted to show the latest posts in the display.

• Select the first Query Loop block and choose “Posts” from the “Select Post Type” dropdown from right sidebar. You can set the “Posts Per Page” as 1 to show only one post in the display.

• Now select the second Query Loop and select the “Posts Per Page” as 5 to show 5 posts. However, this will again show the same first post in the loop. To avoid this, click “Add Parameter” button, select “Offset” option and set its value as 1. This will remove the first post which is already displayed in the first Query Loop block.

You can adjust this offset value in different Query Loop blocks on the page to make sure proper display of articles without repeating.

Setting Post Type and Taxonomies for Query Loop

If you want to showcase custom post types or pages from particular categories, then choose your post type from “Select Post Type” dropdown. You will see all available custom post types in the list for selection. After that, click “Add Parameter” button and select “Taxonomies” option.

Select “Category” and choose the categories you want to showcase. You can include multiple and child categories in the loop.

Filtering Items with Dates

For showcasing posts after or before certain date, click “Add Parameter” and select “After” or “Before” date option. Set your date and time to filter the articles showing in the Query Loop.

As mentioned, you have lots of parameters to include or exclude posts in the loop. Play around with the available options to finish you layout.

Featured Image Source and Link

If you want to make the featured images clickable and linked to the post, then select any image showing in the Query Loop block. Go to “Dynamic Data” section in the right sidebar and select the followings:

• Data Source – Current Post
• Image Source – Featured Image
• Link Source – Single post

Remember, changing single image will affect all the featured images showing in the Query Loop.

Customizing Meta Data

Since the magazine layout generally shows plenty of posts, you need to keep the meta data simple to avoid congestion. You can keep the post date and author to make this simple though there are options to include any meta data. Click on any meta data in the Query Loop block and check under “Dynamic Data” section in the sidebar. Select the “Current Source” as “Post date” and choose published or updated date to show in the loop.

If you want to add author’s name, then duplicate the meta date block and change the “Current Source” to author’s name. You may need to adjust the spacing and font size to fit both date and author’s name in the layout.

Consideration for Caching and Lazy Loading

Heavy commercial themes use AJAX for dynamically loading content which helps to keep the layout updated when you publish new articles. However, this will be a problem with GeneratePress when you use page caching plugins. Since page caching is done by storing the entire page’s content as a static HTML file, dynamic content will not get updated unless you purge the cache of your magazine layout pages.

Plugins like WP Rocket will automatically purge the cache of home page and other related archives whenever you publish an article. So, page caching will not be a problem in this case. However, make sure to check your magazine layout is updated when publishing new content. Otherwise, you should check the caching plugin’s settings and disable page level caching only for magazine layout pages. You can do this on page level meta box offered by your caching plugin.

Since there are no particular image sizes used in the layout, make sure to enable lazy loading of images for your site. Otherwise, you will see warning in Google PageSpeed for using proper image sizes.

Final Words

As mentioned, creating a magazine style layout in GeneratePress is a long process as you need to customize each block and set category filters. However, this is one time task which may need couple of hours. This is the best option for getting good page speed score and if you do not want to use heavy page builder plugins which will affect your entire site. If you only use GenerateBlocks for pages, then you can disable the plugin’s CSS loaded on posts using additional plugins Perfmatters. In this way, you can optimize the speed of entire website.