Jetpack

How to improve your User Experience using Jetpack

Jetpack has a ton of features (more than 30) that help you improve your WordPress site or blog in many ways – both for yourself as administrator as well as for your readers. Today I’m going to focus on eight Jetpack features that you can use to improve the User Experience of your site so that visitors find it easier to navigate and stick around longer.

Performance and Stability

It can seem like a no-brainer but the absolute worst user experience when visiting a site is when the site doesn’t work at all or takes a long time to load. Jetpack comes with two must-have features that stop this from happening:

  1. Photon
    Turning on Photon means that all your images get automatically served to users from the WordPress.com content delivery network (CDN) which means faster images for your readers (and less load on your host). To turn it on all you have to do is go to the Jetpack page in your blog dashboard and click the Activate button for Photon. And if you’re a developer, you can also speed up your theme with Photon.

  2. Monitor
    All sites go down once in a while. It could be your database, your host, some rogue code – whatever the reason, your visitors don’t really care, they just want to see your stuff! Jetpack Monitor will keep tabs on your site, and alert you the moment that downtime is detected so that you hear it from us first.

 

Mobile Devices

If you keep tabs on your traffic you’ve probably noticed you’re getting more and more visitors browsing your site from a mobile device: smart phones and tables of all shapes and sizes. Jetpack provides two features that help you make the reading experience on these devices significantly better:

  1. Mobile theme
    Jetpack comes with a responsive theme that works instantly on all mobile browsers. It also comes with various options and settings that enable you to choose exactly how you’d like your mobile browsing experience to work.

  2. Custom CSS
    Jetpack’s Custom CSS feature lets you tweak your site’s appearance to your heart’s content in a way that doesn’t break your theme when an upgrade is released. In addition, you can also create custom CSS for your mobile theme, further refining your mobile experience.

 

Interaction

Finally the last set of features deal with enabling your visitors to interact with your site, content and the community in a smoother fashion:

  1. Likes
    This feature puts a “Like” button on your posts and is a way for people to show their appreciation for your content. Enabling it is a short two-step process.

  2. Related Posts
    This feature pulls relevant content from your blog to display at the bottom of your posts. If the feature is enabled, a section of related posts appears just underneath your Likes (if you’ve turned these on). Just activate the feature from your Jetpack dashboard to turn them on but you can also customize how they display.

  3. Infinite Scroll
    Infinite scroll simply means that when a visitor scrolls to the bottom of your posts page Jetpack will automatically load the next set of posts without requiring clicking on any buttons. Activating it is similar to “Related Posts” above but not every theme supports it.

  4. Jetpack Comments
    When someone reads an article on your site and wants to comment, they can now use one of their existing social networking accounts to post a comment. No longer do they need to create yet another account and profile! You can also customize how Jetpack Comments display.

 

That’s it! Eight Jetpack features that can help your visitors have a more pleasurable experience when visiting your site. If you’ve not used Jetpack before, read our step-by-step installation guide here to try it out for yourself.

If you are a Jetpack user already please tell us what you think in the comments and, if you’d like to get involved by writing a guest post about Jetpack get in touch!

Posted in Features, Tips & Tricks | Tagged , , , , , , , , , , | 13 Comments

How to exclude a category from the Mobile Theme

If you’ve ever wanted to exclude a particular category of posts from being displayed by Jetpack’s Mobile Theme, you can use the following code in your theme’s functions.php or in a functionality plugin:

// Check if we are on mobile
function jetpackme_is_mobile() {
 
    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) )
        return false;
 
    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
        return false;
 
    return jetpack_is_mobile();
}
 
// Modify the main query on the home page for the mobile theme.
function jetpackme_modify_main_query( $arg ) {
    if ( jetpackme_is_mobile() && is_home() ) {
         $arg -> set( 'cat', '-1' );
    }
}
add_action( 'pre_get_posts', 'jetpackme_modify_main_query' );

