In case you are wondering what is pagination? It’s mechanism to break large quantity of data/text into pages for better usability and accessibility. For instance think you are searching for “Free blog tools” on Google, which will return around 35,500,000 results and if Goggle show you all the results in one single page-just guess how you will react? But they don’t, instead they break the results into several pages and you notice a numbered navigation link (ref: Fig. 1a) bellow each page for better navigation. Not only Google or other search engines but as well many top class web sites like New York Times, BBC so many others. Pagination is all about increasing usability where certain article turns into epic J After all when your user can navigate easily, your article/stories get more attention/affection or whatever you are after.

google_pagination
Fig 1.1

Now our issue is how can we bring that pagination to our WordPress blogs? There are several plug-in available on WordPress plug-in directory who do paginations together with other tasks. But for the sake of just pagination why add another plug-in, and total freedom of customization cannot be achieved if you use a plug-in. WordPress got very simple and straight forward built in template tags to take care of it, with a bit of CSS tweaks and a bit of theme file modification you can have your pagination the way you want, not the way I or someone else want.

I am sure you are aware of “<!–more–>” the WordPress quick tag that breaks a post into "teaser" and content sections. Just like that WordPress also got a quick tag “<!–nextpage–>”, the difference is it can be used any number of times in a post or pages, and each insert will "break" and paginate the post at that point. Ok so now that you know how to break your long posts or pages into multiple virtual pages, you should think how you can provide navigation for navigate through those sections.

template-edit

Once again WordPress developers did keep a readymade template tag wp_link_pages() {WP 2.1 above} or link_pages() {WP 2.1 bellow} which will give you hyperlinks to the paginated sections of the post/page. Here is the full anatomy of the wp_link_pages():

  1. <?php wp_link_pages('before & after & next_or_number & nextpagelink & previouspagelink & pagelink & more_file '); ?>

All the arguments are optional and string type. ‘before’ and ‘after’ contain the text and HTML tag to go at the beginning and end of the whole pagination navigation. Default is—‘<p>Pages:’ for before and ‘</p>’ for after. Other arguments are explained bellow:

next_or_number: Indicates whether page numbers should be used. Valid values are: number (Default) or next (Valid in WordPress 1.5 or after).

nextpagelink : Text for link to next page. Default to Next page. (WP 1.5 or after)

previouspagelink: Text for link to previous page. Default to Previous page. (WP 1.5 or after)

pagelink : Format string for page numbers. % in the string will be replaced with the number, so Page % would generate "Page 1", "Page 2", etc. Default is %.

more_file: Page the links should point to. Default is the current page.

Example usage:

  1. <?php wp_link_pages('before=<div id="pageination">Pages:&after=</div>&pagelink=%'); ?>

You can now use CSS styling to style up the navigation. So let’s get it over again—

  1. You put <!—nextpage–> quick tags (as many times as you need,wherever you need page breack) on the posts or pages that you require pagination.
  2. One time small tweak to your theme template files—index.php (main Index template), page.php(for pages) and single.php (for single posts). On all of the above mentioned template file locate <?php the_content(.. and add the default <?php wp_link_pages(); ?> or customized version of that next to it. ref: fig 1.2.
  3. If you wish to get some styling done, than edit your style.css and customize the css class/id you mentioned inside wp_link_pages above argument.

That’s about it, nothing more to do, a simple and easier way to use pagination in your WordPress blogs.

Leave a Comment

If you would like to make a comment, please fill out the form below.-(See Privacy Policy)

Name (required)

Email (required)

Website

Comments

Close
E-mail It