Pinkman: Yay Jetpack!

If you visited this site in the past few weeks, you may have noticed a few changes. If you’re reading this through your RSS reader, come join us here. Oh, and get yourself a drink: it’s a long post! :)

I have experimented quite a bit with this blog: it all started with Joomla, then I discovered WordPress. After a little while, I decided to switch from WordPress to Jekyll to discover new things and learn more about Git. While this was fun, I missed a lot of WordPress features, and I couldn’t use any app to post while on the go. I consequently moved to WordPress.com and stayed there for more than a year. The ease of use and the feedback I got from other WordPress.com users via all the baked-in social features really helped me to write more. It was also a great experiment to use the product I helped others use on a daily basis through my work at Automattic.

But it’s now time to go back to the self-hosted version of WordPress! It gives me the opportunity to play with the Jetpack plugin, a plugin I work on every day at work.

I moved my site from WordPress.com to Webfaction and installed the theme I was using on WordPress.com, Hum. Things looked good, but I wanted to spice things up a bit! I decided to build my own theme, and tried to include as many Jetpack features as I could. I have detailed the process below.

1 – Pick a good starter theme.

This was an easy decision for me. _s is the starter theme used by my colleagues of the WordPress.com Theme team. It’s actively maintained, it is well documented and it includes all the important template files to get you started. It’s the best starter theme out there!

It took me a minute to run the theme generator on underscores.me, create a Git repo, and commit to a new repository on GitHub. Pinkman was born! As for the name, it was only logical since my last theme was named Heisenberg… :)

2 – Give easy access to all posts.

My theme doesn’t include any sidebar, and I wanted people to be able to navigate through all my posts as easily as possible. Turns out I didn’t have much to do, because underscores already takes care of this for me, and support Jetpack’s Infinite Scroll out of the box.

If your theme doesn’t support Infinite Scroll, you can follow this excellent tutorial to make the necessary changes to your template files: Jetpack and the Infinite Scroll.

I also wanted to add a link to the footer. Luckily, Jetpack allows me to customize this Infinite Scroll footer with the infinite_scroll_credit filter, like so:

/**
 * Customize the credits appearing in the Infinite Scroll footer
 *
 * @since Pinkman 1.2.3
 */
function pinkman_cust_credit() {

	$credits = '<a href="http://wordpress.org/" rel="generator">Proudly powered by WordPress</a> ';
	$credits .= sprintf( __( 'Theme: %1$s.', 'jetpack' ), function_exists( 'wp_get_theme' ) ? wp_get_theme()->Name : get_current_theme() );
	$credits .= ' (<a href="http://jeremy.hu/?p=2468">More about this theme</a>)';

	return $credits;
}
add_filter( 'infinite_scroll_credit', 'pinkman_cust_credit' );

Reference.

3 – Showcase interesting posts in a “Featured” grid.

If your theme doesn’t include a sidebar, it can be hard for folks to navigate from one post to another and discover more about your blog.
I could have used a Related Posts plugin to solve that problem. Instead, I decided to experiment with Jetpack’s Featured Content module. Adding Featured Content to your theme is quite simple:

/**
 * Add theme support for Featured Content.
 * See: http://jetpack.me/support/featured-content/
 */
add_theme_support( 'featured-content', array(
	featured_content_filter' => 'pinkman_get_featured_posts',
	'max_posts'   => 6,
) );

Reference.

Once you’ve done so, you will have to create a new template file to display the Featured Posts:

/**
 * Get our Featured Content posts
 */
function pinkman_get_featured_posts() {
	return apply_filters( 'pinkman_get_featured_posts', array() );
}

Reference.

// Get our Featured Content posts
$grid = pinkman_get_featured_posts();
  
// If we don't have enough posts, our work is done here
if ( empty( $grid ) || 6 < count( $grid ) )
    return;
  
