[Resolved] Next Previous Navigation button style

Home Forums Support [Resolved] Next Previous Navigation button style

Home Forums Support Next Previous Navigation button style

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #678892
    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

    GP Premium 1.7.2
    #678906
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #678988
    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?

    #678990
    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

    #679405
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #679625
    Mohit

    Hi Leo,

    I just shared my URL

    Thanks

    #679762
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #679782
    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

    #680355
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #680691
    Mohit

    Thanks Tom, its working as I wanted!

    #680765
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! πŸ™‚

    #1372340
    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.

    #1372691
    Tom
    Lead Developer
    Lead Developer

    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' );
        }
    } );
    #1372900
    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?

    #1373033
    David
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.