[Resolved] Blog pagination customization

[Margot]

I used this to change my pagination:

add_filter( 'generate_next_link_text', function() {
    return 'Older Posts';
} );

add_filter( 'generate_previous_link_text', function() {
    return 'Newer Posts';
} );
  

Right now it looks like this:
< OLDER POSTS > NEWER POSTS

But I want it to look like this:

< OLDER POSTS | NEWER POSTS >

How should I go about doing this?

[Leo]

Hi there,

Any chance you can disable the caching plugin so I can see the source of the code?

Looks like you are really close already.

Thanks!

[Margot]

No problem. It’s disabled. Let me know if there’s anything else you need.

[Leo]

Hmm looks like the CSS is still cached.

Can you disable other caching plugin as well?

Thanks!

[Margot]

I deactivated CDN too. It should be uncached right now.

[Leo]

Ok remove everything you’ve added, and use this instead:

.post-navigation {
    display: flex;
    justify-content: center;
}
.post-navigation .nav-next .next:before {
    content: "|";
    margin-right: 0;
}

.post-navigation .nav-next .next:after {
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-left: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "\f105";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    speak: none;
}

The idea came from this: https://docs.generatepress.com/article/inline-post-navigation/

Let me know 🙂

[Margot]

Hmm.. It didn’t seem to work. It ends up like this >

1 2 … 7 Older Posts

[Leo]

Ahh sorry my mistake. Thought it was post navigation but it’s actually page navigation.

Looks like the caching is back on again.

Can you please disable it and remove your existing CSS?

Thanks!

[Margot]

No worries!
I checked and it’s totally disabled. I removed my code and the one above as well from the stylesheet.

[Leo]

Weird. Not seeing any changes from my end:
https://www.screencast.com/t/Ak6wO86r3Qup

Looks like WP Rocket is still activated.

[Margot]

That’s very strange. I double checked and it’s deactivated. CDN was on development mode so I disabled it and purged the cache of that as well. Are you still seeing no changes after clearing your browser cache?

[Leo]

Yup I use incognito mode so no cache issues.

Now your site isn’t loading for me. Just a blank page.

[Margot]

I think you might have been getting 500 server responses since the cache plugin and CDN was down. I tested in Browsershots this morning and on 2 other new devices and it’s fine on my end.

If you want I can create an admin login for you or if you want ftp access? Not sure what to do if it still isn’t loading up on your end.

[Leo]

Ok I’ll take my best guess here.

Remove this CSS:

.cat-links:before, .comments-link:before, .nav-next .next:before, .nav-previous .prev:before, .tags-links:before {
    opacity: 0;
}

Then add this:

.nav-next .next:before {
    content: "|";
}
.nav-next .next:after {
    content: "\f105";
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-right: .6em;
    width: 13px;
    text-align: center;
    display: inline-block;
}

Make sure to clear caching plugins to see changes.

[Margot]

Thank you! I ended up using this:

.next.page-numbers {
	display: inline-block
}

.prev.page-numbers {
	display: inline-block
}

.page-numbers {
	display: none
}

.prev.page-numbers:after {
    content: "\f105";
    font-family: GeneratePress;
    text-decoration: inherit;
    position: relative;
    margin-right: .em;
    width: 13px;
    text-align: center;
    display: inline-block;
    content: "|";
}

I appreciate your help, especially with the technical difficulties!

[Author]

Posts