If you’re creating a design portfolio website in WordPress – why, yes, much like this one – you may well want to include a handful of shots from your Dribbble account in order to show off your skills.

Happily enough this is quite straightforward with a jQuery plugin called Jribbble created by Tyler Gaw. There’s a ton of options available for working with the Dribbble API, but here we’ll just concentrate on the simple task of pulling in a few recent shots from an account and displaying them on a template.

First you’ll need to register an application via your Dribbble account, and grab the secret token it’ll generate, which is a simple numeric string.

Once you’ve downloaded the Jribbble source from Github, you can grab the minified version of the necessary JavaScript file, and place it wherever you keep your scripts in your theme – I’ll presume you have a /js folder for this purpose.

Next, we need to make the site actually pull in this file, of course doing it the WordPress way with a proper register and enqueue. If you only plan to output your shots on one page, you can go further and wrap the call to your script in a template conditional – I’m planning to just show my shots on the ‘About’ page, so I’m making sure to only load the script when that particular template is in use.

// Load Jribbble
function lunamedia_theme_load_scripts() {
if (!is_admin()) {
if(is_page_template('page-about.php')){
// Register our Javascript
wp_register_script('jribbble', get_template_directory_uri() . '/js/jribbble.min.js', array('jquery'), false, false);
// Load our Javascript
wp_enqueue_script('jribbble');
}
}
}
add_action('wp_enqueue_scripts', 'lunamedia_theme_load_scripts');
view raw functions.php hosted with ❤ by GitHub

Now we’ve got the Jribbble script loaded, we just need to create an empty element to hold our shots, and invoke the plugin with the data we want back.

// Somewhere in your page template
<div id="dribbble-shots" class="row">
// Get yr shots from the Dribbble
<script>
(function($) {
$.jribbble.setToken('cdb5c7b401d3535c5c118372c4cbe86ea443b56cd80db11b2c559ac92d6a01cf');
$.jribbble.users('lukeburford').shots({per_page: 9}).then(function(shots) {
var html = [];
shots.forEach(function(shot) {
html.push('<div class="dribbble-shot col-sm-8">');
html.push('<a href="' + shot.html_url + '" target="_blank">');
html.push('<img src="' + shot.images.normal + '">');
html.push('</a></div>');
});
$('#dribbble-shots').html(html.join(''));
});
})( jQuery );
</script>
view raw page-about.php hosted with ❤ by GitHub

Remember to swap in your application secret token and set the username and number of shots you need. I’ve also wrapped a little Bootstrap markup around each shot for some quick and easy grid styling

And that’s it! You can see mine on The About Page, and if you so wish follow me on Dribbble.

Add Your Valued Opinion Here

Your email is never published nor shared. Required fields are marked *