Blog pagination customization

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.

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.

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

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. :D

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

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

if that image will show...

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

Awesome, it's perfect.

Thank you Tom :)

You're welcome! :)

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"

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.

Superfast solutions by David as usual :)
It worked. Many thanks

Glad to be of help!!