[Support request] Custom Post Navgiation Next Previous Post

Home Forums Support Custom Post Navgiation Next Previous Post

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

    #1372697
    Tom
    Lead Developer
    Lead Developer
    #1373150
    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.

    #1373353
    David
    Staff
    Customer Support

    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;
    }
    
    #1373396
    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.

    #1373409
    David
    Staff
    Customer Support

    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

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

    #1373455
    David
    Staff
    Customer Support
    #1373647
    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?

    #1373690
    David
    Staff
    Customer Support

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

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

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

    #1374001
    David
    Staff
    Customer Support
    #1374230
    Shami

    Thanks, it worked.

    #1374453
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 36 total)
  • You must be logged in to reply to this topic.