Displaying thumbnail along with recent posts in the custom home page and sidebar widget improve the user experience of your website, increase page views, and average session duration, and lower the bounce rate.
Other than displaying recent posts in the sidebar you can display them on a custom homepage, landing page, woo-commerce product page, service page, and any page or section in the website that increase your website user experience.
In most WordPress themes, you will not get the option in the free version to display recent posts with thumbnails.
Generally, you use WordPress plugins to display recent posts. There are various paid and free recent posts WordPress Plugins that you can also consider using for premium functionality to improve the user experience of your website. But that also comes with some extra functionality that specifically you don’t need. And this also creates a burden on your hosting server response time to load the website faster.
In modern WordPress, the widget framework provides you the option to show recent posts or the latest posts with thumbnails. Do not matter whether you have paid theme with premium features or a free one with basic features.
You can still show that. But for a high-quality user experience and a beautiful look to get higher CTR, a lower bounce rate of your website, and more page views on your blog or website you must modify its appearance and CSS as well. And in the future, if you switch to a classic widget then you will not get the option to modify its functions.
So, to make it easy we can insert a few lines of code in chid theme function.php file and some CSS styling. We’re in this post looking for very specific recent post features such as posts with thumbnails, displaying recent posts, category posts, and displaying posts with post ids (specific posts). And all with a simple shortcode that you can use anywhere on your WordPress website to display posts with thumbnails.
How this custom recent posts approach is useful?
For example, it’s a good experience for readers/visitors to find recent posts on the custom homepage and sidebar with a thumbnail.
If you analyzed that certain categories’ posts are more popular then you can display 5 to 10 posts from that specific category. This will lower the bounce rate, increase the average event time(session) duration, increase engagement, and more page views.
And similarly, if you want to display pillar posts or parent posts then you can use post ids with shortcodes.
You can modify the functionality of this code to any level. But after this, you will be able to insert recent posts or the latest posts anywhere on your WordPress website. Whether you want to showcase recent posts on the home page, inside Elementor page builder, wp bakery, Gutenberg, between posts, after 3rd paragraph, after content or after the post, home page, sidebar, footer, header, and anywhere.
Related: 7 high-converting landing pages creation software for business
You just have to paste the recent posts’ shortcode to the place you want to display recent posts. And in this post, we’re making it very easy for you to implement this functionality without a plugin. Even in the future, if you change the theme then this recent post’s shortcode functionality will keep working.
So, let’s get started!
3 simple steps to add a recent posts widget with thumbnails
By following these steps you will be able to add a recent posts widget with a shortcode anywhere on your WordPress website with a thumbnail and without a plugin.
Below is the image or difference in both recent posts’ appearance and style. Both can impact your WordPress website or blog user experience positively and negatively.
So to achieve this result follows the step-by-step process. I expect that you already have a child theme function.php and style.css file access. You can add the following code in child theme function.php and style.css through FTP, cPanel File Manager, and by directly editing within the dashboard.
See this video on how you can add recent posts functionality in your WordPress Blog or Website: Tutorial in Hindi
Step 1: Copy the following code and paste it into the Child Theme Function.php file (If there is already some kind of code, then paste this in the last).
Even you can add this code in the original function.php file, but we don’t recommend that. Having a child theme related to your parent theme or even if they don’t provide you can create one. But add this code to your child theme funciton.php and it will work the same after theme updates as well.
<?php
function custom_recent_posts_shortcode( $atts ) {
$atts = shortcode_atts( array(
'number' => 5,
'category' => '',
'post_id' => '',
), $atts );
$number = absint( $atts['number'] );
$category = sanitize_text_field( $atts['category'] );
$post_id = sanitize_text_field( $atts['post_id'] );
$args = array(
'numberposts' => $number,
'post_status' => 'publish',
);
// Add category filter if provided
if ( ! empty( $category ) ) {
$args['category_name'] = $category;
}
// Add specific post IDs filter if provided
if ( ! empty( $post_id ) ) {
$args['post__in'] = explode( ',', $post_id );
}
$recent_posts = wp_get_recent_posts( $args );
$output = '<ul class="custom-recent-posts">';
foreach ( $recent_posts as $post ) {
$thumbnail = get_the_post_thumbnail( $post['ID'], 'thumbnail' );
$title = esc_html( get_the_title( $post['ID'] ) );
$date = get_the_date( '', $post['ID'] );
$permalink = esc_url( get_permalink( $post['ID'] ) );
$output .= '<li>';
$output .= '<a href="' . $permalink . '">';
$output .= '<div class="post-details">';
$output .= '<div class="post-thumbnail">' . $thumbnail . '</div>';
$output .= '<span class="post-title">' . $title . '</span>';
$output .= '<span class="post-date">' . $date . '</span>';
$output .= '</div>';
$output .= '</a>';
$output .= '</li>';
}
$output .= '</ul>';
return $output;
}
add_shortcode( 'custom_recent_posts', 'custom_recent_posts_shortcode' );
You can also see the image below.
Step 2: Add styling in the child theme style.css file
Copy the following code and add it to your style.css file or in custom CSS under WordPress customize option. It’s just basic styling you can modify it as per your needs or user experience.
.attachment-thumbnail.size-thumbnail.wp-post-image {
width: 60px;
border-radius: 25px;
float: left;
margin-right: 5px;
}
.post-details {
font-size: 15px;
padding-bottom: 20px;
color: #171614;
font-weight: 500;
padding:10px;
}
.post-details:hover {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
border-radius:10px;
}
.custom-recent-posts a{
text-decoration: none;
}
.post-date {
color: #eb1515;
padding-left: 4px;
font-weight: 500;
}See the image:
3rd Step: Copy and Paste the recent posts’ shortcode
Go to the widget Area and insert the text widget and paste the following shortcode. But make sure that when you add a shortcode it’s in text mode not visual.
[custom_recent_posts]
Some custom modifications based on user questions or demands to make changes:
- How to add more than 5 posts in the recent posts widget?
If you want to add more than 1 or 10 or more posts in the recent posts widget just add the 10 in the shortcode:
[custom_recent_posts number="10"]- How to change the output order?
If you want to display or change the order of the title, thumbnail, and date. You can move these lines of code up or down:
$output .= '<div class="post-thumbnail">' . $thumbnail . '</div>';
$output .= '<span class="post-title">' . $title . '</span>';
$output .= '<span class="post-date">' . $date . '</span>';- How to show specific posts?
To display specific posts you can post ids such as 123, 456, and 789: [custom_recent_posts post_id=”908,456,789″] Replace these numbers with your specific post ids.
- How to display category Posts?
You can display recent posts or specific posts from any category just add these category attributes in a shortcode like this:[custom_recent_posts category=”news”] Replace the news attribute with your post or blog category.
You can modify the styling of these recent posts based on your ideas and the look that you want to give. You can show them larger and title below the image, you can change the date color, you can make changes in the recent posts text or li or posts li a. To make changes on your own you can use the SiteOrigin CSS editor plugin or you can do it manually by using the custom CSS feature inside the theme.
Some of the tools that can help you in CSS editing or making it more beautiful.
For more info on the basics of shortcode functions or then here you can learn the basics of shortcodes or want to create shortcodes with parameters (custom feature or custom development like this recent post widget attribute).