// Let's loop through our posts ?>
<div class="grid">
    <?php foreach ( $grid as $post ) : setup_postdata( $post ); ?>
          
        <div class="grid-thumb">
        	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
            	<?php the_post_thumbnail(); ?>
        	</a>
        </div><!-- .grid-thumb -->
  
    <?php endforeach; ?>
</div><!-- .grid -->
<?php wp_reset_postdata(); ?>

Reference.

I call this template file at the top of the home page and at the bottom of each post.

There is one catch though: posts included in the Featured Content module are excluded from the main query by default. This way, you can use this module to create a fancy slider at the top of your home page without displaying Featured posts twice.
This is not quite what I wanted to achieve, but luckily Jetpack makes it easy to remove the function excluding the Featured Posts from the main query:

/**
 * Do not exclude the Featured Posts from the main blog query
 */
function jeherve_add_featured_content_to_blog() {
    remove_action( 'pre_get_posts', array( 'Featured_Content', 'pre_get_posts' ) );
}
add_action( 'init', 'jeherve_add_featured_content_to_blog', 31 ); // Immediately after FC hooks in.

Reference.

4 – Add links to my other online profiles.

If you have your own personal blog, you have probably already added links to your other profiles on Social Networks such as Facebook or Twitter. You can do so manually, but Jetpack can help you with that. If you use the Publicize module, the plugin stores URLs to your Social media accounts and allows you to display these links anywhere in your theme, thanks to the Social Links module.

To do so, simply add the following code to your theme:

/**
 * Add theme support for Social Links.
 * See: http://jetpack.me/support/social-links/
 */
add_theme_support( 'social-links', array(
	'facebook',
	'twitter',
	'linkedin',
	'google_plus'
) );

Reference.

You can then call these values in one of your template files with the get_theme_mod() function. You can check how I did it here.

You’ll note that I also added links to other sites, like GitHub or WordPress.org. While these are not supported by Jetpack Publicize, you can still store the URLs as a theme mod, like so (Props Ryu).

5 – Use a different background image on each page.

This idea is not mine. My friend (and colleague) Sheri Bigelow did something similar on her own site, but didn’t use any Jetpack feature to get a background image for each post and page. You can see how she did it by looking at her theme’s code on GitHub.

Instead of building my own function to grab an image in every post, I decided to rely on Jetpack to do the work for me. Jetpack includes a class named Jetpack_PostImages (reference) that is used to provide an image for the sharing buttons, the Top Posts widget, and the Open Graph meta tags. I used Jetpack_PostImages::get_image() to grab an image, and then used it as a background image on the page.

/**
 * Get an image from a post
 *
 * @uses Jetpack_PostImages::get_image( $post_id ) to get the source of an image in a post
 * @param int $post_id The post ID to check
 *
 * If it doesn't return anything, grab random image from pinkman_get_random_image_src()
 *
 * @since Pinkman 1.2
 *
 * @return string the image source
 */
function pinkman_get_post_image() {
	$post_id = get_the_ID();

	if ( class_exists( 'Jetpack_PostImages' ) ) {
		$the_image = Jetpack_PostImages::get_image( $post_id );
		if ( !empty( $the_image['src'] ) )
			$the_image = $the_image['src'];
	}

	if ( empty( $the_image ) )
		$the_image = pinkman_get_random_image_src();

	// Generate a Photon URL for that image
	$the_image = apply_filters( 'jetpack_photon_url', $the_image );

	return $the_image;
}

Reference.

You’ll notice that the image goes through a filter named jetpack_photon_url before to be returned. This way, if Photon is active, the image is cached and served by Photon. You can learn how to use Photon in your themes here: Photon and Themes.

6 – Useful links

• View, fork, contribute, download the theme on GitHub.
• Download Jetpack.
• Access documentation about each Jetpack module.
• Browse Jetpack’s code
• Create your own theme based on _s.

And that’s it! Of course, if you have any questions or remarks, do not hesitate to leave a comment or contact me via email!