WordPress:Styling Page-Links
Did you know you could split a single post up into different web pages? Using the Next-Page Quicktag from the Write Post Panel, you can break a single post up into different web pages. Called the Page-link tag, place your cursor in the spot where you want a page break to appear in your post and click the Next-Page Quicktag. You can use it throughout a long post to make two, three, four, or more pages out of the single post. In your Post Editing textarea, it will looks like:
<!--nextpage-->
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:
Did you know you could customize these page links?
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) andnext - 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, soPage %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 WordPress: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 link_pages('To read this story, ', '. ',
'next', ' or you can read on to the next page',
'you can go back to the previous page'); ?>
If you were on page three of four pages, it might look like this:
Using the 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 link_pages('<p>Pages: ', '</p>', 'next', ' »', '« '); ?>
And it might look like:
- Note: You can only use extended characters or HTML character entities with link_pages() because the ampersand required to create the entity is seen by wp_link_pages() as the boolean "and" and the tag will not work. Try using the direct character instead of an entity.
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.