[Resolved] Blog pagination customization

[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” ?

[David]

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.

[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.

[David]

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;
}

[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. 😀

[David]

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;
}

[artie]

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

if that image will show…

[Tom]

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

[artie]

Awesome, it’s perfect.

Thank you Tom 🙂

[Tom]

You’re welcome! 🙂

[Erol]

Hi Super Team,

I don’t know whether I am doing wrong by raising a related question on this post instead of creating a new support ticket. Many thanks for your great support 🙂 I cannot figure out why the first page number on the pagination has no padding on the left despite the code. Please check @ https://happy.websmith.cc/blog/ the funny thing is when I click page 2 and 3 the same problem does not occur and all 3 pages look nice but when I click on page 1 again the padding gets lost again. same thing happens when I click on the menu item “BLOG”

[David]

Hi there,

try adding this CSS:

#nav-below .nav-links > * {
    padding: 0 5px;
}

This will overcome some of the GP CSS that removes the left padding from the first link.

[Erol]

Superfast solutions by David as usual 🙂
It worked. Many thanks

[David]

Glad to be of help!!

[Author]

Posts