Here’s the CSS used for styling both the default archive pagination and the new in-post/in-page Page-Links:
[gist id=”d9724e2fa687ede868a2″ file=”genesis-page-links-styles.css”]
This code can be added to your theme’s style.css file (if these styles already exist, you may have to replace them).
We also added <span class=”prevnext-page“></span> around the “Previous Page” and “Next Page” links. This is useful if you want to “hide” this text for smaller resolutions ( span.prevnext-page { display: none; } ) where the buttons may be too wide to fit in one row across the screen.
You’ll notice our pagination also includes icons. Go to page three for a brief explanation on those:
Mike says
Hi Tony,
I really like what you have here.
Is there a way to tweak your codes to make the next page button different from the previous page button?
Thank-you.
Mike
zorzar says
Hi Tony Please help me,
i wanted this code. i find here but not working. can you help me?
i post (gallery type) one post sehirotelleri.com/vize-istemeyen-ulkeler and use 80 pagination. but all pages numbering show.
i add your codes on function.php (custom.php)
i try change content-single.php
” . __(‘Pages:’, ‘virtue’), ‘after’ => ”)); ?>
and several codes
‘next’, ‘previouspagelink’ => ‘ « Önceki ‘, ‘nextpagelink’=>’ Sonraki »’)); ?>
” . __(‘Pages:’, ‘virtue’), ‘after’ => ”));
?>
‘Pages’,
‘after’ => ”,
‘next_or_number’=>’number’,
‘previouspagelink’ => ‘previous’,
‘nextpagelink’=> ‘Next’
)); ?>
” . __( ‘Pages:’, ‘virtue’ ) . ”, ‘after’ => ”, ‘link_before’ => ”, ‘link_after’ => ” ) ); ?>
<?php wp_link_pages('before=&after=&next_or_number=number&pagelink=page 5′); ?>
” . __(‘Pages:’),
‘after’ => ”,
‘next_or_number’ => ‘next_and_number’, # activate parameter overloading
‘nextpagelink’ => __(‘Next’),
‘previouspagelink’ => __(‘Previous’),
‘pagelink’ => ‘%’,
‘echo’ => 1 )
); ?>
but dont working.
just i try resolved css styling.
.page-nav { font-weight: 900; margin-left:2.2em; margin-top:1.1em; font-size: 20px; line-height: 250%;} .page-nav a { border-radius:5px; padding:.3em .3em; font: 20px; background: #000; font-weight: 900; color: #fff; margin:0 .2em;}.page-nav a:hover { background:#cc0000;}
and this working
* Pagination – Global styles for both archives and Page-Links (in posts and pages)
*/
.pagination {
clear: both;
margin: 40px 0;
}
.post-type-archive-portfolio .pagination {
padding-left: 80px;
padding-right: 80px;
}
.archive-pagination ul li,
.archive-pagination a span.custom-page-links,
.archive-pagination span.custom-page-links {
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 8px 12px;
float: left;
margin-right: 5px;
min-width: 35px;
text-align: center;
}
.archive-pagination ul li,
.archive-pagination a span.custom-page-links,
.archive-pagination span.custom-page-links,
.archive-pagination ul li a {
color: #fff;
}
.archive-pagination ul li.active,
.archive-pagination ul li:hover,
.archive-pagination span.custom-page-links:hover,
.archive-pagination > span {
background-color: #e5554e;
}
.archive-pagination ul li,
.archive-pagination a span.custom-page-links {
background-color: #333;
}
.pagination i {
padding-bottom: 1px;
vertical-align: middle;
}
.pagination i.fa-chevron-circle-left {
margin-right: 5px;
}
.pagination i.fa-chevron-circle-right {
margin-left: 5px;
}
how is make it
First <> Last>>>
etc.
please help me,
thank you for helping.
Tony Eppright says
Hi Mike,
Thanks for your comment! Sure…depending on what you want to do, you can change the code in the first block above, line 21/22 nextpagelink or previouspagelink.
If you get stuck on this, let me know more details and I’ll do my best to help!
Tony
Mike says
Hi Tony,
I just saw your reply to my question from a few months ago. I thought I would get an email notification when a response get posted, but maybe not.
I will try out your suggestion when time permits.
I have another question.
How can I have the “next page” “previous page” button at the top and bottom of my post?
Also, if I want to shift the location of the buttons, is it a matter of assigning “margin” to the CSS style sheet?
Thanks again.
I’ll make sure I will visit this site again so that I won’t miss your response.
Mike
Sameer Pardhi says
I tried this code and it works great, but the problem is the place of the pagination on my website is something like this 2 PRE PAGE 1 3 NEXT PAGE Can you tell me how to change it to PRE PAGE 1 2 3 NEXT PAGE ??? Thank You
Tony Eppright says
Hi Sameer, any chance you can email a link for the site so I can take a look? It sounds like it might be a css conflict, but hard to say without seeing it. My email is [email protected].
Thanks!
Lauren Gray says
Thanks for sharing! I was able to style my pagination like archive pages, plus I liked your idea to add prev/next text! Cheers, Lauren
Tony Eppright says
Hi @oncecoupled:disqus…thanks so much for the nice comment 🙂 I’m happy that you found it useful! I like it because it keeps consistency with the rest of the site. Your website looks great, btw. Thanks, Tony
Jyoti khatri says
@alphablossom:disqus I m unable to style pagination like archive page. I have attached screenshot. Please guide. Thanks.
Tony Eppright says
Hello, would you be able to post a link (or email me via the contact form) so I can take a look? CSS classes might vary based on your theme and would need to be adjusted to match your theme.
Do you mean only the page numbers are showing in your content, while the previous page/page numbers/next page are showing correctly?
Jyoti khatri says
The link for previous screenshot is https://2beingfit.com/super-effective-anti-cellulite-arm-slimming-exercises
and on home page the post pagination also displays page number like this. The site link is 2beingfit.com.
Thanks.
Tony Eppright says
Hi…You have the right click disabled so I’m not able to look at your code to help.
Jyoti khatri says
Thanks, I have added conditional statement to remove post pagination from home page. This has solved my problem. 🙂
Tony Eppright says
Great, glad to hear you got it sorted!
zorzar says
Hi Tony Please help me,
i wanted this code. i find here but not working. can you help me?
i post (gallery type) one post sehirotelleri.com/vize-istemeyen-ulkeler and use 80 pagination. but all pages numbering show.
i add your codes on function.php (custom.php)
i try change content-single.php
‘
‘ . __(‘Pages:’, ‘virtue’), ‘after’ => ‘
‘)); ?>
and several codes
‘next’, ‘previouspagelink’ => ‘ « Önceki ‘, ‘nextpagelink’=>’ Sonraki »’)); ?>
‘
‘ . __(‘Pages:’, ‘virtue’), ‘after’ => ‘
‘));
?>
‘Pages’,
‘after’ => ”,
‘next_or_number’=>’number’,
‘previouspagelink’ => ‘previous’,
‘nextpagelink’=> ‘Next’
)); ?>
” . __( ‘Pages:’, ‘virtue’ ) . ”, ‘after’ => ”, ‘link_before’ => ”, ‘link_after’ => ” ) ); ?>
&after=
&next_or_number=number&pagelink=page 5′); ?>
‘
‘ . __(‘Pages:’),
‘after’ => ‘
‘,
‘next_or_number’ => ‘next_and_number’, # activate parameter overloading
‘nextpagelink’ => __(‘Next’),
‘previouspagelink’ => __(‘Previous’),
‘pagelink’ => ‘%’,
‘echo’ => 1 )
); ?>
but dont working.
just i try resolved css styling.
.page-nav { font-weight: 900; margin-left:2.2em; margin-top:1.1em; font-size: 20px; line-height: 250%;} .page-nav a { border-radius:5px; padding:.3em .3em; font: 20px; background: #000; font-weight: 900; color: #fff; margin:0 .2em;}.page-nav a:hover { background:#cc0000;}
and this working
* Pagination – Global styles for both archives and Page-Links (in posts and pages)
*/
.pagination {
clear: both;
margin: 40px 0;
}
.post-type-archive-portfolio .pagination {
padding-left: 80px;
padding-right: 80px;
}
.archive-pagination ul li,
.archive-pagination a span.custom-page-links,
.archive-pagination span.custom-page-links {
cursor: pointer;
display: inline-block;
font-size: 16px;
padding: 8px 12px;
float: left;
margin-right: 5px;
min-width: 35px;
text-align: center;
}
.archive-pagination ul li,
.archive-pagination a span.custom-page-links,
.archive-pagination span.custom-page-links,
.archive-pagination ul li a {
color: #fff;
}
.archive-pagination ul li.active,
.archive-pagination ul li:hover,
.archive-pagination span.custom-page-links:hover,
.archive-pagination > span {
background-color: #e5554e;
}
.archive-pagination ul li,
.archive-pagination a span.custom-page-links {
background-color: #333;
}
.pagination i {
padding-bottom: 1px;
vertical-align: middle;
}
.pagination i.fa-chevron-circle-left {
margin-right: 5px;
}
.pagination i.fa-chevron-circle-right {
margin-left: 5px;
}
how is make it
First <> Last>>>
etc.
please help me,
thank you for helping.
Tony Eppright says
Hello! Do you mean that you put 80 times to break up a long page?
As far as I know, this is not meant for that many page breaks, so it doesn’t work like normal pagination where it will show 1,2,3….86,86,88. I’ve never thought about that and not sure there’s an easy way to do that.
I think if you have to break a post into 80 pages, you’re better off separating them into separate posts as it would be hard for anyone to navigate to any point on that page.
If you look at the codex, there’s no provision for that so I’m afraid I can’t help with an easy solution https://codex.wordpress.org/Template_Tags/wp_link_pages
It may be possible, but it would be a complete separate function and I don’t think using the tag would be helpful.
You might be able to do it using “nth of type” CSS pseudo-selectors:
https://css-tricks.com/how-nth-child-works/
https://css-tricks.com/almanac/selectors/n/nth-last-child/
You can try to use this to only display the first xx links and the last xx links, and set all else to display none.
Take a look at that and if you get stuck let me know and I’ll see if I can put something together for the CSS.
zorzar says
hi Ben,
thank you respond.
i use this code.
`
/* posts_nav_link( ‘ · ‘, ‘previous page’, ‘next page’ ); */
`
and result.
Meghan Cooper says
Thanks for tutorial, I did everything but for some reason everything is backwards. Next Page 19…4, 3, 2, 1 Previous page. It’s wacky! https://jamonkey.com/category/reviews/page/2/
Tony Eppright says
Hi Meghan, It looks perfect when I look at it in the mirror 🙂
You have “float: right;” in your style.css for .archive-pagination ul li. Change that to “float: left;” and that will fix the issue.
It will left align the whole thing…if you want it centered you’ll need some additional CSS. Let me know if you have any issues and I’ll be happy to help.
Meghan Cooper says
That worked. The Font Awesome icons aren’t loading but I’m trying to troubleshoot that on their website.
Any tips for moving the Post pagination (page-links) above the related posts section?
Meghan Cooper says
Nevermind, I figured it out! Thanks!
Tony Eppright says
Hi Meghan,
Glad that helped, and glad to hear you figured out how to move it where you wanted!
Johnny Chen says
Honestly this is exactly what I’ve been looking for for aqges. All these wordpress plugins but nothing can do something as simple and elegant as this. Thank you!
I’ve implemented on my site and there seems to be some issues with the ordering as you can see from the pic (taken from the second page). Any ideas??
https://johnnyafrica.com/48-hours-berlin-germany/
Tony Eppright says
Hey @johnchen86:disqus, glad to hear this was helpful. Cool blog…I love traveling too, looks like you’ve been some amazing places!
If you add “float: left;” to your .pagination a class it should fix the issue for you.
Let me know if you have any issues with that.
Johnny Chen says
Hey thanks for the comments! I’m a big noob with css. So I’m adding
float: left;
to your css code? So something like?
/*
* Pagination – Global styles for both archives and Page-Links (in posts and pages)
*/
.pagination {
clear: both;
margin: 40px 0;
float: left;
}
Tony Eppright says
after .pagination add a new rule for:
.pagination a {
float: left;
}
You can remove the one you added above and add this instead.
Johnny Chen says
Hey Tony, one more one. I just installed a related posts plugin and it’s currently positioned above the pagination. Any way to reverse the order?? thanks.
Tony Eppright says
Hey Johnny,
I’m not familiar with that plugin, so not sure how it’s added but my guess is that it uses the_content filter. f so, you should be able to put together a function to remove the pagination and use the_content filter to add it before Yuzo.
Take a look at this article https://pippinsplugins.com/playing-nice-with-the-content-filter/…as well as the Codex https://codex.wordpress.org/Function_Reference/the_content
Johnny Chen says
You’re a legend man. Thanks again!
JohnnyAfrica says
Hey again Tony, I’ve changed my theme and this was one of the first edits I made sure to make. I’m having a problem now that the tag cloud is on the same line as the pagination. Any ideas?? Thanks!
Tony Eppright says
Hey @johnchen86:disqus, I took a look at your site but it looks like you went back to the original pagination for now, so couldn’t look at the code as show above.
It should be a matter of setting your .tagcloud to clear the pagination. Maybe using ‘float: left, width: 100%;’ or you can tap in to the existing genesis clear styles. If you can set it up for me to look at I can be more specific.
JohnnyAfrica says
AH sorry TOny, the damn cloudflare and its caching. I just cleared all cache so it should be good now.
Here’s the tag cloud css code
/* Tags
————————————- */
.tagcloud { margin: 0 0 -6px -0; }
.tagcloud a {
padding: 4px 11px;
display: inline-block;
background-color: #f2f2f2;
color: #808080;
margin: 0 2px 6px 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
text-transform: uppercase;
font-size: 12px;
}
.tagcloud.inpost {
margin:0px;
}
.tagcloud.inpost li { display: inline; margin-right: 10px}
.tagcloud a:last-child {margin-right:0;}
.tagcloud a:hover {
background-color: #3685cf;
color: #fff;
}
.footer-widget .tagcloud a { background-color: #282828; color: #fff; }
.footer-widget .tagcloud a:hover { background-color: #3685cf }
Tony Eppright says
No worries…this should do it for you:
.pagination,
.tagcloud {
display: block;
overflow: hidden;
}
The new site looks great!
JohnnyAfrica says
Thanks TOny! Sometimes you ened to switch up the themes on your blog to give you that new motivation. ALso, your code worked and you are still a legend 🙂
Tony Eppright says
Exactly! I’m in the process of a complete redo on my site as well.
Glad the code helped…happy travels 🙂
Inspiredly Written says
Thank you so much for this post. It was also exactly what I needed. You successfully put everything needed in one place.
Tony Eppright says
Thank you, glad to be of help!
Venkat N says
Hi Tony,
Thanks so much for providing information. I have added all the code and was able to get everything right except few issues.
The numbers and pages are not in same order as shown below image.
Can you help me to sort this out.
Regards,
Venkat.
Tony Eppright says
Hi @venkat_n. It’s hard to say without seeing the page. Try adding “float: left;” to the links, span.custom-page-links. Your classes/markup might be slightly different, so may need to adjust.
If you can share a link, I can better help.
Brock says
Just what I was looking for. Thanks!
Tony Eppright says
awesome @disqus_uZ01qqYfFc:disqus …glad you found it helpful!
Binh Nguyen says
Awesome! Thank you so much Tony Eppright.
Tony Eppright says
My pleasure @disqus_8lXExs1Zh2:disqus! Glad it was useful 🙂
Mani Teja says
Page Nav is showing after the sharing and related posts,
how to move it up
Tony Eppright says
Those are usually added to your page using the_content() filter:
https://codex.wordpress.org/Plugin_API/Filter_Reference/the_content
If you want to move above, I think you’d have to write a custom function to remove the page nav, then re-add it using a higher priority so it displays before those.
Sandra says
Great post! I love the styling and ‘Previous’ ‘Next’ buttons. How can I remove the page numbers in-between? I just want ‘Previous’ and ‘Next’ buttons, with no individual page numbers. Thank you!
Sandra says
Just figured it out … nevermind … thank you!
Tony Eppright says
@disqus_qgLv6ItSwR:disqus awesome, glad you got it sorted out!
gjevor says
can you please tell me how you did that ?
Summase AS says
Hi Tony, is split post cause duplicate content? Thanks
Tony Eppright says
Hey @summaseas:disqus , good question. I don’t use it much, but it can cause duplicate content.
I’m using WordPress SEO by Yoast, and it adds rel=”next” and rel=”prev” to the head section, so it takes care of the duplicate content issue:
https://yoast.com/rel-next-prev-paginated-archives/
Not sure about other SEO plugins. If you’re not using a plugin that takes care of it, you would have to add a function to your theme to take care of this.
Hope that helps!
Dylan says
Hi Tony, I entered that code into my style.css file and I’m not having any luck with it. I entered it under the “pagination tab” and it’s not working. I even entered it at the very top and that wasn’t working. I’d be greatly appreciated if you could help me out!
Tony Eppright says
Hi @disqus_ximwWEVIFG:disqus, I’d be happy to help if I can. Can you send me a link to your site, and make sure you still have the code so I can take a look? You can either post your link here or email [email protected].
Dylan says
It’s all straightened out now! I appreciate all the help Tony! Can’t thank you enough!!!
gjevor says
how can i do so i have just next and previous , i do not want to have the numbers in between. Can you help me ?
Tony Eppright says
Hi @gjevor:disqus, you can do that by using only the first function https://gist.github.com/AlphaBlossom/d9724e2fa687ede868a2#file-wp-link-page-args-php, and changing “number” to “next”:
‘next_or_number’ => ‘next’,
You can change the markup any way you’d like (remove span, etc). Let me know if you have any issues.
gjevor says
Thank you very much @Tony Eppright , it worked 🙂
Tony Eppright says
You’re very welcome @gjevor:disqus…glad it’s working for you!!!