[Resolved] Next Previous Navigation button style

[Mohit]

Hi there,

I just wanted to know how can I make my post-navigation(next post, previous post) buttons like copyblogger? Link: https://www.copyblogger.com/make-wordpress-faster/

Also, they have widgets in their sidebar at certain places only how can I do this as well?

Thank you

[Leo]

Hi there,

This should help with the post navigation:
https://docs.generatepress.com/article/inline-post-navigation/

This should help with conditional sidebar:
https://wordpress.org/plugins/content-aware-sidebars/

Let me know 🙂

[Mohit]

Hi Leo,

Thank you for getting back, is it possible to make separate element for post navigation as I don’t want post navigation to display in the container instead want it to extent beyond the post container just like copyblogger, the link I shared?

[Mohit]

Also in Mobile preview the code that you sent me is not align itself really well. Th next and previous posts are being displayed in the same line making it look messy.
So, is it possible to make these in separate lines in mobile view, i.e next post nav on top below that previous nav?

Thanks

[Leo]

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Mohit]

Hi Leo,

I just shared my URL

Thanks

[Tom]

You would likely need to disable the GP post navigation and add your own.

For example:

add_filter( 'generate_show_post_navigation', '__return_false' );

Then adding your own:

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

That should get it out of the content container.

It may take some more CSS to style though – I’ll be happy to look once it’s added if you’d like to share your URL 🙂

[Mohit]

Hey Tom,
So I installed child theme and added the code that you shared in function.php, However, after adding the code post navigation is displaying below leave a comment section and not below the post.

How can I fix that? Also, let me know the necessary CSS needed,

Here is the link: http://www.techtechnik.com

Thanks

[Tom]

Ah – I just adjusted the code above to insert it above the comments.

Unfortunately, everything is within the container, so we’ll need to use some negative margin to force it outside.

Try something like this as your full 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;
}

[Mohit]

Thanks Tom, its working as I wanted!

[Tom]

Awesome, glad I could help! 🙂

[Shami]

After doing the same things as stated above, I got the desired result i.e. it looks exactly like Copyblogger on the single post.

I’ve followed all the steps perfectly and achieved what I wanted.

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,

This is an old solution, but perhaps instead of this:

add_filter( 'generate_show_post_navigation', '__return_false' );

Try this:

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

[Shami]

Thanks, Tom. That worked like a charm. You’re amazing.

I just wish If I could change the title of the comment section.

Instead of: ‘X’ thoughts on ‘post title’

I want to make it: Reader Comments (count)

Is there any easy fix for it?

[David]

Hi there,

can you raise a new topic as its unrelated and will make it easier for you and others to find the answer in the future.

[Author]

Posts