As a WordPress site owner, one of your main goals is to provide as much valuable content to your visitors as possible.

One way to do this is by displaying a list of your latest posts within a WordPress page. That way, if a visitor enjoys what they read, they can easily find additional content. Not only does this improve your chances of getting more page views — it also enhances the visitor experience on your site.

To help you reap these benefits, this guide will cover the different ways you can create and add a display of recent posts to your WordPress posts and pages. Let’s get started.

Grow Your Business With HubSpot's Tools for WordPress Websites

We’ll walk through each of these methods below so you can choose the one that best aligns with your needs and technical experience. Let’s begin with the easiest methods: using the built-in tools in WordPress.

Use the Latest Posts Gutenberg block.

The Gutenberg block editor might be the most intuitive and best all-around method to add a recent posts list to your page. With the post editor open, click the + to add a block, then choose the Latest Posts block from the menu.

the latest post gutenberg block in the wordpress page editor

Edit your recent posts lists in the right-side panel under the Block tab. The editor allows you to toggle your list’s contents — you can choose whether to display post content (and set your max number of words per excerpt), author names, post date, and featured images. You can also set the dimensions and alignment of your featured images if you choose to include them.

the latest post block settings in the wordpress page editor

Below these settings are your sorting and filtering options. Here, you can sort your latest posts by recency or alphabetically, filter included posts by category and/or author, and set the maximum number of list items. Finally, there’s a field where you can insert custom CSS classes for your list.

the latest post block settings in the wordpress page editor

While it’s not quite as flexible as some of the plugin options we’ll review later on, the Latest Posts block is perfect for those who prefer block editing mode and just need a simple posts list for their blog.

Use the Recent Posts widget.

WordPress’s native recent posts widget is easy to use for site owners at all skill levels. In exchange for this simplicity, however, you’re somewhat limited in functionality.

To start, choose Appearance > Widgets from your WordPress dashboard. Then, drag and drop the widget labeled Recent Posts into your sidebar.

In your sidebar, click on the widget to expand its settings. Here, you can provide an alternate title for the widget, display the publish dates of each post, and choose the number of posts you want to display. Once you’ve made these changes, click Save to store the widget’s settings.

The settings of WordPress's built-in recent posts widget

Image Source

Below is an example of what a Recent Posts widget looks like in the sidebar of a live WordPress site.

Example of what the WordPress Recent Posts Widget looks like in the sidebar of a live site

Image Source

Use a shortcode plugin to place your list.

The built-in Gutenberg Block and Recent Posts widget may be too basic for your site. For example, you may want to place your post list somewhere else. In that case, you can use one of these plugins instead — they provide shortcodes that allow you to put your list almost anywhere on your site.

Recent Posts Widget Extended

The Recent Posts Widget Extended plugin provides more customization options than the built-in widget and gives you more control over the display of recent posts on your WordPress site. You can include custom-sized image thumbnails and excerpts for each post in the display. You can select the order in which posts are displayed, limit which categories and tags these posts can be pulled from, and much more.

Take a look at all of the plugin’s settings below. (Note that the posts are set to display in descending order and by date, which means the latest posts will appear first.)

Settings of the WordPress Recent Posts Widget Extended Plugin

Image Source

If you’d like to display a list of recent posts anywhere else on your site — say, at the end of a post — you can use the shortcode [rpwe] that comes with the plugin.

You simply need to copy and paste this shortcode into any post or page to display a list of your five latest posts. Below are just two options for configuring the shortcode to customize the list of posts.

Options for configuring the shortcode that comes with the WordPress Recent Posts Widget Extended Plugin

Image Source

Display Posts

Display Posts is another popular plugin that lets you add a list of recent posts anywhere with a shortcode. In its most basic form, the shortcode [display-posts] generates a list of your most recent posts. With some quick additions to this shortcode, you can filter this list by post category or order them by attributes like view count or comment count.

You can also customize what attributes to display in your list, including a thumbnail (plus the ability to set the thumbnail dimensions), author name, date (in different formats), and an excerpt from the post.

Enhance the Recent Posts widget with a plugin.

