WordPress Plugin: Add A Previous and Next Post Panel After Your Blog Post
WordPress gives publishers an enormous amount of control over how readers navigate content, yet many sites stop at the end of the post and leave the next step entirely to chance. Adding a well-designed previous and next post section directly after the content is one of the simplest ways to guide readers deeper into the site, while also improving engagement metrics that matter to both marketers and publishers.
When a reader finishes an article, they are at a decision point. Without guidance, they are just as likely to leave as they are to continue reading. A clearly presented previous and next post block removes that friction. It keeps the experience contextual, offers relevant content immediately, and creates a natural narrative flow through your site.
From an analytics perspective, this pattern reliably increases pages per session and average time on site. From a business perspective, more pageviews mean more opportunities to expose readers to subscriptions, lead forms, internal promotions, or monetization placements. The result is not a ranking hack, but a structural improvement that aligns user experience (UX) with conversion goals.
WordPress already knows which posts precede and follow the current one, and it stores each post’s featured image and title. The approach below taps into that data at render time and appends a structured layout after the post content. Because it runs as a plugin and uses standard WordPress hooks, it works across themes without modifying templates, making it both portable and maintainable.
WordPress Previous and Next Post Panel Plugin
Create a new folder inside your WordPress installation at wp-content/plugins/previous-and-next-post/ and add a file named previous-and-next-post.php with the following contents.
<?php
/**
* Plugin Name: Previous and Next Post
* Plugin URI: https://dknewmedia.com
* Description: Displays previous and next posts after the content with featured images and titles in a two-column grid.
* Version: 1.0.0
* Author: Douglas Karr
* Author URI: https://dknewmedia.com
*/
defined('ABSPATH') || exit;
function dk_add_previous_next_posts_after_content($content) {
if (!is_single() || !in_the_loop() || !is_main_query()) {
return $content;
}
$previous_post = get_previous_post();
$next_post = get_next_post();
if (!$previous_post && !$next_post) {
return $content;
}
ob_start();
?>
<div class="dk-prev-next-wrapper">
<?php if ($previous_post): ?>
<div class="dk-prev-next-item">
<a href="<?php echo esc_url(get_permalink($previous_post->ID)); ?>">
<?php echo get_the_post_thumbnail($previous_post->ID, 'medium'); ?>
<h3><?php echo esc_html(get_the_title($previous_post->ID)); ?></h3>
</a>
</div>
<?php endif; ?>
<?php if ($next_post): ?>
<div class="dk-prev-next-item">
<a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
<?php echo get_the_post_thumbnail($next_post->ID, 'medium'); ?>
<h3><?php echo esc_html(get_the_title($next_post->ID)); ?></h3>
</a>
</div>
<?php endif; ?>
</div>
<?php
$navigation = ob_get_clean();
return $content . $navigation;
}
add_filter('the_content', 'dk_add_previous_next_posts_after_content');
function dk_prev_next_posts_styles() {
if (!is_single()) {
return;
}
?>
<style>
.dk-prev-next-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 24px;
margin-top: 48px;
}
.dk-prev-next-item {
text-align: center;
}
.dk-prev-next-item img {
width: 100%;
height: auto;
display: block;
margin-bottom: 12px;
}
.dk-prev-next-item h3 {
font-size: 1.1em;
line-height: 1.4;
margin: 0;
}
.dk-prev-next-item a {
text-decoration: none;
}
</style>
<?php
}
add_action('wp_head', 'dk_prev_next_posts_styles');The plugin hooks into the_content filter, which WordPress applies right before post content is output on the front end. When the current view is a single post, the plugin retrieves the adjacent posts using WordPress core functions. If a previous or next post exists, it pulls the permalink, featured image, and title for each and renders them into a two-column grid. Each item places the image first, with the title below, creating a clear visual cue for navigation.
If one of the posts does not exist, such as on the first or most recent post, the plugin omits that column, ensuring there is no empty or broken layout. This plugin keeps everything self-contained. It avoids theme overrides, respects WordPress conditionals, and only loads styles on single post views. You can easily migrate the CSS into a theme or enqueue it as a stylesheet later if desired.
Installing and Activating the Plugin
Installing the plugin follows the same process as any custom WordPress plugin. After creating the folder and PHP file, log in to your WordPress admin dashboard. Navigate to the Plugins section and select Installed Plugins. You should see Previous and Next Post listed. Click Activate, and the functionality will be live immediately.
Once activated, visit any individual blog post on the front end. At the bottom of the post content, you will see the previous and next post links rendered as a two-column grid, each with a featured image and title where available.
Because the plugin relies entirely on WordPress core functions, it will automatically adapt as new posts are published, old posts are removed, or featured images are updated. The result is a small addition that quietly improves navigation, strengthens engagement, and increases the likelihood that readers continue their journey through your site rather than ending it at the bottom of a single article.
