[Resolved] Blog pagination customization

Home Forums Support [Resolved] Blog pagination customization

Home Forums Support Blog pagination customization

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #713706
    Margot

    I used this to change my pagination:

    add_filter( 'generate_next_link_text', function() {
        return 'Older Posts';
    } );
    
    add_filter( 'generate_previous_link_text', function() {
        return 'Newer Posts';
    } );
      

    Right now it looks like this:
    < OLDER POSTS > NEWER POSTS

    But I want it to look like this:

    < OLDER POSTS | NEWER POSTS >

    How should I go about doing this?

    GeneratePress 2.1.4
    GP Premium 1.7.3
    #713780
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can disable the caching plugin so I can see the source of the code?

    Looks like you are really close already.

    Thanks!

    #714252
    Margot

    No problem. It’s disabled. Let me know if there’s anything else you need.

    #714587
    Leo
    Staff
    Customer Support

    Hmm looks like the CSS is still cached.

    Can you disable other caching plugin as well?

    Thanks!

    #714728
    Margot

    I deactivated CDN too. It should be uncached right now.

    #714755
    Leo
    Staff
    Customer Support

    Ok remove everything you’ve added, and use this instead:

    .post-navigation {
        display: flex;
        justify-content: center;
    }
    .post-navigation .nav-next .next:before {
        content: "|";
        margin-right: 0;
    }
    
    .post-navigation .nav-next .next:after {
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
        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;
    }

    The idea came from this: https://docs.generatepress.com/article/inline-post-navigation/

    Let me know 🙂

    #714808
    Margot

    Hmm.. It didn’t seem to work. It ends up like this >

    1 2 … 7 Older Posts

    #714830
    Leo
    Staff
    Customer Support

    Ahh sorry my mistake. Thought it was post navigation but it’s actually page navigation.

    Looks like the caching is back on again.

    Can you please disable it and remove your existing CSS?

    Thanks!

    #714880
    Margot

    No worries!
    I checked and it’s totally disabled. I removed my code and the one above as well from the stylesheet.

    #714883
    Leo
    Staff
    Customer Support

    Weird. Not seeing any changes from my end:
    https://www.screencast.com/t/Ak6wO86r3Qup

    Looks like WP Rocket is still activated.

    #714987
    Margot

    That’s very strange. I double checked and it’s deactivated. CDN was on development mode so I disabled it and purged the cache of that as well. Are you still seeing no changes after clearing your browser cache?

    #715007
    Leo
    Staff
    Customer Support

    Yup I use incognito mode so no cache issues.

    Now your site isn’t loading for me. Just a blank page.

    #715452
    Margot

    I think you might have been getting 500 server responses since the cache plugin and CDN was down. I tested in Browsershots this morning and on 2 other new devices and it’s fine on my end.

    If you want I can create an admin login for you or if you want ftp access? Not sure what to do if it still isn’t loading up on your end.

    #715687
    Leo
    Staff
    Customer Support

    Ok I’ll take my best guess here.

    Remove this CSS:

    .cat-links:before, .comments-link:before, .nav-next .next:before, .nav-previous .prev:before, .tags-links:before {
        opacity: 0;
    }

    Then add this:

    .nav-next .next:before {
        content: "|";
    }
    .nav-next .next:after {
        content: "\f105";
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-right: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
    }

    Make sure to clear caching plugins to see changes.

    #715785
    Margot

    Thank you! I ended up using this:

    .next.page-numbers {
    	display: inline-block
    }
    
    .prev.page-numbers {
    	display: inline-block
    }
    
    .page-numbers {
    	display: none
    }
    
    .prev.page-numbers:after {
        content: "\f105";
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-right: .em;
        width: 13px;
        text-align: center;
        display: inline-block;
        content: "|";
    }

    I appreciate your help, especially with the technical difficulties!

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