Custom text for 'Older' 'Newer' buttons?

Help
1

Is it possible to change the text in these two buttons? For example for another language purposes.

2 Likes
2

Hi @teodordobrzycki! This can be done by adding bit of Custom JavaScript in your blog’s Customize settings. Just replace the text at the end with your preferred wording and you should be good to go.

/* Older Text */
document.getElementById('paging').getElementsByTagName('a')[0].innerText = '⇠ Older';

/* Newer Text */
document.getElementById('paging').getElementsByTagName('a')[1].innerText = 'Newer ⇢';
1 Like
3

Just tried, it works well on the first page and middle pages. Unfortunately on the last page it does not. Instead of displaying the “Newer text” it displays the “Older text” (on the right side).

Guess this is related to the “[1]” becoming “[0]” on the last page.

Any idea?
Thank you

4

Here is a trick I just found, but almost sure there exist a more efficient solution.

var url = window.location.pathname;
var page = url.substring(url.lastIndexOf('/') + 1);
var pagemax = 3; /* Define the number of pages in your blog */
if (page == pagemax) {
document.getElementById('paging').getElementsByTagName('a')[0].innerText = 'Newer ➡';
} else {
document.getElementById('paging').getElementsByTagName('a')[0].innerText = '⬅ Older';
document.getElementById('paging').getElementsByTagName('a')[1].innerText = 'Newer ➡';
}

Just need to replace the variable pagemax to match the number of pages in your blog.

1 Like
5

Yep you got it, that’s an issue with the code — a foresight on my part so my apologies there.

Your trick is a great solution around this though. I am thinking there might be a way to programmatically figure out what your max page is rather than having it hardcoded. Will have to look into that…

6

Thank you :slight_smile:

This may help: I noticed that typing a great number into the url always returns the latest page number. Keeping pagemax as the # of page on the blog, we have:

https://blogname/page/999
that returns :
https://blogname/page/pagemax
instead of something like “Sorry, this page does not exist.”

which let me think that there may be something already existing to define the maximum number of page of each blog…

Thank you again !

7

I built something on top of this to make it work without having to update the maximum number.

The idea was to check two things:

  • Is there only one paging link?
  • Are we one page 2 or higher?

Because we only want the exception (give the first link the name “newer” instead of “older”) if both are true.

This is literally the first JavaScript I’ve “made”, so it can probably be done even smother - but this works! :smiley:

var url = window.location.pathname;
var pageNumber = url.substring(url.lastIndexOf("/") + 1);
var pagingLinks = document.getElementById("paging").getElementsByTagName("a");
var numPagingLinks = pagingLinks.length;
if (pageNumber >= 2 && numPagingLinks == 1) {
  document.getElementById("paging").getElementsByTagName("a")[0].innerText =
    "Nyere ➡";
} else if (pageNumber < 2 && numPagingLinks == 1) {
  document.getElementById("paging").getElementsByTagName("a")[0].innerText =
    "⬅ Eldre";
} else {
  document.getElementById("paging").getElementsByTagName("a")[0].innerText =
    "⬅ Eldre";
  document.getElementById("paging").getElementsByTagName("a")[1].innerText =
    "Nyere ➡";
}

BTW, I found out that the else if statement is needed, because both mxcrml and cjeller1592’s code had the same problem:

When the script did the “turn the first paging link into X and the second into Y” on the first page it would crash because it couldn’t find anything to turn into Y. However, as it managed to turn the first link into X, the crash wasn’t apparent, as it did what was needed - but it made all further JavaScript not run.

1 Like