Dribbble is a community of web designers & graphic designers share small screenshots (shots) showcasing their work on current projects. It’s a well known source for design inspiration. If you visit dribbble regularly then you might have noticed the unique navigation system dribbble use to browse through shots. dribbble use two small image thumbnails each for previous and next shots instead of default previous and next text links. It’s interesting concept and looks very professional. So in this article I will show you how to replicate this feature on your own WordPress website.

It’s quite easy to create a post navigation like dribbble in WordPress because WordPress already provide tools for that. First of all, we will use get_previous_post() & get_next_post() to retrieve the posts IDs of previous and next blog post, then we will show post thumbnail for each navigation link with their URL. We have created a simple function for this navigation that you can call in your theme files to display post navigation like dribbble.

Simply paste this code snippet in functions.php file, it will be responsible for creating links for post navigation like dribbble.

// create post navigation like dribbble in wordpress
function wcs_dribbble_post_navigation( $html_id ) {
    global $post;
    $html_id = esc_attr( $html_id );
    $prev = get_previous_post();
    $next = get_next_post(); ?>
        <nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
            <div class="nav-previous">
                <a href="http://wpcodesnippet.com/create-post-navigation-like-dribbble-wordpress/<?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>
            <div class="nav-next">
                <a href="<?php echo get_permalink( $next->ID ); ?>" title="<?php echo esc_attr( $next->post_title ); ?>"><?php echo get_the_post_thumbnail( $next->ID, 'thumbnail' ); ?></a>
            </div>
        </nav>
    <?php
}

Now you can call this function in your theme files where you want to display this navigation.

<?php wcs_dribbble_post_navigation(); ?>

That’s it.

inspiration