Making WordPress Navigation more Usable through Pagination Patterns

An out-of-the-box WordPress installation provides traditional “previous – next” navigation for paging through lists of posts, as do the vast majority of the freely available WordPress themes. These little ‘previous’/’older’ and ‘next’/’newer’ links, that typically reside at the foot of a list of a WordPress posts page, are often the user’s only means of browsing archived content, and navigating your way through a very large set of such listings can quickly become cumbersome with this navigation method.

Pagination offers a more usable mechanism for navigating through a very large set of data, by providing direct access to content beyond the current page.

Smashing Magazine has provided some simple guidelines for creating usable pagination:

• Provide large clickable areas
• Don’t use underlines
• Identify the current page
• Space out page links
• Provide Previous and Next links
• Use First and Last links (where applicable)
• Put First and Last links on the outside

Although I’m admittedly far from a being an expert in this area, I humbly suggest an eighth guideline:

• Provide a subset of the full paged set centering around the current page

This eighth guideline is exemplified by the pagination pattern employed by Flickr on its photostream pages.

To illustrate, a pagination control that encompasses the above guidelines, providing links to the first, previous, next, and last pages and centering on the current page being viewed might resemble the following mockup:

There are a myriad of variations of pagination patterns along this theme available, and you could do worse than start looking in the Yahoo! Design Pattern Library for some inspiration.

Anyway, I digress…

Any intrepid WordPress theme developers out there may be interested to learn that we’ve developed a little plugin for WordPress, tentatively named ‘Proper Pagination’, that intends to ease the creation of pagination controls for WordPress listings pages.

Inspired by the WordPress Loop and WP_Query, this plugin attempts to stay out of the theme developer’s way, allowing her to create the markup needed by providing ‘template tags’ such as pp_has_pagination, pp_the_pagination, pp_the_first_page_permalink, pp_the_last_page_permalink and so on (pp_ is a prefix we use to effectively ‘namespace’ the global functions defined by this plugin).

A full list of the template tags, along with their respective descriptions, follows…

• pp_has_pagination — determines whether the current ‘view’ has any pagination to display, i.e. whether the content being browsed spans more than 1 page
• pp_the_pagination — initiates the pagination context, should be called at the beginning of each loop iteration
• pp_rewind_pagination — resets the pagination context, so that the pagination loop can be iterated over multiple times
• pp_is_current_page — for use in the pagination loop, returns a boolean indicating whether the current loop iteration is for the current page
• pp_has_previous_page — for use in the pagination loop, returns a boolean indicating whether there is a previous page, e.g. when at page 1, there is no previous page
• pp_has_next_page — for use in the pagination loop, returns a boolean indicating whether there is a next page, e.g. when at page N of N, there is no next page
• pp_the_page_permalink — for use in the pagination loop, echos the permalink for the current page
• pp_the_previous_page_permalink — for use in the pagination loop, echos the permalink for the previous page
• pp_the_next_page_permalink — for use in the pagination loop, echos the permalink for the next page
• pp_the_first_page_permalink — for use in the pagination loop, echos the permalink for the first page
• pp_the_last_page_permalink — for use in the pagination loop, echos the permalink for the last page
• pp_the_page_num — for use in the pagination loop, echos the page number of the current page being iterated over

Additionally, here’s an example of how you might arrange those splendid template tags to achieve the desired pagination effect:

<?php if (pp_has_pagination()) : ?>
		<div class="pagination">

            <!-- the previous page -->
            <?php pp_the_pagination(); if (pp_has_previous_page()) : ?>
                <a href="<?php pp_the_previous_page_permalink(); ?>" class="prev">newer stories</a>
            <?php else : ?>
                <span class="current prev">newer stories</span>
            <?php endif; pp_rewind_pagination(); ?>

            <!-- the page links -->
            <?php while(pp_has_pagination()) : pp_the_pagination(); ?>
                <?php if (pp_is_current_page()) : ?>
                    <span class="current"><?php pp_the_page_num(); ?></span>
                <?php else : ?>
                    <a href="<?php pp_the_page_permalink(); ?>"><?php pp_the_page_num(); ?></a>
                <?php endif; ?>
            <?php endwhile; pp_rewind_pagination(); ?>

            <!-- the next page -->
            <?php pp_the_pagination(); if (pp_has_next_page()) : ?>
                <a href="<?php pp_the_next_page_permalink(); ?>" class="next">older stories</a>
            <?php else : ?>
                <span class="current next">older stories</span>
            <?php endif; pp_rewind_pagination(); ?>

		</div>
