How to Customize the Jetpack WordPress Plugin

Have you ever heard about Jetpack? Just try it. It’s one of the most overly complicated plugins. There are as many options and features that they could be divided into separate plugins. However, you can find some very useful features among the others which I also used a lot.

After all, Jetpack is your best choice if you want to use it for social sharing. It’s quite fast and you can also change its style relatively easily. You can find plugins that have the tendency to add a lot of stuff to your pages and posts while loading, but this one is more promising.

Jetpack is functional in quite a few ways, but first of all, you should use it without loading all of its features. There is a post available by Jeremy Herve which is full of information about how to change the loading of modules in the plugin. He made it much easier for the developers to work with Jetpack thanks to the filters embedded into its system. You can deactivate the undesirable modules with a few sample codes provided by him.

Now we are going to talk about the modules Jetpack actually contains. I recommend you download and install Jetpack if you don’t have it already. It will make it much easier to understand the information further on in this article. Go to the add new plugin screen and find “Jetpack” in WordPress.

What you need to do is to check the list of modules and sort out the ones you don’t need. Once you know which ones you don’t want to load, use Jeremy’s codes to block them. However, there are also some alternative ways to unset them and it also works pretty well.

So, let’s suppose that you or an administrator on your website wants to stop the loading of undesired modules. There is a code that can’t actually disable these Jetpack modules, but rather hides them to be unable to use. The first step is to go to the admin screen of the plugin and deactivate the modules manually. Done? Now you can apply the piece of code on Jetpack.

After you disabled the certain modules, you can copy the mentioned code to the Jetpack plugin or the “functions.php” file of the theme. It’s just a boilerplate code so you don’t need to change it in any way. And that’s all, you can unset any unwanted module you want from now on.

(GitHub <- the raw code mentioned in text)

Although this code will disable new modules after you add them to the plugin. They should be on the white-list first, and then you can activate or deactivate the modules.

You can also control Jetpack with Plugins

Let’s start with installing a plugin by Mark Jaquth which you can find right here. This one is available since a long time, but it works fine. There are plugins which can put a menu in the WordPress admin sidebar, in the top right corner. The main purpose of this one is to relocate them to the bottom. Content is more important than settings.

The second great plugin related to Jetpack is named Rocketeer. This one also controls the loading of your modules. The author is a guy called Brady Vercher, and he said that Rocketeer pretty much allows you to manage  your Jetpack modules as plugins are managed. You can sort and activate/deactivate masses of modules with it. I strongly recommend you to use it, you will be pleased.

Use it without even connecting

You don’t have to connect to WordPress while you are using Jetpack. However, you can’t use it completely, with all its features. Some of them will work just fine, while others remain totally unavailable. There may be certain occasions when you want to use Jetpack for a local installation or even a production site and you only need a few modules.

This development mode can be used by adding this to your wp-config.php file:

define( 'JETPACK_DEV_DEBUG', true);

The practice of the customization

If you plan to customize Jetpack regularly, there are a couple of things to keep in mind:

  • First of all, since these customizations are achieved by codes, use a different name for each of your functions to be able to distinguish between them. Figure out prefixes and add them to the name of your code.
  • Use a functionality plugin instead of changing something in your theme, template files or the functions.php of your child theme. This plugin is independent of themes, and you can find pretty much everything with it for your functions.php. Improve your customization skills by using stuff like this.

Customizing the Jetpack Mobile Theme

Is the Mobile Theme module familiar for you? This one can display your pages in a neat, minimalistic way for phones, making it much easier for readers to access your content. If you enable it, your visitors will see a fresh blue page as your home page.

In the next few steps, we will learn how to customize this module. You can modify it to be much more like the full screen version. Let’s customize the content, colors and header of your mobile page.

Changing the contents of your home page

There are two options available for the home page:

  1. One of them allows you to choose between displaying full posts or only parts of it on your home or archive pages
  2. The other one allows you to show a promo on your footers which refers to WordPress mobile applications

Just click on Configure, it’s under the Mobile Theme module in the menu.

How to change the look of the theme?

Although the Mobile Theme is in a beautiful blue color, you can change it to the actual color scheme used on your desktop theme. You can also use the same background and header there. There are three ways to do this kind of customization effectively. The changes can be made with CSS, with the Customizer or with actions and filters.

Try it through the customizer

By having a Custom Header or a Custom Background, the full design will appear on the Mobile Theme automatically without any additional work. To modify headers and backgrounds, just go Appearance >> Themes on the dashboard, then click Customize.

Make sure your desktop theme supports custom headers and backgrounds, and then choose a specific one for your Jetpack Mobile theme and desktop.

The custom CSS module

In Jetpack’s Custom CSS, you can add your own code without editing the stylesheet. The editor is on the dashboard under Appearance >> Edit CSS. It can also make changes in desktop themes, but now we will use it for Mobile.

Choose the option named Mobile-compatible, and all your custom CSS will be applied to your Mobile theme. In CSS, the changes you make can be specific to Mobile-theme with using the .mobile-theme class.

Custom CSS is actually very safe, since it saves the custom codes in the database and it does so without changing your existing stylesheet file. These changes will be still there even after you uninstall or just deactivate Jetpack. It’s also easier to update your themes without actually losing the codes you put your precious time and effort in.

Change through actions and filters

The Mobile theme, like many other plugins and themes, uses actions and filters to be able to add features and data to your website. You can insert a small plugin to remove or edit the functions of the Mobile theme.

For example, we will add the Gravatar images of the author before each of the articles. We will do this on the mobile home page by creating a new function, which is named Jetpackme_author_image, and we will apply this one into the filter called the_content.

// Checking if we are on mobile device

function jetpackme_is_mobile() {

// Are Jetpack mobile functions available?

if ( ! function_exists( 'jetpack_is_mobile' ) )

return false;

// Is mobile theme set?

if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )

return false;

return jetpack_is_mobile();

}

// Changing the Gravatar of author, only if we are on a mobile device

function jetpackme_maybe_add_filter() {

// Adding it to the home page, if we are on mobile device

if ( jetpackme_is_mobile() && is_home() ) {

add_filter( 'the_content', 'jetpackme_author_image' );

}

}

add_action( 'wp_head', 'jetpackme_maybe_add_filter' );

// This is the main function

function jetpackme_author_image( $content ) {

global $post;

$avatar = get_avatar( $post->post_author );

return $avatar . $content;

}

Features can be added, changed or removed from the Mobile theme with a similar method. Try experimenting a little bit by building some codes with this Jetpack Mobile Theme.

How to customize Jetpack’s related posts?

The Related Posts feature, unlike many other related post plugins, doesn’t eat up lots of server resources. It scans and analyzes your posts, making it able to show contextual posts to your readers. The problem is that it crops your images to 300×200 pixels. That doesn’t necessarily look good on any blog. However, you can easily edit this feature.

So, how to change the thumbnail dimensions?

customize jetpack related post

You can adjust the dimensions of your displayed images quite easily to suit your website. This is just an example for vertical Pinterest-like thumbnails, but you can modify it for your taste:

// changing the thumbnail size

function jetpackchange_image_size ( $thumbnail_size ) {

$thumbnail_size['width'] = 226;

$thumbnail_size['height'] = 339;

// $thumbnail_size['crop'] = true;

return $thumbnail_size;

}

add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

End Note

In this article, we covered some of the basic customization possibilities of the Jetpack plugin with a few of its problematic aspects. I hope it will be easier for you to get along with Jetpack from now on.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditPin on Pinterest