Archived topic
Always present a "previous post" link even on the first post in the blog
5 replies · Started by Mike on June 27, 2022
Hi,
I appreciate this is a little beyond the realms of support so do say so if it's not an appropriate question.
In the middle of the posts, current post navigation looks like:
< Previous Post [....imagine lots of space across the screen....] Next Post >
In this case both "previous post" and "next post" are hyperlinks to display the appropriate post.
When the FIRST post is being displayed, I would like to display:
< Nothing Earlier [....imagine lots of space across the screen....] Next Post >
In this case - "Nothing Earlier" would not have any hyperlink and "Next Post" would.
Is there a simple way to do this?
thanks
Mike
Hi there,
you could overwrite the post navigation function... or the snippet below will inject some CSS to display a message using a :before pseudo element.
add_action('wp_head', function(){
if ( ! get_previous_post() ) {
echo '<style>
#nav-below .nav-next {
display: flex;
align-items: center;
}
#nav-below .nav-next:before {
content: "your no prev message";
margin-right: auto;
}
</style>';
}
});Thank you! The reason I'd thought about adding a "< no previous posts" message there was to cause the "next" link to push right over to the far side.
The CSS from the link below was used to change the nav links layout, but it always bugged me that on the first post (or first of any custom posts which is more important), the first .nav-next always ended up in the middle due to the width: 50% that otherwise kept the pair so nicely apart in every other situation. Therefore based on your excellent idea I realised a better way was to use the injected CSS just to modify the width parameter on the first post only.
modified code:
add_action('wp_head', function() {
if ( ! get_previous_post() ) {
echo '<style>
#nav-below .nav-next {
display: flex;
align-items: center;
width: 100%;
} </style>';
}
});
Posting this back here in case others find that useful.
thanks again!
Mike
Awesome - but when i was writing it, i thought i was over complicating it.
When we could of just used a CSS adjacent sibling combinator +. This allows us to apply CSS to an element based on it being adjacent to another element. Or in this case when there is NOT a nav-previous element next to it:'
.post-navigation :not(.nav-previous) + .nav-next {
width: 100%;
}Thats all you should need, no PHP :)
Genius! Works perfectly - thank you :-) Would recommend you add this to the article here:
https://docs.generatepress.com/article/inline-post-navigation/
Ill see what we can do.
glad to be of help
