Archived topic
Change numbered page navigation links to "Older" and "Latest"
5 replies · Started by Baz on November 28, 2020
Hi, I would like to replace the numbered page navigation links with simple previous/next links as "Older" and "Latest". This is a simple option to switch to/from in Genesis themes but nothing similar seems to currently exist in GP.
Please see this example: https://ibb.co/Xp5xr1R
I would like the nav 'button' to have a white background, and the then black when selected, with both having a HTML symbol before and after (❰ and ❱)
Thank you for your support.
Hi there,
I'm not sure what you mean by selected? When hovered maybe?
This is a good start:
.nav-links {
display: none;
}
.paging-navigation .nav-next, .paging-navigation .nav-previous {
display: block;
}
.paging-navigation {
display: flex;
justify-content: space-between;
}
.paging-navigation .gp-icon {
display: none;
}
.nav-previous .prev a:before {
content: "❰";
padding-right: 10px;
}
.nav-next .next a:after {
content: "❱";
padding-left: 10px;
}
.paging-navigation a {
padding: 10px 15px;
border: 1px solid;
border-radius: 10px;
color: black;
}That's great Tom, thanks!
I've added the hover back-ground colour effect (which is what I meant). The only problem is that there are two '<' symbols coming from somewhere within the theme? Please see screenshot.
Thanks
Sorry, forgot to ask if there is a snippet to change the 'Older Posts', 'Newer Posts' text.
Thank again for your support.
Okay, might of solved the extra '<' symbols appearing. It's picking them up from `.nav-next .next:before {
content: "\f105";
}`
So, I just added:
.nav-previous .prev:before,
.nav-next .next:before {
display: none;
}Need to change the 'Older' 'Newer' text if possible. Thanks.
Ah yes, my code assumed you were using SVG icons.
To change the text, try this:
add_filter( 'gettext', function( $text ) {
if ( 'Older Posts' === $text ) {
$text = 'Your older posts text here';
}
if ( 'Newer Posts' === $text ) {
$text = 'Your newer posts text here';
}
return $text;
} );