There’s nothing worse than scrolling through a long post or page when it’s obvious that it should have been broken into a series of more easily-digested chunks. It’s very easy to accomplish in WordPress and more people should do it. Here’s how you can.
Quicktag your post
Simply write your post or page as normal and whenever you need to start a new page, use the <!–nextpage–> quicktag.
Below is a screenshot of a demo post divided into three pages with <!–nextpage–> quicktags.
That’s all you have to do to your posts or pages.
Edit your template
In your WordPress theme directory you’ll find single.php. This is the template responsible for displaying individual posts or pages. And it’s here that we need to tell WordPress to display paging links for our <!–nextpage–> quicktags.
In single.php (or perhaps loop-single.php, which is often called from single.php) you’ll find the WordPress loop which displays your post or page. Here’s a cutdown version of that loop
if (have_posts()) while (have_posts()) : the_post(); the_title(); the_content(); wp_link_pages(); endif; endwhile;
This loop displays the post or page title and the content, but notice the wp_link_pages function. This function displays
a set of page links as per the <!–nextpage–> quicktags you put in your post.
Here’s what our post looks like when displayed. We’re seeing page one with links to pages two and three.
It’s that simple.
Styling the page links
The default output of wp_link_pages is functional but pretty boring. But wp_link_pages also let’s us add before and after text to the default output so that we can target the paging links with CSS. Here’s the loop again with some default arguments as used by the Twenty-Ten WordPress theme.
if (have_posts()) while (have_posts()) : the_post();
the_title();
the_content();
wp_link_pages(array(
'before' => '<div class="page-link">' . 'Pages:',
'after' => '</div>'
));
endif;
endwhile;
And here’s what that looks like once we’ve applied some CSS to the page-link class:
Of course, you can go wild with styling in terms of color and size. Also, make sure to check out the arguments for wp_link_pages as they allow you to customize the paging output even further.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Ross Elliot
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Useful quick tip!
Wow. I can’t believe I didn’t know this. Thanks Tom! You da man!
I hate when some post have that feature… If you are going to implement please use ajax to load next page content.
Quick and accurate! awesome thanks for sharing might be handy soon…!
Is there any way to check if at all my certain Page is setup with NEXTPAGE to have multiple pages? The reason why I may need this is to make the “Pages” stuff conditional; in other words, “show Pages at the bottom only if needed”. Is it possible? With current proposed solution, there will always be “Pages: 1″ at the bottom for the page without any page-break. Please correct me if I’m wrong…
It already does the check for you and displays the navigation as needed. If your content is not paged, it will not insert this paged navigation.
Great tut! Would have been excellent if you’d have taken the time to internationalize the word “Pages”.
Not: ‘before’ => ” . ‘Pages:’,
But as Codex teaches: ‘before’ => ” . __(‘Pages:’),
What’s the benefit of this feature apart from adding page impressions?
good tip, but google hate this!
Great tip! I agree with the comment about the use of ajax, though. I would wrap the wp_link_pages function inside an ajax call. Also, isn’t single.php only used to display posts, not pages? I thought page.php was used for page output.
Good point, Adam. Probably for most uses, this is going to be a feature for posts rather than pages, but you would put it in page.php if you wanted pages to use it too.
Thanks a lot, almost forgot wp can have this feature. Will implement them for my long posts. Just wondering, might be readers would prefer all content in one shot, but I think again maybe would be better to not give them all at once.
Do you know if your multiple pages will be counted as “duplicate content” by Google? I have used a WordPress plugin that does something similar to what you are presenting. The outcome was that Google Webmasters Tools reported these pages as duplicate content. Each page had the same root url but all pages beyond the first page had a number added to the end of the url. Google used the url’s to determine the content was duplicated even though the actual text in the posts for pages 1 and 2 were in fact very different.
What about if i want to add custom page titles? something like
I am not a WordPress developer but this is definitely an interring feature and serves well for extended articles, presentations and ebooks.
@ross — With all the major issues added in the comments let’s see if I understand the situation:
1- The short code and function is built automatically into WP, AND if you are using ‘twentyeleven’ works out-of-the-box; otherwise you may need to add some code in the appropriate places;
1a- [In twentyeleven, the actual code is NOT in either single.php or post.php -> rather in the content-pages, content-single and content.php's - called from both of those first two]
2- However, as you gave it, the code is not international and will not automatically translate and should be altered (but we’re not sure cause the commentors reply might not have made it through Envato’s comment code parser completely);
3- Additionally, as implemented by WP, the code causes a page refresh which is annoying and can be disorienting to the user. It could/should be modified to use an ajax call, the actual code of which wasn’t given.
4- And lastly, as implemented by WP (and Google), using this paging system is seen as ‘duplicate content’ by the search engine and may be either: only counted as one page (not a problem) or ignored entirely (a problem) and possibly penalized in rankings (a BIG problem) if you use it a bunch.
On the surface, this type of function is valuable for people like me who write complete content instead of dummying down the web; however, it seems like it just may not be ‘ready-for-prime-time.’
DJ raises some pretty obvious potential problems with using this split-page approach.
For me, I have a problem with how easily you make the “splitting” look. Are you actually suggesting that I tell people to jump into HTML mode and add <!–nextpage–> ? For the <!–more-> tag we have a button on the Editor mode. Why is there no mention of creating similar functionality for page-splitting? It took me just a few minutes to realise that the TinyMCE Advanced plug-in already has this button in its toolbar arsenal.
As a developer who makes sites using WordPress, I’ve quickly learnt that there’s absolutely no point implementing something that asks too much of the client…they just won’t want to know.
Fair points, Jason and DJ. Also, there’s often more than one way to achieve something, and this is a quick tip to get you started.
I think some of the points you’ve both raised show there’s room for a more detailed tutorial on exactly how best to do pagination for posts with multiple pages though!
I for one would love to see a much more detailed tut on wp pagination. How to paginate both the main blog page loop as well as how to paginate a single post that is say 6000 words long and you wanted to split it up into multiple pages.
Would this method use separate URL’s for each subpage? Or is it all under the same permalink?
Thanks for the useful tip.
how to i add a custom
Great article. But i have a question. Could we get the just next page url ?
Like domain.tld/category/post.html/2 ? Is that possible ?