How to Display All Your WordPress Posts on One Page
Apart from producing engaging and insightful content, WordPress bloggers have to constantly work on retaining their readers. One way to do it is by making pages that contain all your posts, with the latest ones on top or with your posts arranged in a specific order. By doing so you are ensuring that your readers, after finishing an article they enjoyed, can find additional relevant content. The benefits are quite clear – your posts will have more views, giving you greater reach and the possibility to achieve a bigger revenue from ads and affiliate links.
Displaying your posts in a grid layout can be a good call from the UX standpoint, as grid layouts make your pages appear tidy, neat and organized. Another thing you can consider for your post pages is the “Load more posts” button, which is ideal for blogs with a lot of content. Displaying them all on one page would be a mess, so the button visitors can click to see another batch of posts is a great UX fix.
That being said, it’s important to understand that not all websites and not all blogs can benefit from having all the posts displayed on a single page. For big blogs with a long track record and hundreds or even thousands of posts, this can’t possibly be a good idea. In such situations, it’s much better to provide access to the blog archive via a sidebar shortcode, for instance.
In any case, we’re here today to show you how to display all your WordPress posts on one page, so let’s get down to it.
Showing all posts on one page
There are various methods you can use to display posts on page in WordPress. We will show some of the ways we found most useful. You should try all our suggestions until you find the one best suited to your needs. Therefore, if you’d like to skip ahead to a particular method, in this article we’ll cover the following ways for creating a WordPress blog page:
One of the default WordPress functionalities is to show your latest posts on your homepage. However, users often want to differentiate between their homepage and the page that contains the posts. This can be easily set as it is one of the default WordPress options, located in the Settings section.
A prerequisite for this method is having a blank page (without previous content), which will serve to show all your posts. If you don’t have such a page, create it by navigating to Pages > Add New. Add an appropriate name to the page (e.g. Blog), and press the Publish button.
When you’ve created the page, navigate to Settings > Reading. Under Your homepage displays choose the option for A static page. This will enable you to select one page as your homepage and another page as your Posts page. The latter option is what we are interested in. You’re going to use the blank page you created earlier and set it as your Posts page by finding and selecting it from the dropdown menu. Then, press the Save Changes button below.
This will show all the WordPress posts on that one page, and they will be stylized based on the theme you are using. An additional setting you should be aware of is the Blog pages show at most option, which can be seen on the screenshot above. Its default value is set to 10, meaning it will show up to 10 posts on a single page. Therefore, if your website has more than 10 posts, your newly created WordPress blog page will have a pagination feature near the bottom, letting readers see how many pages of content there are in your blog.
However, if you don’t want to have the pagination feature and want to show all posts on your WordPress blog page instead, you can do that. Simply insert a number that is greater than your current number of posts on the website. But, take into consideration that this has two serious drawbacks. A large number of posts will increase the time your blog page takes to load, as well as make the page very long and difficult to scroll across.
After you adjust the number of posts that will be shown per page, you are done. The only thing that remains is to check your Posts page. Depending on the theme you’re using, it might look like the screenshot given below.
However, if you realize you don’t find the design of your Posts page appealing, we advise unselecting the page you choose as your Posts page and trying some of our other suggestions below.
If you don’t want to use the WordPress Posts page functionality or don’t like its design, you should see if the theme you are using has a page template that fits your needs. Themes will often include blog-related page templates, so you should investigate if this is also the case with the theme you are currently using.
Checking this is easy. You only need to click to edit a page and then locate the Page Attributes section on the right side of the screen. When you click on the dropdown next to the Template: option, you will see the list of page templates available within your theme. Look for templates that contain the word Blog. In case you find there are multiple templates available, make sure to examine them all, to find the one that’s most appealing to you. You can do that simply by selecting a template and pressing the Update button to update the page.
Afterward, check the page which will contain all your WordPress posts. Depending on the theme you’re using, it might look similar to our screenshot below.
Repeat the same process for all your theme’s available blog-related page templates until you find the one you like. If, however, your theme doesn’t have relevant page templates or you aren’t satisfied with the look of the page templates you checked, try one of our other suggestions.
One of the greatest advantages of WordPress is the plethora of plugins it has developed for almost any purpose. Therefore, to solve a problem or add a feature, you will often need to investigate and test certain plugins.
Firstly, look whether the plugins you already have active on your site contain an option or a shortcode that could help show all your WordPress posts on a single page. This process greatly differs based on the plugins you are using, so we can’t provide you with any universal instructions on the matter. If you weren’t able to find a suitable option or shortcode, explore the available WordPress plugins.
Displaying your posts in Elementor using a plugin
If you’re an Elementor user, you may want to check out Qi Addons for Elementor, the largest collection of widgets for various purposes. One of them is the Blog List widget, a handy little tool for organizing your blog posts into lists and displaying them on your page.
After you install and activate the plugin, simply select the Blog List element from the menu, add it anywhere you see fit, and customize it as per your liking.
Note that with this plugin you can also use any of the other 150+ widgets that come with it, not just the Blog List. It comes with extensive typography and blogging options, as well as showcase addons, SEO and business elements and much more.
Displaying your posts in Gutenberg using a plugin
For those who prefer Gutenberg, we have a similarly useful and stylish solution. Qi Blocks for Gutenberg is a collection of 80+ exclusive Gutenberg blocks, and the one you will need for the topic of this article is Blog List. After installing the plugin (which comes in a free and premium version, and the Blog List block among the free ones) you will get a selection of blocks to complement your default Gutenberg ones. Add the Blog List to your page and proceed to style it using the intuitive and beginner-friendly block options.
The block allows you to set images, publication dates, categories, author info and much more. You can change the colors, fonts, add or remove buttons and labels and much more.
Displaying your posts using WP Show Posts
If none of the above options suit you (which we doubt), you can give WP Show Posts a shot. This plugin works by creating a shortcode you can post anywhere you want to display your blog posts. You can set the title, pick a taxonomy to show, set pagination and change the number of posts per page.
You can go through the remaining option tabs to adjust the options that will be relevant to you. Among others, these tabs include options regarding the number of columns and the space between the columns, whether the post should contain its featured image, as well as the alignment and location of that image. There are options regarding the length of the excerpt, the possibility of renaming the Read more button, the choice to add relevant metadata (author, date, category), as well as to exclude some posts (by ID or author) and adjusting the ordering rules.
Carefully examine and adjust these options. When you’re done, press the Publish button in the right section of the screen. Then, copy the shortcode from the Usage section on the right.
You need to paste this shortcode inside your page. Depending on which page builder you are using, this process can vary. In Gutenberg, you will use the Shortcode block. In Elementor, you will need the Text Editor element, and in WPBakery use the Text Block element.
After inserting the shortcode using your preferred page builder, check the page. Depending on your chosen design and options set in the plugin, your page might look similar to our screenshot.
If you have already tried our previous suggestions but didn’t like the resulting page, then the best way for you is to use code to create your WordPress blog page. However, we don’t advise this to any newer WordPress users, as it requires significant coding knowledge, as well as the use of FTP. But if you do decide to try this method, we highly advise you to backup your website before attempting to make a custom template. Keep in mind any coding error can break your site.
The first step to creating a custom page template is creating a new file at the proper location and naming it adequately. To do so, connect to your server using your FTP credentials and navigate to your root WordPress directory. Then, navigate to the directory of the theme you are currently using, i.e. the /wp-content/themes/theme-name/ directory. Right-click within that directory while making sure not to click on any of the files of subfolders found there. Then, click on the Create new file option from the menu that appears.
The file name should be written lowercase, with a .php extension at the end. In the case of multiple words, instead of spaces, use a hyphen (-) between the words. Meaning, name the file in the following format: your-file-name.php, after which you should press the Ok button.
This will create an empty .php file where you need to add appropriate code for your page template.
To create a page template that shows all posts, you only need to implement the WordPress Loop. As coding a page template from scratch can be quite challenging, you can always use the code from the page.php file of your theme as a baseline, and then adjust it according to your needs. Additionally, you can also use the page template we created for this article.
<?php
/*
Template Name: Blog posts template
*/
$blog_posts = new WP_Query( array( 'post_type' => 'post', 'post_status’' => 'publish', 'posts_per_page' => -1 ) );
get_header();
?>
<div class = "page-container">
<div class = "main-content">
<?php if ( $blog_posts->have_posts() ) : ?>
<div class = "blog-posts">
<?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>
<article id = "post-<?php the_ID(); ?>">
<a href = "<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( get_the_ID(), 'full' );
} ?>
<h2 class = "post-title"><?php the_title(); ?></h2>
</a>
<div class = "post-category">
<?php the_category(', '); ?>
</div>
<div class = "post-excerpt">
<?php wp_kses_post( the_excerpt() ) ?>
</div>
<span class = "post-read-more">
<a itemprop = "url" href = "<?php the_permalink(); ?>" target = "_blank">
<?php echo esc_html__( 'Read more', 'theme-domain' ) ?>
</a>
</span>
</article>
<?php endwhile; ?>
</div>
<?php else: ?>
<p class = "no-blog-posts">
<?php esc_html_e('Sorry, no posts matched your criteria.', 'theme-domain'); ?>
</p>
<?php endif;
wp_reset_postdata(); ?>
</div>
<div class = "sidebar-content">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
As this code may seem intimidating to less experienced WordPress users, we will try to carefully explain it.
Firstly, by starting the file with a comment stating the template name we are making sure that it is a global template that can be chosen from the dashboard using the Page Attributes section on any page. Simply pick the template with that exact name. As such, make sure to add a clear name that you’ll recognize later.
/* Template Name: Blog posts template */
As for the get_header() and get_footer() functions at the beginning and the end of the code, they serve to include the header and footer template of your theme on your template page. Which brings us to the main section of the code.
By using the following code:
$blog_posts = new WP_Query( array( 'post_type' => 'post', 'post_status’' => 'publish', 'posts_per_page' => -1 ) );
we are simply storing the data on all of our published posts in the $blog_posts variable. We have done so by using the WP_Query class. In case you aren’t familiar with this class, we highly recommend that you study the link we included and pay special attention to the parameters it accepts.
Now, let us break down the remaining code step by step. Firstly, looking at the code structure, you can see that the page has two sections. Those are the main content and the sidebar, with a div that wraps both sections. We have added custom classes to the corresponding HTML elements as it will help with the CSS customization, should we need it at the end. As for the sidebar, it will show the widgets within the default widget area called Sidebar, which you can find and edit in Appearance > Widgets. This is achieved using the get_sidebar() function.
<div class = "page-container"> <div class = "main-content"> // Main content code goes here </div> <div class = "sidebar-content"> <?php get_sidebar(); ?> </div> </div>
Let us delve deeper into the code that is contained within the main content (section whose class is main-content). It can also be simplified and looked at in the manner given below.
<?php if ( $blog_posts->have_posts() ) : ?>
<div class = "blog-posts">
<?php while ( $blog_posts->have_posts() ) : $blog_posts->the_post(); ?>
<!-- Loop content goes here -->
<?php endwhile; ?>
</div>
<?php else: ?>
<p class = "no-blog-posts">
<?php esc_html_e('Sorry, no posts matched your criteria.', 'theme-domain'); ?>
</p>
<?php endif;
wp_reset_postdata(); ?>
This is, in fact, the aforementioned WordPress Loop. Simply put, if there are posts within the $blog_posts variable, the first section of the code will be executed. Otherwise, a paragraph stating “Sorry, no posts matched your criteria” will be shown. And, in the end, we are restoring the global $post to the post in the main query.
As for the first code section, it contains a div with the custom class “blog-posts” whose content is generated based on the current post in the inner while loop.
To conclude the elaboration of our template code, we’re going to touch upon that last part of the inner content.
Using the WordPress loop within our custom page template, we can create a separate article section for every blog post on our site. That article section contains a link, categories, excerpt, and a Read more button corresponding to every particular post. The link is wrapped around two items—the featured image of the post and its title. However, if the post doesn’t have a featured image, then only the title is shown.
<article id = "post-<?php the_ID(); ?>">
<a href = "<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( get_the_ID(), 'full' );
} ?>
<h2 class = "post-title"><?php the_title(); ?></h2>
</a>
<div class = "post-category">
<?php the_category(', '); ?>
</div>
<div class = "post-excerpt">
<?php wp_kses_post( the_excerpt() ) ?>
</div>
<span class = "post-read-more">
<a itemprop = "url" href = "<?php the_permalink(); ?>" target = "_blank">
<?php echo esc_html__( 'Read more', 'theme-domain' ) ?>
</a>
</span>
</article>
We hope you’ll find the template that we included in the article is much clearer now that we explained it following a “top-down” view. You can adjust the code to your needs, by adding, removing, or interchanging different parts of it.
After you are done with your editing, you can insert the code in the file you previously created. This is also done via FTP. Right-click the file you previously created and select the View/Edit option.
Open the file using any text editor and insert the code you created. Afterward, save the changes and upload the file back to the server, thus overriding the current, empty, one.
After you finish creating the template, you will need to check how the content generated by this template looks on the website. To do so, create a new page on your website and assign your custom page template to it using the Page Attributes section on the right. Then, examine the page frontend. Even though it will be functional, you will most likely need to create additional CSS to tailor the display. You can add custom CSS in Appearance > Customize > Additional CSS or even enqueue it using the wp_enqueue_style function.
Here’s how the template for the WordPress blog page we included looks with a little bit of additional CSS.
New Themes
VIEW COLLECTION
Ettore
Fashion Store and Menswear WooCommerce Theme
Fidalgo
Restaurant WordPress Theme
ToddlerPlay
Children and Kindergarten WordPress Theme
Final thoughts
Providing your readers with easy access to your posts can have many benefits. From generating value so people can connect to you or your brand to boosting your SEO ranking, or anything in-between. And you can achieve this by creating a page showing all your posts so users get their pick of content and you can organize your site better. Then you can explore displaying your most popular posts first or try showing random posts to pique your readers’ interest. We invite you to try using any of the methods we outlined in the article and see how each can contribute to your WordPress website. Finally, make sure to bookmark this article, as it will surely be helpful for your future blogging efforts.
