Free tools Windows power users keep installed
One-click scans. No signup required.
To show a thumbnail beside each Previous and Next link on an individual WordPress post, retrieve the adjacent posts with get_previous_post() and get_next_post(), then combine each post’s permalink, title and featured-image HTML in your single-post template. In a classic theme, this requires post-thumbnail support and custom markup. In the block editor, the Previous Post and Next Post blocks provide navigation, but you must verify whether your active theme exposes thumbnail controls or markup.
First, choose the right kind of navigation
Previous and next post links move between individual entries in the post sequence. They belong in a single-post view. Archive pagination is different: previous_posts_link() and next_posts_link() move between pages of a category, search, blog index or other listing.
For single posts, WordPress provides previous_post_link(), next_post_link(), and returning versions named get_previous_post_link() and get_next_post_link(). get_the_post_navigation() builds both sides and supplies a navigation wrapper when either adjacent post exists. The template tags operate in The Loop.
Classic-theme method: build thumbnail cards in PHP
1. Enable featured images
Add thumbnail support in your theme’s setup code. When registering support through a hook, use after_setup_theme so it runs before init:
#1 Best Overall
- Used Book in Good Condition
<?php
function mytheme_setup() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );After this support is active, the editor can show the Featured Image control and template functions can output the image. A child theme can place the setup code in its own functions file; otherwise edit the theme’s setup code rather than changing generated files.
2. Retrieve the adjacent posts and compose each card
Place a structure like this in the single-post template, usually near the end of the article:
<?php
$previous = get_previous_post();
$next = get_next_post();
?>
<nav class="post-navigation" aria-label="Post navigation">
<?php if ( $previous ) : ?>
<a class="post-navigation__link post-navigation__link--previous"
href="<?php echo esc_url( get_permalink( $previous ) ); ?>">
<?php if ( has_post_thumbnail( $previous ) ) : ?>
<?php echo get_the_post_thumbnail( $previous, 'thumbnail' ); ?>
<?php endif; ?>
<span>Previous: <?php echo esc_html( get_the_title( $previous ) ); ?></span>
</a>
<?php endif; ?>
<?php if ( $next ) : ?>
<a class="post-navigation__link post-navigation__link--next"
href="<?php echo esc_url( get_permalink( $next ) ); ?>">
<?php if ( has_post_thumbnail( $next ) ) : ?>
<?php echo get_the_post_thumbnail( $next, 'thumbnail' ); ?>
<?php endif; ?>
<span>Next: <?php echo esc_html( get_the_title( $next ) ); ?></span>
</a>
<?php endif; ?>
</nav>The if checks are important: the first post has no previous neighbor, the latest post may have no next neighbor, and either neighboring post may lack a featured image. The example omits an image when none exists; you can instead add a deliberate fallback image or retain a text-only card.
3. Choose the image size
get_the_post_thumbnail() returns thumbnail HTML for a specified post. Its default size is post-thumbnail, but you can pass a registered size such as thumbnail, a custom name, or dimensions. Register a consistent crop with set_post_thumbnail_size() or add_image_size(), then regenerate existing media if your site requires the new crop. The available sizes and their appearance depend on the active theme.
4. Style and make the whole card usable
Because the anchor wraps both image and title, the entire card is clickable. Add CSS for a two-column layout, image dimensions, spacing and a visible keyboard-focus state. Keep the text label descriptive; “Previous” and “Next” combined with the actual title are clearer than an icon alone. Add an alt strategy through the generated image attributes and do not rely on the thumbnail as the only way to identify the destination.
Limit navigation to a category or other term
By default, adjacent-post functions can cross category or taxonomy boundaries. To keep readers inside the current term, use the same-term argument and provide the taxonomy when using the link functions:
Rank #4
<?php
previous_post_link(
'<span class="previous">%link</span>',
'Previous: %title',
true,
'',
'category'
);
next_post_link(
'<span class="next">%link</span>',
'Next: %title',
true,
'',
'category'
);The format argument lets you wrap %link in custom markup, while the link text can use %title or a translated label. Excluded term IDs can also be supplied when particular categories or taxonomies must be skipped. If you need thumbnails as well as term filtering, retrieve the adjacent post with the corresponding arguments and build the card yourself, as in the earlier pattern; the simple link tags do not automatically add a thumbnail card.
Block-editor method
Insert the navigation blocks
- Open the single-post template or post-navigation area in the Site Editor.
- Insert a Post Navigation Link block.
- Choose whether it represents the previous or next post.
- Alternatively, type
/previous-postor/next-postin the block inserter.
These blocks provide post-navigation links, but WordPress documentation does not promise that they automatically display the adjacent post’s featured image. Check the block controls and the active theme’s template. If no thumbnail option exists, use a custom block pattern, a theme-specific navigation variation, or the classic PHP approach in a suitable template.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Best Value
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Implementation choices at a glance
| Requirement | Recommended approach | Important limitation |
|---|---|---|
| Thumbnail plus title in one clickable card | Classic template using get_previous_post(), get_next_post(), permalink, title and get_the_post_thumbnail() |
Requires template editing and thumbnail support |
| Simple text-only adjacent links | previous_post_link() and next_post_link() |
No automatic thumbnail card |
| Both links with a core navigation wrapper | get_the_post_navigation() |
Its standard output is navigation markup, not a guaranteed image card |
| No-code Site Editor workflow | Previous Post and Next Post blocks | Thumbnail availability depends on theme and block controls |
| Stay within one category or taxonomy | Same-term arguments with the taxonomy specified | Confirm the adjacent post actually belongs to that term |
Before publishing, test these cases
- The first and last posts, where one direction should be absent.
- An adjacent post without a featured image.
- A post whose title contains quotes, ampersands or other HTML-sensitive characters.
- Posts at a category boundary when same-term navigation is required.
- Keyboard focus, narrow screens and large or unusually cropped featured images.
- Whether your theme’s registered image size exists and displays the intended crop.
Use esc_url() for generated URLs and esc_html() for titles, keep the card inside a semantic nav element with an accessible label, and match the code to the WordPress version and active theme used by the site.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
