[Support request] Custom Post Navgiation Next Previous Post

[Shami]

I added this PHP:

add_filter( ‘generate_show_post_navigation’, ‘__return_false’ );
add_action( ‘generate_before_comments_container’, function() {
if ( is_single() ) {
the_post_navigation();
}
} );

And then added this css:

.navigation.post-navigation {
margin-left: -100px;
margin-right: -100px;
background: #fafafa;
padding: 20px 40px;
}

@media (max-width: 1077px) {
.navigation.post-navigation {
margin: 0;
}
}

.post-navigation .nav-links {
display: flex;
align-items: center;
}

@media (max-width: 768px) {
.post-navigation .nav-links {
flex-direction: column;
}
}

.post-navigation .nav-next {
width: 50%;
text-align: left;
padding: 30px;
position: relative;
}

.post-navigation .nav-previous {
width: 50%;
text-align: right;
padding: 30px;
position: relative;
}

.post-navigation .nav-previous:before {
content: “Previous Article:”;
display: block;
font-size: 12px;
text-transform: uppercase;
}

.post-navigation .nav-next:before {
content: “Next Article:”;
display: block;
font-size: 12px;
text-transform: uppercase;
}

.post-navigation .nav-next a:after,
.post-navigation .nav-previous a:before {
font-family: GeneratePress;
text-decoration: inherit;
position: absolute;
right: -15px;
top: calc(50% – 15px);
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;
font-size: 30px;
}

.post-navigation .nav-previous a:before {
content: “\f104”;
right: auto;
left: -15px;
}

I wished to make previous and next navigation links on single post like Copyblogger.
Check this: https://www.copyblogger.com/make-wordpress-faster/

Everything worked fine.

But the weird thing is that the pagination on my archive pages has disappeared. I’m guessing the PHP that I’ve added is causing the problem and making the pagination disappear in the archive.

Even infinite scroll isn’t working.

My archive pages are only showing the default number of posts, which is five. After that, there seems no way to access older posts.

Also, it’s worth noting that there are more than 20 posts.

I don’t know what to do now. I hope there is some kind of CSS or PHP fix for it.

Please help.

[Tom]

Hi there,

My solution here should help: https://generatepress.com/forums/topic/next-previous-navigation-button-style/#post-1372691

[Shami]

Thanks, Tom. That worked amazingly well. I appreciate your fantastic support.

Still, there is a little change that I wish to make:

Both the previous post and next post navigation appear in the same section. So I want to create a slim partition between them.

Also, I want to change only the hover-color of those sections to white.

I want it exactly like this one: https://copyblogger.com/aurelien-amacker-systeme-io/

Note: Please consider the code that I’ve already added for this change.

[David]

Hi there,

that old method really isn’t conducive to that type of layout.
Instead try adding this PHP Snippet:

function filter_single_post_navigation($output, $format, $link, $post){

    if ( ! $post ) {
	  return '';
    }

    $title = get_the_title($post);
    $url   = get_permalink($post->ID);
    $container_class = 'previous';
    $class = 'prev post-nav-button';
    $rel   = 'post-navigation prev';
    $label = __( 'Previous Article:', 'generatepress' );
    
    if('next_post_link' === current_filter()){
        $container_class = 'next';
        $class = 'next post-nav-button';
        $rel = 'next';
        $label = __( 'Next Article:', 'generatepress' );
  }
  return "<div class='$container_class'><span class='label'>$label</span><a href='$url' rel='$rel' class='$class'><span class='label'></span>$title</a></div>";
}
add_filter( 'previous_post_link', 'filter_single_post_navigation', 10, 4);
add_filter( 'next_post_link', 'filter_single_post_navigation', 10, 4);

Then this CSS:

.post-navigation .nav-links {
    display: flex;
}

@media (max-width: 768px) {
    .post-navigation .nav-links {
        flex-direction: column;
    }
}

.post-navigation .nav-links div {
    display: flex;
    flex-direction: column;
    flex: 1 0 calc(50% - 2px);
    margin: 1px;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3;
    transition: background 0.2s;
    border-radius: 2px;
}

.post-navigation .nav-links div:hover {
    background-color: #fff;
}

.post-navigation .nav-links .previous {
    text-align: right;
    padding-left: 100px;
}

.post-navigation .nav-links .next {
    padding-right: 100px;
}

.post-navigation .nav-links .label {
    text-transform: uppercase;
    font-size: 11px;
    /* Add font styles for Next-Prev Label */
}

.post-navigation .nav-links a {
    font-size: 18px;
    font-weight: 600;
    /* Add font styles for Post title */
}

.post-navigation .nav-links a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post-navigation .nav-links a:after {
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    content: '';
    display: block;
    height: 20px;
    opacity: 0.5;
    position: absolute;
    top: calc(50% - 10px);
    width: 20px;
}

.post-navigation .nav-links .previous a:after {
    left: 30px;
    transform: rotate(45deg);
    transition: all 0.2s;
}

.post-navigation .nav-links .next a:after {
    transform: rotate(225deg);
    right: 30px;
    transition: all 0.2s;
}

.post-navigation .nav-links .previous a:hover:after {
    left: 20px;
}

.post-navigation .nav-links .next a:hover:after {
    right: 20px;
}

[Shami]

The problem is that I want it outside the container. Not inside the container. Because it looks messy there and might hurt the user experience.

It works fine in desktop but it’s not appearing properly in mobile, next post navigation is appearing half-chopped.

Could you please tweak it a little so that it appears outside the page container like the previous one that Tom made?

Also, on hovering the side arrows aren’t having a jumping effect. That would be super awesome if you do something with that.

Everything else is fine.

[David]

Then you add the code Tom originally provided to move it:

add_filter( 'generate_show_post_navigation', '__return_false' );
add_action( 'generate_before_comments_container', function() {
    if ( is_single() ) {
        the_post_navigation();
    }
} );

And i have updated the CSS above to cater for that change

[Shami]

Thanks, David. It’s almost as I wanted.

The only thing that remains now:

the side arrow isn’t having a jumping effect on hover.

[David]

Updated CSS above.

[Shami]

Thanks, David. It worked.

I’m trying to change ‘Previous Post’ to the ‘Previous Article:’
And ‘Next Post’ to ‘Next Article:’

I tried changing here:
$label = __( ‘Next Post’, ‘generatepress’ );’

But it gives me some weird error.

So how do I do it the right way?

[David]

That should be fine.
I edited the code above to make those changes.

[Shami]

Thank you guys, you’re really awesome. Your support has been one of the best I’ve ever seen. Keep up the great job.

[Shami]

I got one not-so-big issue:

When the oldest article is open, the previous navigation still appears with the name of the current article.

Logically when I’m at the latest or the oldest article, one navigation link should disappear.
But in this case, it shows the current article title in one of the navigation links depending on whether it’s the oldest or latest.

It’s not that big of an issue but it’d be great if you do something regarding it.

[David]

Fixed that in the code above

[Shami]

Thanks, it worked.

[David]

You’re welcome

[Author]

Posts