If you have been trying to figure out how to add support for multi-page posts in WordPress that have pagination buttons at the end of each page that look like this:

then look no further than this post!

The screenshot you see above is actually the exact pagination style we use for long posts that we break into multiple pages on this site and we got the code after 3 hours of searching from Matthias Pospiech’s blog.

NOTE: We are not using the very popular WP-PageNavi plugin in this tutorial, because that adds support for paging posts on the front page of your site, not paging long, individual posts that have been broken up using the WordPress’s nextpage support. We also found no intuitive way to modify the WP-PageNavi plugin to do what we wanted, and Lester Chan has stopped working on his excellent collection of WP plugins unfortunately.

Matthias actually documented a much more complicated process than we needed, so we extracted the useful bits that we utilized to add pagination support, and are presenting it here for anyone else finding this page via Google, pulling their hair out trying to figure this out like we were.

Also, we are sorry for the odd mish-mash title of keywords; this problem is referred to in so many different ways: “multi-page posts“, “how to split long posts into multiple pages“, “Why doesn’t nextpage work?!“, “Page-Link support?” and so on and so on. We wanted to choose a title that people could identify easily.

Alright, let’s get started!

Break Long Posts into Multiple Pages

As it turns out, WordPress already supports this functionality (for a while now) via the “Page-Link tag“:

<!-- nextpage -->

Using that marker anywhere in your story (you have to type it in from the HTML editing mode) WordPress will know to stop rendering the story at that point and divide the following contents into individual pages – accessed by appending a “/{PAGE_NUMBER}/” argument to the URL when clicked, like “…/my-story/” becomes “…/my-story/2/“.

We strongly recommend installing the NextPage Buttons WordPress plugin from Shawn Parker to make your life easier in this regard. It will add a button into the toolbar for inserting a <!– nextpage –> element:

Unfortunately, not a lot of WordPress themes actually support noticing this and rendering a pager at the bottom of posts; even the lauded WooThemes seem to be missing this support. At least from Canvas.

UPDATE #1: In true Woo-fashion, they have added support for Pagination. This is why I love buying their themes.

NOTE: The pagination support you will find for WooThemes via their support forums is paging stories on the front page of the site, not actual pagination support for longer stories broken up with the <!– nextpage –> snippet.

And if you do have a theme that notices it, out of the box the pagination renders like this:

Because of this omission it is up to us to add this support manually. Good thing we are brave, right!?

Pagination Support – The CSS

There are 2 parts to adding the pager at the end of long stories:

The CSS to style the list of pages so it looks nice. I happen to like the simple “box” view we use.

Modification to the single.php file to actually insert the page list at the end.

Let’s start with the CSS first, because it’s the easiest.

As mentioned above we are not using WP-PageNavi (that plugin does something else), so when we went to Matthias’s page, we snagged all the CSS style classes prefixed with the name “.pagenumbers“; the list of styles ends up looking like this:

You can take those and copy them right into your styles.css near the bottom or if you have a custom.css, that is better yet (to avoid loosing the changes if you update your theme).

You can of course modify those styles to suite your needs, but out of the box it will make the pagination buttons at the end of the story look like the screenshot at the top of this tutorial.

Pagination Support – The PHP Code

Now that we have successfully added the styling we needed to not make the styles look too plain, we need to modify our theme to tell WordPress to crap out the list of pages for a story that is broken up into multiple pages.

What you will want to do now is edit the template used to render individual posts, that happens to be single.php, displayed as “Single Post” in the admin interface:

I’ve blurred out all the extraneous, theme-specific code to make it easier to find the important parts. We’ll take this step-by-step:

Find the <div class=”entry”> block, this is the <DIV> that contains the post body.

Find the <?php the_content(); ?> code snippet, this is where the actual text from your post is inserted into your template from the database.

Directly under the line you found for #2 above, we are going to put the following snippet of markup + PHP script:

The WordPress API call wp_link_pages tells WordPress to render a block of HTML linking to the additional pages of a post. The additional complicated looking stuff are just the prefix (1st arge) and suffix (2nd arg) content you want the function to output to the page (in our case, some paragraph markers) and then lastly, how you want the page links to look (numbered pages or “Next” text to click).

