Sign up for our newsletter and be the first to get all the latest Qode news and updates.
BACK TO TOP

How to Display All Your WordPress Posts on One Page

How to Show 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.

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:

How to Create a WordPress blog page using default options

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.

Static Page Blog

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.

Posts Page

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.

How to Create a WordPress blog page using theme-specific blog page templates

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.

Page Template Blog

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.

Page Template Live

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.

Qode Themes: Top Picks
Bridge New Banner
Bridge

Creative Multi-Purpose WordPress Theme

Stockholm WordPress Theme
Stockholm

A Genuinely Multi-Concept Theme

Startit WordPress Theme
Startit

Fresh Startup Business Theme

Creating a WordPress blog page using plugins

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.

One of the free plugins we found most useful is the WP Show Posts. After installing it, navigate to WP Show Posts > Add New to create a new shortcode. Using it, we will add all the posts to our page to create a WordPress blog page. Add the title, choose a taxonomy (e.g. category), and then tick all the terms of your chosen taxonomy to show all posts. Tick the checkbox next to Pagination to enable pagination and, if you want, change the number of posts per page.

WP Show Posts

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.

WP Show Posts Shortcode

You need to paste this shortcode inside your page. Depending on which page builder you are using, this process can vary. We will show how it looks in a few different page builders.

Gutenberg and WP Show Posts

Click on the “+” sign to add a Gutenberg block and search for shortcode. Then click on the Shortcode widget to add it and paste the previously copied shortcode inside it.

Gutenberg Shortcode

Afterward, update the page by pressing the Update button on the right.

Elementor and WP Show Posts

Add a Text Editor element from the list of basic widgets and insert the copied shortcode inside its Visual tab. Afterward, update the page by pressing the Update button at the bottom.

Elementor Text Editor

WPBakery Page Builder and WP Show Posts

Add the Text Block element from the list of the available WPBakery elements. Then, paste the copied shortcode within the Visual tab of the General section. Finally, press the Save changes button within the Text Block element, followed by pressing the Update button in the right section of your page.

WPBakery Text Block

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.

Blog List Page

How to Create your custom blog template

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.

Creating a New File

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.

Creating a New File Name

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
*/
Page Template Option

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.

Creating a New File

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.

Custom Blog Page

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.

Post your comment

Comments0