Blog posts page display all the blog posts on your WordPress website on a page regardless of their category, type, published date or author. Have you ever seen websites that are basically just blog posts and articles? Well, that’s essentially a blog posts page serving as the homepage for the said websites. These types of websites are most apparent with websites exclusively displaying news related content. Apart from that, post list pages are usually what you see when you go to the blogs or news page of most websites. So, how can you create one of these for your own website?
Setup Blog Posts Page in WordPress
If you wanted to setup a blog page, you could simply create page in WordPress.
- Go to your website’s admin dashboard and select “Pages > Add New”.
- Enter a title for the page. In most websites as mentioned previously, this page will be named as “Blogs” or “News”, you can use anything you like.
- Make sure there are no content in the page and publish the empty page.
- Now, go to “Settings > Writing” section in your WordPress admin panel and select the empty page as you “Posts page”.
- Save your settings.
You can customize the number of posts appear on the posts page and whether to show the summary or full content for each post.
The posts list page designed is controlled through your theme and you can also use page builder plugins to create a custom looking posts page you’re your site. Now that you may wonder, when this is a default options why there is a separate Query Loop block available in Gutenberg editor.
WordPress released a really cool new feature in 5.8 version, the Query Loop block. Unlike a blog posts page, you have customization options to adjust the display and various other features with query loop block. In essence, you can use the query loop block to easily create a post list page filled with all your posts laid out as per your specific preferences in terms of the design, alignment, and structure.
Query loop is basically a nested block contains, post title, post content, post featured image, etc. and works exactly like “Posts List” block. With plenty of block patterns integrated into this new block editor, you can easily create a portfolio page, or a page full of your favorite posts, without any third-party plugins. With this guide, we will walk you through all the steps involved in setting up a posts page and using the query loop block to populate the page with the blog posts on your WordPress site.
For the purposes of this exercise, we recommend that you already have at least a few posts on your website before you create your post list page. Also, make sure you are using Gutenberg block editor and not the old Classic editor.
- Click on the (+) Add Block inserter and select the Query Loop block as shown in the image below. To find the Query Loop block, you’ll have to click on Browse all, and then scroll over to the Theme section of the Block inserter. Alternatively, you can type “/query loop” in a new paragraph block to do the same thing.
Upon adding the query loop block into your page, by default, the block will populate your page with the latest post. However, for the purpose of creating a posts page, you can change the number of posts to display. The Query Loop block editor will offer you various layout options in the form of block patterns to choose and customize with. The different layout options can be viewed in the form of a carousel or a grid format.
Choose one between the two view formats, carousel, or grid, based on the design view that you prefer at the top of the loop block in your post list page. You’ll have to use the Choose button if you decide to go with the carousel view or select one of the available options if the grid form is your viewing format of choice.
The Query Loop patterns provided by WordPress by default are:
- Image at left
- Small image and title
- Large Title
For demonstration purposes, we’ve decided to use the Standard design pattern shown below with the carousel view format. Conversely, you can also choose to start from Blank, and choose one of the four variations that fits your specific needs, and customize further from there.
As mentioned before, the query loop is composed of nested blocks which can be rearranged, added to, aligned, and so on. The good thing is when you customize and make changes to one block, the same will be applied to all blocks of the same type. As shown in the screenshot below, you can use the top toolbar to make the following modifications to your post blocks:
- Width: Alter the width of the various elements in the Query Loop block. From the top toolbar, you’ll be able to make the posts full width or wide width. The wide width option will extend the block beyond the content size while the full width option will extend the Query Loop block to cover the entire width of your screen.
- Alignment: Change the alignment of the various elements in the Query Loop block. You have the option of choosing your alignment settings ranging from the left to center to the right-hand side of the page.
- Arrangement: You can rearrange the elements of the Query Loop block as you want by using the movers as shown below.
- Colors: You can apply various kinds of color options through the Block settings options of the block that you’ve selected.
- Add Blocks: You can also add new elements to your blocks such as post authors or excerpts if you would like to do so.
In the toolbar of the Query Loop block, you’ll find the Display Settings button, which when clicked opens a popup that will allow you to choose how many posts to show.
- Items per page: Number of posts to display within the Query Loop block
- Offset: Number of posts that you want to skip over
- Max page to show: Limits how many posts you want to show
Choose the number of posts that you want to show in your posts list page. It is recommended that post list pages display all the posts on the website. With that said, they may not be on the same page and can be displayed across several pages using pagination.
On the Query Block toolbar, you can also toggle between List View or Grid View if you want to display your posts in stacked list format or as grids, one next to the other, respectively.
By using the specific features and modifiers in the Query Loop block editor, you’ll be able to make changes to the color settings, apply post specific filters, as well as change the post order in your post list page. If in case you do not see the block editor, click on the “cog” icon next to the publish button to open the editor sidebar on the right-hand side of your screen.
- The color options on the Query Loop block editor will impact the entire Query block, but you can also customize individual elements within the block by specifically selecting them and making applicable changes through their editor sidebar. The Query Loop block editor provides the following color customizations options within the block:
- Text color: Allows you to make color changes to the text contained inside the Query loop. Here, you have the option to choose one of the preset colors from the menu, pick a custom color from the palette, or add a specific color code of your choice.
- Background color: This will impact the color of the overall background of the block. Here, you can either choose a preset color, pick a custom color, add a specific color code, or use a gradient color option as well. You can see how the use of a gradient color option has impacted the query block in the screenshot provided below.
- Link color: This color option controls the colors of any links in any of the posts present in the query block. This option has the exact same color variations like the text color option.
- On the Query Loop block editor sidebar, you’ll run into the Inherit query from the template option. This option can be toggled on and off, depending on whether you want to customize the query that loop is built on. If you toggle it on, certain customization options will be hidden, but, if you toggle it off, more customization options will appear such as:
- Columns: This will be a drag bar that will allow you to select the number of columns that you want to display your posts in. This option will only appear if the grid view is selected as opposed to the list view.
- Order by: You’ll be able to order the posts in post list page on any one of the following criteria:
- Newest to Oldest, this is the default order option
- Oldest to Newest
- Alphabetical, A to Z
- Alphabetical, Z to A
- Sticky posts: By using this option, blog posts can be placed at the top of the front page of the posts, keeping it there until a newer sticky post is published. You can either include, exclude, or display only sticky posts.
- You’ll also find the Filter option in the Query Loop block editor sidebar, an option that will help you to customize further in regard to what posts are being shown. This option will be invisible if you toggle on the Inherit query from the template option. To create a filter for displaying posts on your post list page, you can play around with the following options.
- Categories: You’ll have to list any categories of posts you want to include. Please keep in mind that you will have to assign your posts into distinct categories for this filter to work.
- Author: You can use this filter if you would like to only display blogs written by a specific author in your index page.
- Keyword: If you want to filter posts based on any keywords that the posts may include, then use this filter option.
- Finally, you’ll also find the Advanced Settings option which will allow you to add custom CSS class using which you can customize the block style as per your specific preferences. You can also assign an HTML element if you would like. However, if you don’t have a background of front-end web development, we would recommend you leave this option as it is and use the other block customization options to style your Query loop block.
And there you have it! You can use the different options mentioned above in the Query Loop block to create a posts page to list out the different posts on your WordPress site and customize them as you see fit. If required, you can assign the posts page as your blog or use as a separate blog with specific parameters.