You would need to replace the 1 in

$arg -> set( 'cat', '-1' );

with the ID of the category you want to exclude.

Looking for more mobile tips? You’ll find them here! And if you more general need help with the Mobile Theme, take a look at our support doc.

Posted in Code snippets, Tips & Tricks | Tagged , , | Comments Off

Customize the Jetpack Mobile Theme

Howdy Jetpackers,

You might already be familiar with the Mobile Theme module: it displays your content in a clean, uncluttered interface for phones, making it easy visitors to access your latest post on the go.

If you have enabled the Mobile Theme module, your mobile visitors see a fresh blue home page:

Jetpack Mobile screenshots

But did you know you could customize the look of this Mobile Theme? With a few simple changes, bring your site’s mobile experience more in line with the full-screen version. Your can customize both the kinds of content that appear on your mobile home page and the colors and header.

Customize the contents of your homepage

The Mobile Theme includes two home page options:

  1. You can choose to display excerpts or full posts on the home and archive pages.
  2. You can show a promo for WordPress mobile apps in your footer.

Access these options by clicking on Configure under the Mobile Theme module in the Jetpack menu.

Change the look of the theme

It does use a lovely shade of blue, but what if the Mobile Theme could use the same color scheme as your desktop theme? The same header and background? Luckily, you can do just that — and more!

We’ll go through three ways to customize the Mobile Theme. Depending on what you want to do and how comfortable you are with code, you can make changes through the Customizer, with CSS, or with actions and filters.

Through the Customizer

If your theme features a Custom Background or a Custom Header, the images or colors will automatically be ported over to the Mobile Theme, no additional work needed.

To get started with headers and backgrounds, go to Appearance >> Themes in your dashboard, and click “Customize”:

Customize your theme

If your desktop theme supports them, you’ll be able to specify a custom header or a custom background for your desktop and Jetpack’s Mobile theme.

Through the Custom CSS Module

Jetpack includes a module named Custom CSS that allows you to add your own CSS code without having to edit your theme stylesheet. The custom CSS editor is available under Appearance >> Edit CSS in your dashboard.

You may have used it to make changes to your desktop theme, but it also includes a Mobile-compatible option:

Custom CSS options

If you choose the mobile compatible option, all your custom CSS will also apply to the Mobile theme.

You can also use CSS to make changes that are specific to the Mobile theme. To do that, use the .mobile-theme class to target only the Mobile theme.

Custom mobile theme layouts

Through actions and filters

Jetpack’s Mobile theme, like other themes and plugins, uses actions and filters to add data and features to your site. If you want to remove or edit some of the mobile theme’s functions, you can build a small plugin.

Here is a small example: we will add post authors’ Gravatar images before each post on the mobile home page. To do this, we’ll create a new function named jetpackme_author_image, and we will hook that function into the the_content filter.

// Check if we are on mobile
function jetpackme_is_mobile() {

    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) )
        return false;

    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
        return false;
 
    return jetpack_is_mobile();
}

// Let's add the post author's Gravatar image, but only if we're on a mobile device
function jetpackme_maybe_add_filter() {

    // On mobile, and on the home page?
    if ( jetpackme_is_mobile() && is_home() ) {
        add_filter( 'the_content', 'jetpackme_author_image' );
    }
}
add_action( 'wp_head', 'jetpackme_maybe_add_filter' );

// Build the function
function jetpackme_author_image( $content ) {

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

    return $avatar . $content;
}

You could use a similar method to add, edit, or remove features from the Mobile theme. (If you do, please let us know about the cool things you built with the Jetpack Mobile Theme!)

Is there anything else you’d like to know about Jetpack’s Mobile Theme? Is there a particular Jetpack module you’d like to learn more about? Let us know!

Posted in Tips & Tricks | Tagged , , | 13 Comments
Follow

Get every new post delivered to your Inbox.

Join 62,288 other followers