[Resolved] Change numbered page navigation links to “Older” and “Latest”

[Baz]

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.

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Baz]

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.

https://ibb.co/3WqMq48

Thanks

[Baz]

Sorry, forgot to ask if there is a snippet to change the ‘Older Posts’, ‘Newer Posts’ text.

Thank again for your support.

[Baz]

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.

[Tom]

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;
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts