By default, WordPress has a function that allows you to split a single post or page into multiple pages. They’re called “Page-Links” and they’re useful if you want to split a long post into pages to make it easier to read.
To add a page link to your post, place your cursor in your editor and type:
[gist id=”d9724e2fa687ede868a2″ file=”page-link-tag.html”]
Place this where you’d like your page break to appear (make sure you switch to the “Text” tab in you visual editor).
The default appearance is very basic and will look something like:
Pages: 1, 2, 3
The result we’re going after is to style the Page-Links so that they look the same as our styled Genesis Pagination (you can see these on archive pages, etc):
The WordPress Codex for wp_links_pages page has some pointers on how to style the page links. We can use this to get us closer to where we want to be.
Add Styling To The Default Page-Links
Using the wp_link_pages_args filter, we can add this to our theme’s functions.php to style the Page-Links:
[gist id=”d9724e2fa687ede868a2″ file=”wp-link-page-args.php”]
(Please note, these examples include our custom css so they may not look the same in your theme. We will show the CSS we used to style these at the end of the post for reference)
You’ll notice one of the filter args is “next_or_number”. You can use either “next” or “number”, but not both. So depending you which you choose your Page Links will now look like one of these:
Page Numbers And Previous / Next Links for Page-Links
Getting closer, but we want to have both page numbers and “Previous Page” or “Next Page” links. After doing some research, I came across this post on Stack Exchange explaining that this option is not built in by default. Using the function from this post we can add “Previous Page” or “Next Page” along with the numbers:
[gist id=”d9724e2fa687ede868a2″ file=”wp-links-page-prev-next-number-links.php”]
The end result? Here is the actual Page-Link inserted. Click on Next Page or 2 to view the CSS used to style this:
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
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.
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
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
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
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!
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
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
@alphablossom:disqus I m unable to style pagination like archive page. I have attached screenshot. Please guide. Thanks.
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?
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.
Hi…You have the right click disabled so I’m not able to look at your code to help.
Thanks, I have added conditional statement to remove post pagination from home page. This has solved my problem. 🙂
Great, glad to hear you got it sorted!
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.
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.
hi Ben,
thank you respond.
i use this code.
`
/* posts_nav_link( ‘ · ‘, ‘previous page’, ‘next page’ ); */
`
and result.
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/
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.
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?
Nevermind, I figured it out! Thanks!
Hi Meghan,
Glad that helped, and glad to hear you figured out how to move it where you wanted!
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/
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.
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;
}
after .pagination add a new rule for:
.pagination a {
float: left;
}
You can remove the one you added above and add this instead.
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.
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
You’re a legend man. Thanks again!
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!
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.
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 }
No worries…this should do it for you:
.pagination,
.tagcloud {
display: block;
overflow: hidden;
}
The new site looks great!
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 🙂
Exactly! I’m in the process of a complete redo on my site as well.
Glad the code helped…happy travels 🙂
Thank you so much for this post. It was also exactly what I needed. You successfully put everything needed in one place.
Thank you, glad to be of help!
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.
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.
Just what I was looking for. Thanks!
awesome @disqus_uZ01qqYfFc:disqus …glad you found it helpful!
Awesome! Thank you so much Tony Eppright.
My pleasure @disqus_8lXExs1Zh2:disqus! Glad it was useful 🙂
Page Nav is showing after the sharing and related posts,
how to move it up
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.
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!
Just figured it out … nevermind … thank you!
@disqus_qgLv6ItSwR:disqus awesome, glad you got it sorted out!
can you please tell me how you did that ?
Hi Tony, is split post cause duplicate content? Thanks
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!
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!
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].
It’s all straightened out now! I appreciate all the help Tony! Can’t thank you enough!!!
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 ?
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.
Thank you very much @Tony Eppright , it worked 🙂
You’re very welcome @gjevor:disqus…glad it’s working for you!!!