How to Add Next / Previous Links in WordPress (Ultimate Guide)

0 0
Read Time:6 Minute, 26 Second

Do you want to add next / previous links in WordPress?

Next and previous links are dynamic links that allow users to view the next or previous post.

In this article, we’ll show you how to easily add next/previous links in WordPress and how to make the most out of them.

This means the next post is the one published after the current post a user is viewing, and the previous post is the one that was published before the current post.

Most WordPress themes come with built-in next and previous posts links which are automatically displayed at the bottom of each post. However, some themes don’t display them, or you may want to customize where and how they appear on your WordPress website.

That being said, let’s take a look at how to easily add next and previous links in WordPress.

Following is the list of topics we’ll cover in this article.

This method is easier and recommended for beginners who are not comfortable adding code to their websites.

Upon activation, you need to visit the Settings » CBX Next Previous page. From here, you can choose where you want to show the next and previous links on your website.

The plugin allows you to show Next and Previous link arrows on single posts, pages, archive pages, and more.

The free version of the plugin only allows you to display arrows for next and previous articles. You can upgrade to pro version to unlock other display options such as slide-in popup.

From here, you need to choose which taxonomy you want to use to select next and previous links.

After that, switch to the Google Analytics tab in plugin settings and enable click tracking options.

Once you are finished, don’t forget to click on the Save Settings button to store your changes.

This method is easier but it does not give you much flexibility. For instance, the free version doesn’t display the next or previous post title.

If you need more flexibility, then continue reading.

Once you are connected, you need to navigate to the /wp-content/themes/your-current-theme/ folder.

Now, you’ll need to locate the single.php file. This is the file responsible for displaying the single post items on your website.

Some WordPress themes may reference other files inside single.php file. These files are called template parts and are located inside the template-parts folder of your WordPress theme.

After that, simply copy and paste the following code at the location in the template file where you want to display the next and previous links.

You can now save your changes and visit your website to see Next / Previous links in action.

The above template tag will simply show the link to next and previous posts with post title as the anchor text. It doesn’t say that these are the links to the next and previous articles.

Let’s change this a bit and provide users some context about these links. We’ll do this by adding the available parameters for the the_post_navigation template tag.

Simply replace the above code with the following:

You can now save your changes and preview your website.

Here is how it looked on our test site:

You can also use special characters and arrows along with next and previous post titles.

Simply replace the code with the following:

Here is how this code looked on our test website:

Now let’s say you want to make the next and previous links more relevant to the article the user is currently viewing.

You can do that by showing the next and previous links from the same category or tags.

This code tells WordPress to display next and previous posts in the same category. You can change taxonomy parameter to tags or any other custom taxonomy if needed.

Now that we have learned how to add Next / Previous links in WordPress, let’s take a look at how to style them properly.

Here is some basic CSS that you can add to your theme.

This basic CSS simply displays next and previous links next to each other but on the different sides of the same line.

You can also make your navigation links standout by adding background color, hover effect, and more.

Here is some sample CSS code that you can use as an starting point.

This code styles the link text and adds some background color and hover effect to make next and previous links more prominent.

Normally, the post navigation links are used for blog posts in WordPress. That’s because those items are published in reverse chronological order.

However, some users may need to display page navigation so that users can find the next page easily.

Luckily, you can use use the same code we used earlier for pages. However, you’ll need to add the code inside page.php template.

Here is how it looked on our demo site:

Want to make your next and previous links more noticeable? Images are the easiest way to attract user attention and make these links more engaging.

This code simply creates a function that displays the next and previous posts with featured images or post thumbnails.

Next, you need to add the wpb_posts_nav() function to your theme’s single.php file where you want to display the links.

If your theme already has next and previous links, then you may want to find the line that contains the_post_navigation() function and delete it.

Now add the following code to display your custom next and previous links.

After adding the code, don’t forget to save your changes and visit your website to see the links in action.

Now, you may notice that these links don’t look very clean.

You can now save your changes and visit your website to view next and previous links with thumbnails.

Here is how it looked on our test site:

Some users may want to remove next and previous links in WordPress.

There are two ways you can remove the next and previous links in WordPress.

Method 1. Delete The Code in Your WordPress Theme

To remove the next and previous links in WordPress, you’ll need to remove the code responsible for displaying the links in your WordPress theme.

The problem with this approach is that as soon as you update your theme, the deleted code will come back.

Next, you need to find the code responsible for displaying the next and previous links in your parent theme.

Usually, it is found inside single.php or content-single.php templates.

Basically, you’ll be looking for the code that includes the following function.

This code may have a slightly different format and parameters to it. For instance, on our test site the theme used this code to display the links:

If you are using a child theme, then you need to duplicate this particular template in your child theme and then delete the lines used to display next or previous links.

If you would rather just delete it in your parent theme, then you can do that as well.

Deleting the code will stop WordPress from displaying next and previous links.

Method 2. Hide The Next and Previous Posts Links

This method doesn’t really remove the next and previous links. Instead, it just makes them invisible to human readers.

Simply add the following Custom CSS to your WordPress theme.

Don’t forget to save your changes and visit your website to see the navigation links disappear.

source

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post Easy Digital Downloads + Astra = ❤️
Next post Fat, Tired, and Insecure: Supernatural VR Makes Working Out More Accessible Than Ever

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.