Display Posts On Page In WordPress
Are you looking for a way to display posts on a page in WordPress? Great thinking! Having a dedicated blog page to display posts on your WordPress website makes it easy for your readers to locate your content.
Although, WordPress started as a content management system, primarily to share blog posts and manage content. Now, it has evolved into a full web solution that can be used to build complex web applications.
Thus, many site owners use WordPress to build their company websites and in such cases, a static page is preferred as the homepage of the website. This makes it necessary to have a separate page to display blog posts.
Showing blog posts on a WordPress page can be achieved using WordPress default settings, plugins, or manually adding a theme template.
In this guide, we will share different ways you can display your blog posts on WordPress pages. However, we will first present some explanation of pages and posts, mostly targeted at new WP users. You can skip directly to the Steps to Add Posts To Pages.
Content
- Blog Post vs Page in WordPress
- Why Display Blog Posts On A Page?
- How To Display Your Blog Posts On A WordPress Page
- Conclusion
Blog Post vs Page in WordPress
Oftentimes people mistake one for the other, even though there is a clear difference between a blog post and a WordPress page.
Although technically both are web pages that are used to structure a website. However, their primary function differs. A page is intended as a static element, while a blog post is meant to be interactive.
What is Blog Post?
A blog post is a WordPress page, that is used to share content tailored towards spreading knowledge, creating brand awareness, and reaching new audiences. Blog posts are published regularly and may be numerous on a website.
In a modern WordPress site, blog posts are usually listed on a dedicated blog list page. Also, blog posts can be grouped and filtered based on their categories and tags.
When users subscribe to your site’s newsletter, they usually get a notification each time you publish a new blog post on your website.
Page in WordPress
In WordPress, a page is a static element that forms part of a website. They usually share some core information about the site or business.
About, Contact Us, Privacy Policy, and Our Team are common examples of WordPress pages.
Why Display Blog Post on Page?
Displaying blog posts on a page in WordPress helps boost your sites’ engagement which in turn can help increase your site ranking on search engines. This is so because your users can easily access the blog page, browse through your posts, and spend time on the content that interests them.
More importantly, this frees up your homepage for more important content that helps present your business image. Meaning you can use a static page with catchy/short content that gives people a quick and convincing overview of your site.
If you currently use your homepage in such a way, it is very important that you still give users a means to access your posts. And this is where the blog page comes in.
How to display your blog posts on a WordPress page
Showing blog posts in WordPress is relatively easy. Fortunately, WordPress offers different ways of doing this out of the box. Some of which are straightforward while others require some coding knowledge.
For this guide, we will start with the most beginner-friendly method of displaying blog posts on a page on WordPress before moving to a more technical approach.
Using Default WordPress Settings
By default, WordPress can render all your blog posts on the homepage of your WordPress site. You can simply configure your site in the settings tab to display WordPress posts. Of course, only concern yourself with this method if you want your posts displayed on the homepage.
Firstly, login to your WordPress admin dashboard, then click on ‘Settings > Reading’.
Next, select the “Your latest post” option under the ‘Homepage displays’ settings.
After that, click on save changes.
This is the easiest method of showing posts on your home page in WordPress. However, it becomes ineffective if instead, you require that your homepage displays static content.
Luckily, there are other ways to achieve this. Many WordPress themes have features that make it easy to display your WordPress posts on a page.
Further, you can display your recent posts within posts and pages using the Gutenberg (Block editor) in WordPress.
And if you want to feature posts on your sidebar, you can use the recent posts widget for that purpose.
Using Latest Posts Widget
If you want to display your blog posts on a page using the block editor, then follow the steps below.
Firstly, go to Pages > Add New, then add the title for the page.
After that, click on the ‘add block’ (plus) icon. Then select the widget dropdown and click on ‘latest posts’.
Now, your latest posts will appear on the page. You can select the grid or list layout depending on your preference.
Click on Publish after adding your latest posts to the page.
Using Plugins
Nowadays, there are plugins to do just about anything on a WordPress website. As you may have guessed, there’s also a plugin to display blog posts on a page in WordPress.
Common plugins for this purpose include the ‘Yearly Archives plugin’, ‘Recent Posts Widget Extended plugin’, ‘Display Posts Shortcode plugin’ and ‘Content Views plugin’.
In this guide, we will be using Content Views and Display Posts Shortcode plugin to show posts on a page.
Display Posts using Content Views Plugin
Using this plugin, you can customize how your posts would look on the page. The plugin is mobile responsive, which means your content will align properly regardless of the screen sizes.
In addition, you can create multiple content views. You can use these views on a page using a shortcode or by manually adding them to your theme files.
To get started, install and activate the Content Views plugin on your wordpress site. Here’s a detailed guide on how to install a plugin in WordPress.
Configuring Content Views Plugin
After activating the plugin, click on ‘Content Views > Add New’ to open the post list creation view.
Now, insert the view title. This is important to help you differentiate your views when you have multiple views.
On the filter settings tab, under Content type, select the ‘Post’ option.
Under the Common option, you can limit the number of results that will be displayed. You can also exclude posts by adding their post IDs.
Now, under the Advance option, the plugin lets you choose how to filter the posts. In this case, I chose the ‘Sort by’ and ‘Status’ filter.
Under ‘Sort by’, select the option you wish to use from the dropdown menu. Then choose the Order as seen in the image above.
The filter by status option was selected and in this case, the posts are filtered by ‘published’ status, which is the default option. Other options available include; scheduled, draft, trash etc.
After configuring the filter settings, click on the Display Settings tab.
Here, you can change the layout of the posts by selecting one from the options under the layout section. The default setting is using a Grid layout.
The plugin lets you live preview your changes. Simply toggle the live preview button.
You may simply leave other display parameters as they are and then click on ‘Save’ to add the new content view.
This plugin will present two options you can use to display recent posts on a page. The first one uses the shortcode, while the second requires manually adding the code on your blog template.
We will use the shortcode method in this guide. Simply copy the shortcode highlighted in green.
Adding Content Views Shortcode to a Page
To use the shortcode, click on Pages > Add New (or otherwise, open the page on which you want to display content).
If you are using the old WordPress editor, simply paste the shortcode in the content area and then click on Publish.
However, if you are using the recent block editor, click on the add block icon.
Next, select the widget dropdown and then click on shortcode.
After that, paste the shortcode in the textbox and click on publish.
Now, go to the page you created, you should see your posts displayed as seen in the image below. It may vary depending on how you customized your content views.
How to use the Display posts Shortcode plugin
Another plugin that can be used to display posts on a page is the display post plugin. The plugin was developed by Bill Erickson. It works perfectly out of the box, but can be extended using additional parameters to filter what is displayed.
To start, install and activate the plugin from the WordPress admin dashboard.
After activating the plugin, create a new page under “Pages > Add New”.
Then Add the [display-posts] shortcode to the page content area.
If you are using the old WordPress editor, then simply paste the shortcode on the content area. However, if you are using the recent block editor, then click on the add block icon and select widgets.
After that, click on the shortcode option.
Then paste the shortcode on the block.
Now, publish the page by clicking on Publish.
The shortcode will display all your WordPress blog posts in reverse order.
Customizing Display Posts Shortcode plugin
You can add additional parameters to the shortcode to filter posts based on post author or post category. Edit the shortcode as follows to show only posts in the Technology category.
[display-posts category='technology']
You can add multiple categories to the parameter by separating each category with a comma.
If you want to display a list of posts by a specific author (on their bio page for example), then you can use the display posts shortcode and the author filter. Paste the code below on the content area of the page.
[display-posts author='admin']
Ensure you replace ‘admin’ with the username of the author whose posts you intend to display.
By default, the plugin lists posts in descending order (DESC), however, you can use the order parameter to specify how you want to order the posts.
[display-posts order="ASC"]
You can also order based on post titles using the orderby parameter. This will list the posts in alphabetical order.
[display-posts orderby="title" order="ASC"]
The display posts plugin can also display post excerpts and featured images. This is useful if you want to build a blog list page with the posts summary. Paste the shortcode below on the blog page.
[display-posts include_excerpt="true" image_size="thumbnail"]
The image_size uses WordPress default image sizing, such as medium, large, or thumbnail. While include_excerpt, when set to true, displays a brief snippet of text for each blog post.
Below is a sample of how the page looks when you display featured images.
Display posts on page using a theme template
You can get all the functionality of displaying posts on a page in WordPress using a third-party plugin. However, create a theme template if you want to fully customize how your posts are displayed.
Note that we will be writing codes to create a theme template. If you are not comfortable writing PHP codes, then you can use the shortcode plugin method above. However, we will explain each line of code so beginners can follow along as well.
How to Create a Custom Template in WordPress
A page template defines the format in which contents are displayed on a page. To create a custom template, you will need to connect to your WordPress hosting server via FTP. Learn how to use FTP here.
Side Note: It is recommended to create a child theme for your website before proceeding. The WordPress child theme will ensure you do not lose any custom file and customization when you update your theme.
See this guide to learn how to create a child theme in WordPress. The steps explained below should ideally be done on your child theme.
After connecting your site via FTP, on the right, you will find your remote site files. The next step is to create a custom template.
Creating a Custom Template
Double-click on the directory containing your site file.
In the directory, double click on the wp-content folder.
After that, double click on the themes folder and then navigate to your current theme’s folder.
Now right-click on any file and then select Create new file. In the pop-up window, name the file and use a .php file extension (eg. mytemplate.php).
After that, right-click on the new PHP file and select view/edit.
Next, paste the code below and save the file.
<?php /* Template Name: My New Template */ ?>
This will only create a blank template with no content such as your site header or footer.
You can use any name as your template name. Take note that the name you use will be the identifier of the template on your WordPress dashboard.
The WordPress page.php file provides a starter template with details to fill up basic template details.
On your current theme folder, locate the page.php file.
Now, right click on the file and select view/edit. Next, open the file with your default editor (such as notepad), or with a code editor such as VS Code.
After that, copy the code from the get_header() function through to the end of the file.
Now, open the new template file you created and paste the code you copied from the page.php file.
To access the new WordPress template we just created, Go to Pages > Add New.
After that, click on the template drop-down menu under page attributes, it will display all the custom templates your theme uses.
Scroll down and select the new template you created, you can find it with the name you assigned as the template name on the PHP file.
Structuring the template
In the new theme template file, we can modify the code to display a list of posts using a PHP statement to loop through all published posts.
To get started, copy and paste the code snippet below to the new template file we created above. Usually, the code should be placed below the Get Header function.
<?php
// query to get all published posts
$fx_get_posts = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1));
// the PHP if conditional to check if the query retrieved any post
if ( $fx_get_posts -> have_posts() ) : ?>
<!-- ul php tag to display posts in a list -->
<ul>
<!-- the php while loop -->
<?php while ( $fx_get_posts -> have_posts() ) : $fx_get_posts -> the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
<!-- The end of the loop -->
</ul>
<!-- To restore the posts to global settings -->
<?php wp_reset_postdata();
else : ?><!-- The PHP else block, displayed if no posts was found on the database -->
<p><?php _e( 'There are no posts to display at the moment' ); ?></p>
<?php endif; ?>
The code above contains a loop that displays all posts. First, we use the WP_query() function to query the database and retrieve all published posts.
The first argument passed into the function specifies the post type, the second argument is used to filter only published posts, while the post_per_page argument specifies the number of posts that will be displayed per page. Setting it to -1 will display all the posts on your WordPress blog.
After that, we write a conditional statement to check if any post was found on the database.
If there are posts on the database, we use the PHP while statement to loop through all posts and render the post title and permalink.
However, if there are no posts, then the PHP else statement is executed notifying the user that there are no blog posts at the moment.
Now save the file after pasting the code snippet above.
Next, Login to your WordPress dashboard, then create a new page and select the custom page template we created.
After that, publish the page and visit it from the frontend of your website.
When you view the page on your browser, it will display a list of all published posts.
FAQ – Display Posts on a Page in WordPress
What is the purpose of displaying posts on a specific page in WordPress?
Displaying posts on a specific page in WordPress allows you to better organize your content, making it easier for your visitors to find and navigate through your website. This can improve user experience and keep users engaged with your content.
How can I use the Display Posts Shortcode plugin to show my posts?
After installing and activating the Display Posts Shortcode plugin, you can use the [display-posts] shortcode in your WordPress editor to display posts on any page or post. You can customize the shortcode by adding parameters to filter the posts by categories, tags, post types, and other options.
Can I display posts from specific categories or tags using the Display Posts Shortcode plugin?
Yes, you can use the ‘category’ or ‘tag’ parameter within the [display-posts] shortcode to display posts from specific categories or tags. For example, use [display-posts category=”news”] to show posts from the “news” category.
How do I customize the appearance of the displayed posts?
You can customize the appearance of the displayed posts by using various parameters within the [display-posts] shortcode, such as ‘image_size’, ‘wrapper’, and ‘content’. Additionally, you can use custom CSS to further style the displayed posts to match your website’s design.
Can I use the Query Loop block to display posts in WordPress?
Yes, if you are using the WordPress block editor, you can use the Query Loop block to display posts on your page. This block allows you to create custom queries to show posts based on specific criteria, such as categories, tags, or authors.
Is it possible to display posts in a grid layout using the Display Posts Shortcode plugin?
While the Display Posts Shortcode plugin does not natively support grid layouts, you can achieve a grid layout by using custom CSS along with the ‘wrapper’ and ‘wrapper_class’ parameters in the [display-posts] shortcode.
Can I paginate the displayed posts using the Display Posts Shortcode plugin?
Yes, you can use the ‘posts_per_page’ and ‘pagination’ parameters within the [display-posts] shortcode to limit the number of posts displayed per page and enable pagination. For example, use [display-posts posts_per_page=”10″ pagination=”true”] to show 10 posts per page and add pagination links.
Conclusion – WordPress Display Posts on Page
Displaying your blog posts on a WordPress page is very helpful in terms of improving user experience and making your content easily accessible to your readers.
In this guide, we shared 3 easy to understand methods to help you display your blog posts on a page in WordPress. Also, you learned how to build a theme template, consider that a bonus.
If you enjoyed this article, kindly share it with others.
Recommended Articles
