How to Change the Text on the Next/Previous Link in Single Post?


When you are using Headway Theme editor to create your blog or website, you will realize the default next and previous link at the end of your post is displayed as the title of each post. This might spoil your neat layout when you have long post title as seen below.



Replace the Text with “Next Post” & “Previous Post” Link
If you would like to replace the long titles link with just “Next Post” and “Previous Post” link, it requires a little editing on the functions.php file. It is highly recommended you edit on your child-theme’s functions.php file so that it will not get overwritten if there is a future upgrade on Headway Themes. In another words, the functions.php in the child theme will help to safeguard or maintain the same functionality of your blog or website even after future Headway Themes upgrade. If you do not know how to create a child theme, click here to see the tutorial.

After you have created the child theme, you can now follow the below step to change your post-titles link to next and previous link.

  1. Log into your wordpress dashboard.
  2. Go to Appearance > Editor and click on functions.php on the right hand panel.
  3. Copy the following code and paste it into your functions.php file.
<?php

// CHANGE LONG POST TITLE TO PREVIOUS & NEXT HYPERLINK
function change_next_post($format, $link) {
return preg_replace('/\">(.*?)<\/a>/i', '">Next Post</a>', $format);
}
function change_previous_post($format, $link) {
return preg_replace('/\">(.*?)<\/a>/i', '">Previous Post</a>', $format);
}
add_filter('next_post_link', 'change_next_post', 12, 2);
add_filter('previous_post_link', 'change_previous_post', 12, 2);

?>
  1. Click on the green button “Update File” below the entry box to save.
  2. Go to your browser and refresh your page and you will see the long title is now being replaced by next and previous text which look like below picture.

Styling the Next/Previous Link
If you want to style the next post and previous post link, you can go to the Visual Editor and under the Design mode, click on the “Editor” at the bottom of the screen to bring up more options. Then under “Block”, click on “Content > Continue Reading Button” and style to the look you want. Remember there is the hyperlink state, hover state and clicked state, make sure you choose the right state before you made the changes. There were many Headway Themes users who were not aware of the 3 states and were frustrated when they made the changes and did not see the desired style shown on their blogs or websites. 

Comments

  1. Hiya!
    I have a problem similar but not exctly the same as this one. I need to translate the loop navigation button on the front page to Swedish but I cannot find any way to do it.. I need to change "older posts" to "Äldre inlägg" and newer posts to "Nyare inlägg"
    I figured, since you know your way in this matter, maybe you knew how to do that?
    thanks a lot!

    ReplyDelete
  2. @NorthLion You can replace the "next post" & "previous post" with Swedish words in step 3 which is in the functions.php file.

    Hope this helps.

    ReplyDelete
  3. Well, the ones I want to change are the ones on the front page not single post,and I don't know the code for that, I figured since you worked this out you might know that one as well? It's the plural version of the button I need, "Older Posts" & "Newer posts"?
    How would the code different for that?

    ReplyDelete
  4. @NorthLionWhat is URL? It's hard to understand what you want without seeing the site?

    By the way, do you have access to Headway Themes membership forum? I think they have a discussion there too.

    ReplyDelete
  5. If you have not solve this look for CodeStyling Localization Plugin and install it then add the language your site is. In my case Site is in Spanish but Spain Spanish, so I add Spanish>Spain language scanned the HW theme and after that I chose Edit and there are all HW entries. Select the one you want to translate and after that click create mo.file and that's it

    ReplyDelete

Post a Comment

Popular posts from this blog

Headway Visual Editor not Loading in the Browser