How to paginate WordPress like Dribbble

During the development of the new Square One website I wanted to replicate the way Dribbble lets you paginate through shots. If you checkout a user on Dribbble there are two shots or thumbnails listed on the right hand side that will paginate the previous or next shot uploaded by the user. So I started to think about how I would go about this in WordPress, obviously over thinking how to create a function to get the next and previous page. As per usual the best place to start looking how to go about things in WordPress is the WordPress bible, Codex!

So before long I found there is already a core function that does this, say hello to get_previous_post and get_next_post. As its says in the Codex “Retrieve previous post that is adjacent to current post” Sweet, this is just what I needed! There are a couple of parameters but I won’t go into those for now, if you want to find out more go checkout the codex yourself.

How to paginate WordPress like Dribbble

Right so, if you assign the function to a variable then print_r the variable will output an object with lots of useful information, here is where we can pickup the ID of the next or the previous post:

[php]
<?php
$previous = get_previous_post();
print_r($previous);
?>
[/php]

in the browser you’ll print something like this:

[code]
WP_Post Object
(
[ID] => 5611
[post_author] => 6
[post_date] => 2012-11-17 18:39:55
[post_date_gmt] => 2012-11-17 17:39:55
[post_content]….
// all the other useful stuff
)
[/code]

So now we can grab the ID of the previous post and use a couple of other WordPress functions; namely get_permalink for the permalink to the previous post and get_the_post_thumbnail for the previous post’s featured image. Both these functions take parameters that we will exploit but I won’t go into that here you can check them on the codex get_permalink get_the_post_thumbnail

NB: for this to work correctly you need to have added theme support for post-thumbnails in your functions.php file like so:

[php]
add_theme_support( ‘post-thumbnails’ );
[/php]

Assuming that is the prerequisite you can either assign these functions to a variable or simply echo it out like this:

[php]
<?php echo get_permalink($previous->ID); ?>
<?php echo get_the_post_thumbnail($previous->ID, ‘thumbnail’); ?>
[/php]

So for the benefit of search engines and added SEO we should probably add a title attribute to the href so we’ll use the following to get that, remember all that useful information held in $previous = get_previous_post(); that was created earlier? This time we’ll add  a little security with esc_attr

[php]
<?php echo esc_attr($previous->post_title); ?>
[/php]

So, now we have all we need to build the markup, lets built the markup and include the php, yours might be different but this is what mine looked like because I am using inuit.css:

[html]

<?php
$previous = get_previous_post();
print_r($previous);
?>
<div class="float–left folio">
<a href="<?php echo get_permalink($prev->ID); ?>" title="<?php echo esc_attr($prev->post_title); ?>">
<?php echo get_the_post_thumbnail($prev->ID, ‘thumbnail’); ?>
</a>
</div>

[/html]

All being well you should now have something that you can use as I have done in our own portfolio. If you get any issues or questions please do leave a comment below.