HOW TO: Paginate Post Content in WordPress

Have you ever written an article that was entirely too long for one page? Here’s a quick way to break that post up into multiple pages for faster page loading, more page views in your statistics resulting in higher CPM and more ad impressions (your visitors will typically get a new ad displayed with each page load), and a better experience for your readers.

Type your article like you normally would, all at once. When you’re finished, figure out where the breaking point (or points) should be and insert the following in HTML view:

<!--nextpage-->

Publish your article. You should see links to each of the pages of the article. You can manipulate the way they are displayed by modifying code in your single.php and style.css files.

In single.php, you should see a line of code that reads something like this:

<?php wp_link_pages(array('before' => '<p><strong>'.__('Pages','').':</strong> ', 'after' => '</p>', 'next_or_number' => 'next')); ?>

To stylize this section, change the <p> that follows the ‘before’ tag to <div id="postpagination"> and change the </p> that follows the ‘after’ tag with </div>. This will tell your file where to pull the styling from in your css file.

NOTE: If you would rather have the page numbers, you can change ‘next‘ (in red text) to ‘number‘ in the last part of the code. If you would like to change the text before the page links, replace Pages (in red text) with your own phrase.

In style.css, add:

#postpagination { font-family: Arial; font-size: 12pt; color: #000000; border: 1px #464646 solid; text-align: center; }

You can play around with the styling until you get the pagination appearance the way you want it. That’s it! Click here to see an example of the result with one page break.

One Response Comment

  • good to know I stumbled it so I can use it in the future

Leave A Comment

Please enter your name. Please enter an valid email address. Please enter a message.

Contact Us Today!

Complete the form below to receive a no-obligation quote!


    Name (required):
    Email (required):
    Web Address:
    Reason for contact:
    Who referred you?
    Additional information:

    Click here to confirm that you are human :)

    Subscribe via Email!

    * indicates required
    Powered by MailChimp

    Connect!