Now save your changes to your template.

REMINDER: If you use a caching plugin like WP Super Cache or W3 Total Cache, make sure to clear the caches completely so you aren’t accidentally looking at old page HTML.

Conclusion

Now that you’ve made your changes to your template, go edit a post and add the <!– nextpage –> marker (remember, via the HTML view, or using the button in the toolbar only), save the post then view it and you should see a list of pages at the bottom of the post.

I had some problems pasting your php code in my template when I copied and pasted, until I realized that I had a single curly quote instead of a straight quote mark in the php code. Once I switched the quote marks everything works great. Nice tutorial, thanks!

That’s the wrong snippet of code — I’m not actually sure where you got that snippet from, I don’t use that in the article above.

Did you give the article a try?

CLARIFICATION: By “wrong” I just mean I don’t know what the snippet of code you provided does, in the article I use the wp_link_pages function to get the paginated values, I don’t think the_content function that you are using does anything with pagination, I have no idea why it works at all to be honest.

Oh, hmmm (it is scrubbing HTML for safety reasons, makes it hard to post code directly as-is). If you want to post your single.php file for me somewhere I can take a look — you can use http://pastebin.org/ to post the code then give me a link to look at.

Also be sure to include an example page where it works, and an example page where it doesn’t (links to your site) so I can take a look and see what’s up.

QQ: On the pages where it doesn’t work (you said it works 1/2 the time) does the WHOLE post show, or is it truncated right at where you put the nextpage marker correctly?

You mentioned when you click the pages (like 2 or 3) it just seems to refresh the current page, but does the URL to the story in your address bar change and append the /2 or /3 to the URL?

If NOT, can you try and do that manually and see if you see the 2nd and 3rd pages of the story? Just add “/2″ to the end of the URL, so it looks like:
“http://mysite.com/….someurl…/my-story/2″

Ah! I’m glad to hear that it’s working now. Overzealous writers can be a blessing and a curse

The site looks great, from the single.php code it looks like you are using a WooTheme, but the site looks so customized I don’t recognize it as any of the WooThemes, you’ve done a great job customizing!

Chris, thanks for catching that. I had to read and re-read that code snippet section 3 times before I saw the omission (it is in the screenshot, but not in the snippet) and my brain kept “seeing it” even though it wasn’t there.

Yep, that’s it. I have to say, I scoured the internet for hours looking for a solution like this and it was exactly what I was looking for. Thanks for posting the tut.

One thing that is still unclear to me though, and maybe to others, is exactly how to use the $args ‘nextpagelink’ and ‘previouspagelink’ functions for other options instead of just numbers. I’ve looked all over, but haven’t been able to find a written code example that follows the wp_link_pages part.

Stuart that is pretty major… does that Thesis plugin use Ajax to implement the pager control or is it actually insertin a-href elements in your page at the bottom of articles?

If it’s a-href them search engines SHOULD be indexing those pages.

If your site is a relatively low-traffic site, what might be happening is that Google (and whoever else) is only indexing what they find in the sitemap to save harvesting time and until the site gets more popular the crawler doesn’t spend more time on the site… I’m not sure, that is just a guess. You could try the Google Webmaster Tools to see if the harvester information gives you any indicators as to why those sub pages aren’t getting indexed.

Huh… never even thought to check that, good find. In my case we only have a handful of REALLY long articles so it’s not too big of an issue, but if we were to regularly start breaking up articles that is really important to know that.

Using my own advice and checking the Webmaster Tools I don’t see any harvest errors with those subpages so I’m not sure whats up.

That is odd that your theme is missing that… under Settings > Reading, what are the two drop down boxes set to? What ever is set in the Single Post box, that is the theme file you will need to edit to add paging.

We have to find the template that is being used to render the actual pages that you are trying to edit the style to… it is always “single.php” unless that has been changed somewhere in your setup, and you mentioned that single.php doesn’t exist… so it’s hard for me to figure out where it went.

