Semicolon: use Jetpack’s Custom CSS libs in your theme

Yet another good example of how to use libraries bundled with Jetpack on your site!

My colleague Konstantin Kovshenin recently released the Semicolon theme. It uses the libraries used in Jetpack’s Custom CSS module to compile its stylesheet (yay Sass!), and to correct the contrast of the colors you’ve picked in the theme options. So if you pick bad contrasting colors, Semicolon will lighten or darken them until a contrast ratio threshold is reached. This guarantees a certain level of readability.

You can read more about it in Konstantin’s post: Color Options vs. Decisions in WordPress Themes.

Color Posts plugin: how to use Jetpack libs in your own plugin

I’ve talked about customizing Jetpack in the past, and I also mentioned how you can integrate Jetpack features in your theme.

How about including these features in a plugin? As a proof of concept I just released Color Posts, a plugin that uses 2 very useful classes that are bundled with Jetpack.

Continue reading Color Posts plugin: how to use Jetpack libs in your own plugin

7 months as a Ghost

Back in October of last year, Ghost was released to the public. I read a lot about this “WordPress killer”, and decided to give it a try. It is Just a Blogging Platform, so that’s exactly what I need for this site. After 7 months, I’m back on WordPress and I’d like the share my experiences with you.

Continue reading 7 months as a Ghost

Jetpack: change og:title value to be all uppercase

Caps Lock

Some blog owners would like their post titles to be displayed in all caps, to attract more clicks on Facebook. Here is how to change Jetpack’s Open Graph meta tags to use an uppercase og:title tag:

 * Plugin Name: Uppercase og:title for Jetpack 
 * Plugin URI:
 * Description: Removes Jetpack's default og:title tag, and replaces it with an uppercase og:title 
 * Author: Jeremy Herve
 * Version: 1.0
 * Author URI:
 * License: GPL2+
function jeherve_capital_title_og( $tags ) {
        global $post;
        if ( is_singular() && $post ) {
                unset( $tags['og:title'] );
                $tags['og:title'] = strtoupper( get_the_title( $post->ID ) );
        return $tags;
add_filter( 'jetpack_open_graph_tags', 'jeherve_capital_title_og' );

To be pasted in your theme’s functions.php file, or in a functionality plugin.

Jetpack: how to define a custom fallback image

Jetpack handles Open Graph Meta Tags for you, and automatically creates a fallback Image meta tag if you haven’t inserted any image into your post.

If you’d like to define your own custom fallback image, you can use the jetpack_open_graph_image_default filter, like so:

function jeherve_default_image() {
	$fallback_img = 'http://YOUR_IMG_URL';
	return esc_url( $fallback_img );
add_filter( 'jetpack_open_graph_image_default', 'jeherve_default_image' );

Note that the filter is new, and will only be added to the next Jetpack release, 3.0.

Jetpack: how to avoid triggering Gravatar Hovercards

Gravatar is cool. And you know what’s cooler? Gravatar Hovercards!

Gravatar Hovercard

These are triggered as soon as you insert a Gravatar into a post, or in a comment section for example. However, there are times when you don’t want to trigger Hovercards. A good example is a site header like on my other site. I use my Gravatar as a header image, and I want my readers to be able to click this image to go back to the home page.

Luckily, you can use the .no-grav class to ask the Hovercard to ignore a specific image like so:

<img src="<?php echo pinkman_get_gravatar(); ?>" class="no-grav" width="120" height="120" />

Jetpack: remove the share counts from the sharing buttons

Jetpack’s sharing buttons look good, are simple, and offer 4 different display options:

  • Icon + Text
  • Text
  • Icon
  • Official Buttons

If you choose one of the 3 first button types, Jetpack automatically adds sharing counts for the most popular Social Networks.

Jetpack Sharing Buttons

This is great, but what if you don’t want to make extra requests to external services for each post that you publish on your site? Luckily, Jetpack allows you to remove the sharing counts with a simple filter:

add_filter( 'jetpack_sharing_counts', '__return_false' );

Once you add that filter to a functionality plugin or to your theme’s functions.php file, Jetpack will stop adding the Javascript library responsible for calling each Social Network to count the number of shares.
Your sharing buttons won’t include any count anymore, but you will have saved a few resources on your site!