[Resolved] Blog pagination customization

Home Forums Support [Resolved] Blog pagination customization

Home Forums Support Blog pagination customization

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #605136
    artie

    Hi!

    I’ll be ambitious today.

    How can I customize blog pagination? Let’s say, something similar to what you have here on the forum. And is it possible to change “Next” label to something like “Older posts” ?

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #605426
    David
    Staff
    Customer Support

    Hi.

    you can use this CSS to style the pagination:

    .page-numbers {
    	padding: 5px 10px;
    	box-sizing: border-box;
    	border-radius: 5px;
    	border: 1px solid;
    	text-align: center;
    }

    Just checking to see if there is a filter to change the Prev / Next titles with Tom and Leo.

    #605484
    artie

    That looks much better. Thank you. I’ll play around with it later.

    Meanwhile I hope I can ask one more question. This one about single post navigation. My idea was to have one on the left side and one on the right side. In older post I found this code from Tom:

    .post-navigation {
        font-size: 20px;
    }
    
    .post-navigation .nav-previous, 
    .post-navigation .nav-next {
        display: inline;
        padding: 0 20px
    }
    
    .nav-next .next:before {
        display: none;
    }
    
    .nav-next .next:after {
        content: "\f105";
        font-family: FontAwesome;
        padding-left:10px
    }

    I messed around with it but couldn’t get it right. Plus with paddings and margins it pushed end of the right one down to the left. And I suppose it is possible for these navigations to align automatically and nicely when post titles are shorter or longer? As in when I aligned normal length title, shorter title appeared closer to center, and longer title had its end cut down to the left.

    #605520
    David
    Staff
    Customer Support

    You can try some flexbox like so:

    .site-main .post-navigation {
    	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    }
    .site-main .post-navigation .nav-previous,
    .site-main .post-navigation .nav-next {
    	display: inline;
    }
    #605534
    artie

    That is awesome. In combination with parts from that Tom’s code everything works great.
    Thank you very much.

    If it’s possible to change prev/next labels then I think I’ll be done with navigations for a long time. πŸ˜€

    #605545
    David
    Staff
    Customer Support

    Oh yeah that one. Well ‘Older Posts’ and ‘Newer Posts’ are already there so you can use this code in place of the original pagination styling:

    .paging-navigation {
    	display: flex;
    }
    .paging-navigation .nav-next, .paging-navigation .nav-previous {
    	display: block;
    }
    .paging-navigation .nav-previous {
    	margin-right: 5px;	
    }
    .paging-navigation .nav-next {
    	order: 1000;
    	margin-left: 5px;
    }
    .page-numbers.prev,
    .page-numbers.next {
    	display: none;
    }
    .page-numbers,
    .paging-navigation span {
    	padding: 5px 10px;
    	box-sizing: border-box;
    	border-radius: 5px;
    	border: 1px solid;
    	text-align: center;
    }
    #605568
    artie

    Well, that kinda works. What about something like this:

    nav thingy

    if that image will show…

    #605747
    Tom
    Lead Developer
    Lead Developer

    You can change the Next and Previous text with a couple filters:

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

    Awesome, it’s perfect.

    Thank you Tom πŸ™‚

    #606362
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.