WordPress.org

Languages: English • Português do Brasil • (Add your language)

Did you know you could split a single post up into different web pages by just typing <!--nextpage--> in your post? Called the Page-Link tag, place your cursor in the spot where you want a page break to appear in your post and type <!--nextpage--> (you need to use the text mode of the editor to do so). This technique can be used throughout a long post to make two or more pages out of a single post. Note: At one time there was a Next-Page quicktag button but it was deleted to reduce the clutter on the quicktag bar.

When you view your post on your site, the multi-page links appear as links at the bottom of the generated post and usually look like:

Examining the Page-Links Tag

The default look for the page-links is shown above. The web page you are on isn't highlighted as a link but shown as a solid number. If you do only a few multi-page posts, this might be all you need to have the reader continue reading the pages in sequence.

There are two template tags that may be used to style your page-links tag. The link_pages() and wp_link_pages() template tags. The link_pages() tag uses strings in quotes as parameters and the wp_link_pages() uses boolean phrases as parameters. Both do basically the same thing.

The default usage, shown above, for the wp_link_pages() tag is:

<?php wp_link_pages(); ?>

The parameters we'll be working with for the template tag are:

• before: Text to put before all the links. Defaults to <p>Pages:.
• after: Text to put after all the links. Defaults to </p>.
• next_or_number: Indicates whether page numbers should be used. Valid values are number (Default) and next
• nextpagelink: Text for link to next page. Defaults to Next page.
• previouspagelink: (string) Text for link to previous page. Defaults to Previous page.
• pagelink: Format string for page numbers. The  % in the parameter string will be replaced with the page number, so Page % generates "Page 1", "Page 2", etc. Defaults to %, just the page number.

You've seen the default look. Let's play with some other possibilities.

Changing the Look of Page-Links

By default, the page-links are in an HTML paragraph tag. Add a CSS class to the DIV section surrounding the paragraph tag and you have even more control over the look of the page-link tag.

The following use of the tag adds a DIV tag before and after the page-links, shows the word "Page" next to each page number, and when you are in the middle of the page order you will see the page number instead of the word "next", and lists the pages as shown below.

<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>

Let's give our style class "pagelink" a green color and italics:

Want to have more fun? Let's design these so they do more than just tell the reader "page 1".

<?php wp_link_pages('before=To read this story, &after=. &next_or_number=next
&previouspagelink=you can go back to the previous page
&nextpagelink= or you can read on to the next page'); ?> 

If you were on page three of four pages, it might look like this:

Using the wp_link_pages() you can add a extended character or character entity to replace the next and previous for an interesting look. Let's add the double right arrow » and double left arrow«.

<?php wp_link_pages(array('next_or_number'=>'next', 'previouspagelink' => ' &laquo; ', 'nextpagelink'=>' &raquo;')); ?>

And it might look like:

Note: When using extended characters or HTML character entities with wp_link_pages(), pass in the parameters an array instead of a string. In string query format, the ampersand required to create the entity is seen by wp_link_pages() as the string delimiter and will not work.

These are just a few samples and you can use your imagination to create a wide range of different styles and looks for your page links on your site or theme.