How to Paginate WordPress Posts

Applies to Version(s): Thesis 1, WordPress

Finishing a really long post?

Does it feel “too long” in terms of the scrolling your visitors will need to do?

You may want to consider “paginating” that 5,000 word monster article.

Pagination breaks posts into shorter segments using the <!--nextpage--> quicktag.

To avoid confusion, note that the <!--more--> quicktag is a related concept — but the more quicktag can only be used once on a given post, and “more” tends to be used as a lead-in for a post manually excerpted on the home page.

The <!--nextpage--> quicktag, by contrast, separates a post into as many URL units — as many “pages” — as you, the author, want.

Using “NextPage” also creates a visible set of numbers at the bottom of the content area.  If you have seven sections of a post, by using six <!--nextpage--> quicktags, you’d see pagination at the bottom of your post like so:

Paginate a WordPress Post into Seperate Pages - URLs

If your permalink looked like this: http://yoursite.com/my-post-name/ prior to pagination, it will still appear this way on the first section of the article.

However, each “nextpage” of your post will create an additional permalink extension.

Your fourth “next page” would look like this: http://yoursite.com/my-post-name/4/ — notice the /4/ makes this a unique URL.

Paginated links are “dofollow” by default.  However, excessive use of pagination is an SEO consideration — the same <title> is repeated on each paginated URL of your post — and links such as “2″ are not considered a prime use of anchor text.

In other words, while using the <!--nextpage--> quicktag can improve readability and increase average page view figures, pagination should be used with restraint to avoid dilution of PageRank — in other words, to maintain optimal SEO power.

As an additional note for Thesis users, if you a Thesis “post image” and <!--nextpage--> are used for the same post, your post image will appear at the top of each “paged post” URL.

The repetition of your post image is not necessarily a bad thing, and can help tie the paginated post together — but it’s a useful detail to know in advance.

Customizing and Styling the NextPage “Post Pagination”

You’ve got the concept of “splitting a post into multiple pages” (URLs) down.  But what if you want to change the text of “Pages:” to something else?

Maybe you’d like to add a solid CSS target for this area, which makes it easier to apply custom styles to paginated posts?

Let’s see if we can go from the look of the first “default nextpage quicktags” in the screen capture above to the following:

Example of CSS Styled NextPage WordPress Paginated Formatting

Above, the “2″ represents the current “page number” of the segmented post — this is the section the visitor is actively viewing.

The red “5″ demonstrates what your paginated “nextpage” quicktag links will do when a visitor hovers over the paginated links.

To format the “nextpage” section of text and numbers (as links) we can use a PHP filter.

In our filter below, the “Pages:” text will be replaced with “Sections –” instead. You can use your own preferred text, of course.  In this filter, we’ll also wrap the entire area in a class-defined div for CSS purposes.

To begin your nextpage “paginated links” makeover, add the following to your custom_functions.php file contents:

function custom_nextpage_links($defaults) {
$args = array(
'before' => '<div class="my-paginated-posts"><p>' . __('Sections &#151;'),
'after' => '</p></div>',
);
$r = wp_parse_args($args, $defaults);
return $r;
}
add_filter('wp_link_pages_args','custom_nextpage_links');

For the color and style, add this to your custom.css file contents:

.custom .my-paginated-posts {
font-size:10px; font-weight:normal; font-family:arial; }

.custom .my-paginated-posts p { font-size:1.4em; }

.custom .my-paginated-posts p a {
background:#E8E8E8; color:#000; margin-left:0.6em; margin-right:0.6em;
padding:0.5em 0.7em; text-decoration:none; }

.custom .my-paginated-posts a:hover { color:#fff; background:#7F1315; }

The combination of filter and CSS formatting takes the paginated “next page” navigational structure from this:

Default formatting of NextPage quickcodes

To the more refined “nextpage” look shown below:

Custom CSS Styling of WP NextPage Pagination Links

The selectors established can be used to further modify the design to your taste.

Now you know how to create multi-page posts — splitting longer posts into bite-sized units — and you know how to make the “nextpage” links look great, too!