If you like the native Recent Posts widget where it is but want to make it more customizable, there are plugins to help you extend the widget’s functionality as well. Here are two plugins that we recommend for this purpose:

Smart Recent Posts Widget

The Smart Recent Posts Widget allows you to display a list of your latest posts with thumbnails, excerpts, and publish dates included. You can also decide what order the posts are displayed in and limit the display to posts from particular categories and tags.

What sets the Smart Recent Posts Widget apart is how well-organized its settings are. With this plugin, you can fill in the information for one tab and then click on the next, saving changes as you go.

Settings of the Smart Recent Posts Widget

Image Source

It also includes options to display the posts’ author and comment count as well as three style options. Below is how a modern-style widget might appear on the front-end of your site.

A Smart Recent Posts Widget in the modern style might look like this on front-end of your site

Image Source

One disadvantage of using the Smart Recent Posts Widget plugin is that it does not come with a shortcode, which means you can only use this widget to display a list of recent posts in certain designated areas of your site. However, it packs useful customization, especially for a free tool.

Recent Posts Widget With Thumbnails

Recent Posts Widget With Thumbnails is one of the best options for admins who want to augment the existing native Recent Posts widget with extra features like images, categories, and descriptions. The plugin assigns thumbnails using the post’s featured image or first image in the body of the post. Or, you can set the thumbnail image yourself.

With this plugin, you can quickly build post lists that look like this:

an example of a latest posts lists generated by a plugin

Image Source

… and toggle numerous settings to get your lists looking exactly how you want them.

However, if you want to place your list outside of a default widget area, this plugin won’t work for you since it doesn’t provide any shortcodes.

Modify your functions.php file.

If you’re a more advanced user, you can manually display recent posts on your site by adding code to the functions.php file of your theme.

To access this file, log in to your cPanel account with your web host and click on the File Manager. Open your wp-content folder and find your themes folder. Right-click to edit it.

Right-click to edit the functions.php file in a control panel

Image Source

You can add the code below to your theme’s functions.php file between the PHP tags. The PHP tags look like this: <?php.....?>

 

 

function wpcat_postsbycategory() {

// the query

$the_query = new WP_Query( array( 'category_name' => 'yourcategoryslug', 'posts_per_page' => 10 ) ); 

 

// The Loop

if ( $the_query->have_posts() ) {

    $string .= '<ul class="postsbycategory widget_recent_entries">';

    while ( $the_query->have_posts() ) {

        $the_query->the_post();

            if ( has_post_thumbnail() ) {

            $string .= '<li>';

            $string .= '<a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_post_thumbnail($post_id, array( 50, 50) ) . get_the_title() .'</a></li>';

            } else { 

            // if no featured image is found

            $string .= '<li><a href="' . get_the_permalink() .'" rel="bookmark">' . get_the_title() .'</a></li>';

            }

            }

    } else {

    // no posts found

}

$string .= '</ul>';

 

return $string;

 

/* Restore original Post Data */

wp_reset_postdata();

}

// Add a shortcode

add_shortcode('categoryposts', 'wpcat_postsbycategory');

 

// Enable shortcodes in text widgets

add_filter('widget_text', 'do_shortcode');

 

Make sure to replace 'yourcategoryslug' in the third line with the category you’d like the posts to display from. And, if you’d like to display a certain number of posts, just change the 10 in ‘posts_per_page’ => 10 to the number you want.

Adding this code snippet to functions.php will enable the shortcode [categoryposts]. You can copy and paste this shortcode into any WordPress post or page to display a customizable set of posts from your WordPress database.

Creating Your Display of Recent Posts

Using any of the methods above, you can display a list of recent posts within your WordPress posts and pages. Choose the method that best meets your site’s needs and aligns with your technical experience.

Because making a mistake in functions.php can break your site, adding code is only recommended for users with some coding knowledge. If you’re a WordPress beginner, we recommend the built-in widget or a plugin.

Editor's note: This post was originally published in January 2020 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Mar 9, 2021 7:00:00 AM, updated March 09 2021

Topics:

WordPress Website