page.php is used to render simple pages (without the story/comment structure) like the About page or Advertise page on this site… when you go to Appearance > Editor, down the right hand side, what is the actual PHP file listed for the “Single Post” category? That is the one you will want to edit.

Thank you for the great blog here on how to do this. I’ve been trying to figure out the best way to handle long posts. While I would like to use the page number approach, my concern is the bad rap this is getting for Google SEO. I’ve read that each page title is duplicated, as are the links to that page, so the Google Bots don’t like it. Is there a workaround for this? Is it true that this would harm page ranking? We don’t want to be penalized just because we’re trying to break up lengthy posts. The alternatives appear to be using tabs (the drawback being that tabs appear at the top and not the bottom of a post, so the reader has to scroll back up for the next section) or actually creating a new post for every page of the article and then using hyperlinks to navigate the post pages. Do you have any ideas or comments on this?

I have done this and pagination show up well on my page but when I click them, they keep landing on the same page. For example, “www.site.com/articles/” and “www.site.com/articles/2″ are exactly the same.

I am using the theme Skeptical by Woo themes and after editing the two css style sheets and single.php, I’m running into the issue where instead of my article being broken up into a few pages, it is showing my article as one long post.

Great tutorial and thanks for helping all of us out:-) I’m using Canvas by Woo themes too and wonder if you may be able to put something in writing up which deals with how to use pagination for posts with long comments using Canvas. That also has the numbered boxes like you discuss in this tutorial. Would appreciate any help or advice on how to handle that issue.

Gina, I *think* Canvas added paging after it’s release, I sent them an email about this post and I believe they integrated it directly into the theme. Are you not seeing the right behavior for multi-paged posts?

As for a tutorial specific to Canvas, I actually wrote this tutorial while I was modifying an earlier version of Canvas, so all the tags I mention as far as placement goes you should find right away in your canvas files.

However, can you help with a bit of code to help reduce the number of pages displayed? I have a single post, an article running 60 pages, and there are four rows of page link tabs stretching across the bottom! This is true on the blog home page as well. I’ve seen it in action on many websites. I’d like to shorten it, you know, like the left arrow for previous, right arrow for next, a few page numbers showing up, and ellipsis for the remainder.

I’m sure I’m not the only one who is lookiing for this. I’m not sufficiently acquainted with PHP to work it out, so I’m hoping you have the answer!

Das, that is too open ended of a question unfortunately. I am not familiar enough with that theme directly to have some copy-paste code snippets for you. Check with the author of the theme though, this can’t be the first time someone has asked, he might have a snippet for you ready to go.

I tried to add this functionality to my theme, but I encounter a problem, when trying to put it into my single.php file. I can’t find the . When I simply try to put the code as you can see in the linked image, it gives me an error:
Parse error: syntax error, unexpected (…) in line 15
here’s a link to a print screen of my admin page:http://imageshack.us/photo/my-images/854/screenya.png/
I’m really new to the wordpress thing, so probably I’m missing something.

Great, thanks this worked for me and a life saver, at first i had a php error after coping and pasting the code in the single.php file.
I had to rewrite the single and double quotes(i.e. copying and pasting retained some of the fonts of the code copied) in the code in order for it to work.

Syamsul, I have never worked with Thesis but I know it’s a really robust theme/platform… I imagine you have figured out how to do this by now (sorry I am replying late), would you mind coming back here and linking to the docs or tutorial you found that answered this question for you… or just how you got it to work?

I feel like there has to be a hook in the Thesis platform specifically for this…

Hi,
great post! i have been looking for this for a very long time now…the problem is that the page 1 2 thing comes at the very bottom of the page and is quite further down than the actual post. i fear that my readers might miss the next page and think the article is incomplete. Please give me some solution to this new problem. thnx for solving my previous one!

Trackbacks/Pingbacks

[...] Paginate lengthy content for usability, pageload, monetization and SEO reasons. With WordPress, you can make it easy for producers or editors to add designy items like pull quotes, icons and other custom formatting to enrich your visual storytelling and page readability. [...]