Quick Tip: How to Implement Multiple Pages for your WordPress Posts and Pages

Quick Tip: How to Implement Multiple Pages for your WordPress Posts and Pages

on Jan 17th 2012 with 26 comments

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

Rollover to read this author's bio or click through to see a full list of posts by this author.

Ross Elliot is a computer tutor and freelance developer specializing in PHP, WordPress and Codeigniter. You can reach him here.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://themesumo.com Zoran

    Useful quick tip!

  • http://analteredreality.com Kevin

    Wow. I can’t believe I didn’t know this. Thanks Tom! You da man!

  • http://design4q.com feroc1ty

    I hate when some post have that feature… If you are going to implement please use ajax to load next page content.

  • http://www.ellahworks.com Rowela Alzona

    Quick and accurate! awesome thanks for sharing might be handy soon…!

  • http://www.ruturaaj.com Ruturaaj

    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…

    • http://thomasmaxson.com Thomas Maxson

      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.

  • Piet

    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:’),

  • Pingback: WP i18n | Multiple Posts and Pages by TutsPlus

  • http://www.paulund.co.uk Paul

    What’s the benefit of this feature apart from adding page impressions?

  • Pingback: Quick Tip: paginating Wordpress Posts and Pages » VC-TEL Team Blog

  • frank

    good tip, but google hate this!

  • http://www.adamjdesigns.info Adam

    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.

    • Japh Thomson
      Staff

      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.

  • Windo

    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.

  • http://laprogressive.com Sharon

    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.

  • Jose Gomez

    What about if i want to add custom page titles? something like

  • http://dev8ionstudio.net Omari Celestine

    I am not a WordPress developer but this is definitely an interring feature and serves well for extended articles, presentations and ebooks.

  • dj

    @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.’

  • http://thecodezombie.co.uk Jason

    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.

    • Japh Thomson
      Staff

      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!

      • http://www.iamchad.com Chad

        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.

  • Pingback: wordpress tip: next next next | Directory B (beta)

  • http://www.davidriveroll.com David

    Would this method use separate URL’s for each subpage? Or is it all under the same permalink?

    Thanks for the useful tip.

  • Pingback: WordPress Community Roundup for the Week Ending January 21 - Charleston WordPress User Group

  • Pingback: Как разбить запись WordPress на несколько страниц | Wordpresso

  • DJABHipHop

    how to i add a custom

  • Pingback: Як розбити статтю в вордпресс на сторінки | Surf with Acsy

  • http://fatihtoprak.com/ Fatih Toprak

    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 ?

  • http://www.caribbeanislandinfo.com John

    Thanks for the information! I needed it, because my post was getting too long!

  • jay

    Thanks for sharing,i didn’t know quick tag existed.

  • DEEPAK SINGH

    I’m using a related posts plugin. When I use the tag
    The multiple pages are displayed beneath the ‘Related Posts’.
    I would rather want them immediately after the post and not after the related posts. How could that be implemented ?

  • http://twitter.com/amiatEAD Ami & the EAD Team

    I love this functionality but have noticed odd behavior – when someone leaves a comment, it doesn’t return them to page/x – instead it returns them to page 1. Is this something you have seen as well? Thanks!