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

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 the 2 first button types, Jetpack automatically adds sharing counts for the most popular Social Networks.

Jetpack's 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( 'sharing_js', '__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!

Note: If you use the Email sharing button, this code will break it. You’ll want to enqueue the Email Javascript code back before to add the Email sharing button again.

Force the display of Jetpack’s OG tags

Jetpack Open Graph Meta tags are automatically disabled if you already use another plugin that supports Open Graph tags. The full list of these plugins is available here.

However, in some cases you might prefer to use Jetpack’s Open Graph tags, even if your other plugin offers such functionality. To do so, you’ll have to reactivate Jetpack’s tags by adding the following code to your theme’s functions.php file, or to a functionality plugin:

add_filter( 'jetpack_enable_open_graph', '__return_true', 100 );

Jetpack: Use Photon in your Text widgets

By default, Photon is only applied to your post content. There are ways to use Photon within your theme too, but if you want all images from your Text Widget to be cached with Photon, you can use this code snippet:

function jeherve_photonize_text_widget_images( $content ) {
	if ( class_exists( 'Jetpack_Photon' ) ) {
		$content = Jetpack_Photon::filter_the_content( $content );

	return $content;
add_filter( 'widget_text', 'jeherve_photonize_text_widget_images' );

Customize the list of modules available in Jetpack

Jeffro published an interesting post on WPTavern yesterday: 15+ Plugins To Get Jetpack Functionality Without Using Jetpack.

Knowing me, you won’t be surprised that I immediately started thinking of a few alternatives. :) So here it comes, 3 other ways to customize the list of Jetpack modules, if you cannot use or aren’t interested in everything Jetpack has to offer.

Continue reading Customize the list of modules available in Jetpack