<?php endif; ?>

The template tags on offer by this plugin provide the theme developer with an unlimited array of possibilities for marking up the pagination control in a semantic manner.

If you fancy taking the plugin for a little spin, feel free to grab it from our GitHub repositorythe official WordPress plugin repository, and do the usual with it (yep, upload to wp-content/plugins, unzip, and enable!).

As always, we welcome any feedback or comments in the section below…

Steve wrote this on 27.07.09 – 9 comments
It's filed in the Design, Development, User experience box

9 responses

1. On July 28th, 2009 at 6:37 pm, Mark Kirby responded:

   Hey guys,

   Great plugin – going to play with it later on a project I’m working on. Only thing I would add, if you haven’t already is you should put in the Plugin repository, we had great feedback within blog posts when we did this with a simple plugin developed at ribot.

   Cheers again.

   Mark

2. On July 29th, 2009 at 11:00 am, Steve responded:

   Thanks for the suggestion Mark, I’ve submitted the plugin to the official repository, just waiting for it to be approved now!

   Good luck with the project!

3. On July 29th, 2009 at 4:21 pm, baron responded:

   Works great, thank you

4. On August 4th, 2009 at 8:12 pm, Krystal responded:

   I’m working on a project where I want to display a summary of other page content along (at the bottom) with the actual content of that page. I use a WP_Query to get those extra content at the bottom. I want to create a pagination for those summary content but I didn’t seen to be able to with your plugin. So I’m wondering if there’s any way I can do so?

5. On August 5th, 2009 at 1:05 pm, Steve responded:

   Hi Krystal, yes this should be possible, I’ve put a code snippet on pastebin showing how this _should_ work: http://php.pastebin.com/ffe9af6

   Although I’ve not tested it myself, this should hopefully give you an idea!

6. On August 27th, 2009 at 9:45 pm, zietguest responded:

   Thanks great plug in.

   I adapted it a bit so that could add “Current page of Last Page” to the loop.

   /**
   * For use in the pagination loop, echos the last page
   */
   function the_last_page() {
   echo $this->max_pages;
   }

   
// pp_the_last_page
if (!function_exists('pp_the_last_page')) {
function pp_the_last_page() {
global $pp;

   return $pp->the_last_page();
}
}

7. On August 27th, 2009 at 9:48 pm, zietguest responded:

   Here is the html I used to achieve the pagination effect on http://ilovetypography.com

   HTML:
   

   Page of

   <a href="" > « First

   « First

   <a href="" > «

   «

   <a href="">

   <a href="" > »

   »

   <a href="" > Last »

   Last »

   AND THE CSS

   
#pagination { margin-bottom:20px; clear:both; width:640px; height:30px; }
#pagination ul { border:0; padding:0; margin:0; clear:both; }
#pagination li { border:0; margin:0; padding:0; font-size:11px; list-style:none; margin-right:2px; }
#pagination li a { border:solid 1px #9aafe5; margin-right:2px; }
#pagination .previous-off,#pagination .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination .next a,#pagination .previous a { font-weight:bold; }
#pagination .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination li a:link,#pagination a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination li a:hover { border:solid 1px #0e509e; }

   Thanks this is a great plugin and should come as standard on wordpress

8. On September 4th, 2009 at 3:08 pm, schwooba responded:

   Hey zietguest. I like your pagnation setup! What is the template tags or php code you use in your template? I’m still learning the details of php…thanks!

9. On September 14th, 2009 at 2:09 pm, Steve responded:

   Hey guys, I’m going to close comments on this post now, if you want to continue the discussion then please head over to this Google Group: http://groups.google.com/group/wp-proper-pagination-plugin

   I think it will be easier to handle the type of discussion that’s evolving around this plugin over there.

   Thanks for your interest. :)