Changing The Previous and Next Default Text Navigation In WordPress

May 6, 2024
Code, Design & Dev, UX
Read Time: 2 minutes

If you’re running a WordPress blog or website with a lot of content, navigating between posts becomes essential for user experience. WordPress automatically generates “Next” and “Previous” links on posts, but what if you want to customize the text for these navigation buttons? This can easily be done using CSS.

In this article, we’ll walk through how to change the default “Next” and “Previous” text to something more descriptive, using a specific CSS code example.

Why Customize Navigation Text?

The standard “Next” and “Previous” text is functional, but sometimes it may not suit your website’s tone or style. For example, you might want to use more engaging terms like “Past Articles” for previous posts or “Current Articles” for the next ones. Customizing these labels can enhance your website’s branding and provide a better user experience.

The CSS Code to Change Navigation Text

Here’s the CSS you can use to change the default “Next” and “Previous” text:
.posts-navigation div.nav-links div.nav-previous a {
visibility: hidden;
}
.posts-navigation div.nav-links div.nav-previous a::before {
content: "Past Articles";
visibility: visible;
}
.navigation.posts-navigation div.nav-links div.nav-next a {
visibility: hidden;
}
.navigation.posts-navigation div.nav-links div.nav-next a::before {
content: "Current Articles";
visibility: visible;
}

Let’s break down what this code does and how to implement it in WordPress.

How the Code Works

1. Hiding the Original Text
The first part of the CSS (visibility: hidden;) targets the default “Next” and “Previous” text and makes it invisible on the page:
.posts-navigation div.nav-links div.nav-previous a {
visibility: hidden;
}
.navigation.posts-navigation div.nav-links div.nav-next a {
visibility: hidden;
}

2. Inserting Custom Text with Pseudo-Elements
Next, we use the ::before pseudo-element to insert new content in place of the hidden text. The content property defines the custom text you want to display (e.g., “Past Articles” for previous posts and “Current Articles” for next posts):

.posts-navigation div.nav-links div.nav-previous a::before {
content: "Past Articles";
visibility: visible;
}
.navigation.posts-navigation div.nav-links div.nav-next a::before {
content: "Current Articles";
visibility: visible;
}

  1. The visibility: visible; property ensures that the new custom text is displayed to your visitors.

How to Add This CSS to Your WordPress Site

Now that you have the CSS code, here’s how to add it to your WordPress site:

  1. Access Your WordPress Dashboard
    Log in to your WordPress dashboard.
  2. Navigate to the Customizer
    Go to Appearance > Customize. This will open the WordPress Customizer, which allows you to tweak the design of your site.
  3. Add the CSS
    Scroll down and find the Additional CSS section. Here, you can paste the CSS code mentioned earlier.
  4. Publish Changes
    Once you’ve added the CSS, click the Publish button to save your changes.

Customizing the “Next” and “Previous” navigation text in WordPress is a simple yet effective way to personalize your website. By using a few lines of CSS, you can change the default navigation labels to better suit your content and brand voice. This not only helps with branding but also enhances the overall user experience by making the navigation more intuitive and engaging.

Was this article helpful?
YesNo
Translate »