Adding a next and previous button to the post footer makes navigation much easier for the reader. Imagine a long post with a lot of content. The user will have to navigate to the top of the post in order to find the options for the next set of posts. This is obviously going to degrade the user experience. Adding a button along with the title of the next and previous post will also drive traffic as the user is made aware of other posts that you may have written. This can be even more important when the topic spans multiple posts and the user needs to be aware of which step in the process comes next.
In this post we add a simple Next and Previous button to our WordPress site.
All posts use a single file as a template. We will be editing this file and adding a few lines of code to implement the feature.
The template file is called single.php. It can be found in the path where the site is installed. Typically if the defaults are used it can be found in theme folder.
wp-content\themes\thesimplest
As you can see from the above path I have navigated to wp-content > Themes > and made the change to the single.php file found under the theme thesimplest.
Open the file using an editor and identify the block of code that loads the post. The important thing to make sure here is to add the code within the loop.
elseif( is_singular( ‘post’ ) ) {
// Previous/next post navigation.
the_post_navigation( array(
‘next_text’ => ‘<span class=”meta-nav” aria-hidden=”true”>’ . __( ‘Next’, ‘thesimplest’ ) . ‘</span>’ . ‘<span class=”screen-reader-text”>’ . __( ‘Next post:’, ‘thesimplest’ ) . ‘</span> ‘ . ‘<span class=”post-title”>%title</span>’ ,
‘prev_text’ => ‘<span class=”meta-nav” aria-hidden=”true”>’ . __( ‘Previous’, ‘thesimplest’ ) . ‘</span>’ . ‘<span class=”screen-reader-text”>’ . __( ‘Previous post:’, ‘thesimplest’ ) . ‘</span> ‘ . ‘<span class=”post-title”>%title</span>’ ,
) );
}
The text in Red is the code that needs to be inserted the text in black should already be present. Add the lines save the file and refresh the post. Once done successfully it will look as shown below. In the above example you can see the title being displayed as part of the button text.
Please Consider Subscribing
