Jetpack 4.2.2: Facebook Sharing Counts and Bug Fixes

Jetpack 4.2.2 addresses an update to Facebook sharing counts and a few bug fixes.

Jetpack Sharing Icon

Facebook Sharing Counts

If you use the Jetpack Sharing Buttons, you may have noticed yesterday that any existing sharing counts for Facebook disappeared! This was due to Facebook turning off a feature in their API that we used to grab and display Facebook sharing counts. There’s a great post on WordPress.org that goes into more detail into the problem.

Since it was only a matter of updating the API that we use to pull the sharing count data from Facebook, we wanted to get this out to you as soon as possible!

Other Bug Fixes

  • Mobile Theme: fixed an issue with the Minileven mobile theme which was preventing it from loading properly.
  • Theme Compatibility: fixed an issue which caused PHP notices to get logged for users of the Twenty Fourteen theme.
  • General: added some improvements to Sync performance.

If you want to see the full list of what was updated in this release, you can check out the changelog.

Big thanks to those who contributed to this release:

Andrew Duthie, Daniel Walmsley, Elio Rivero, George Stephanis, Jeremy Herve, Marin Atanasov, Rich Collier, and Sam Hotchkiss.

Posted in Releases | Tagged , , , , | 4 Comments

Mobile-Friendly: How Jetpack Can Help

Making your website mobile-friendly is becoming as important as having good content: over 75% of Americans now access the internet on both desktop and mobile devices, and the numbers of users who solely use a mobile device or tablet is steadily on the rise. A mobile-friendly site also helps attract new visitors; in April 2015, Google expanded mobile-friendliness as a ranking priority, so sites that are mobile-friendly rank higher in search results.

What does that mean to you as a website owner? A little time spent making sure your site looks good and works well on mobile devices can have big results.

Your site might already be mobile-friendly!

Most WordPress themes developed today are built to be responsive. That means the theme responds to the needs of the viewers and their devices, shifting the layout based on the screen size, resolution, and device capabilities.

Here’s the Twenty Fifteen theme, which is fully responsive, on a desktop computer, tablet, and phone:

Twenty Fifteen responsive design

Twenty Fifteen’s responsive design

The layout adjusts based upon the screen size. The site keeps a consistent look, but adapts to the smaller screens. No matter what screen size a site visitor is using, it will automatically adjust — and since screen sizes are continually changing, the site can adapt to any screen size today and in the future.

How can you check to see if your theme is responsive? If you’re on a desktop machine, go to the site you want to test, let it load, then make your browser screen narrower. If the site has a responsive design, the elements from the web page will start to adjust and rearrange themselves into a still-readable format.

You can also check this using your own mobile device: simply visit the site you want to test and see how it looks. If it looks like exactly the same as the desktop version but shrunk down, your site is likely not responsive.

How can Jetpack help?

Jetpack’s Mobile Theme in action.

If your site isn’t responsive and you’re not able to update your theme to one that is, you can use the Jetpack Mobile Theme to create a simplified, mobile-friendly version of your website. The Mobile Theme displays your content in a clean, uncluttered interface for phones, making it easy for visitors to access your newest content on the go.

The default mobile theme has a pleasing blue color, but you can also tailor the Mobile Theme to bring your site’s mobile experience more in line with the full-screen version. You can customize the kinds of content that appear on your mobile home page, the colors, and the header.

In addition, viewers have the option to switch to the desktop version of your site by tapping the “View Full Site” link at the bottom of each page, so they can still choose to have the full site experience.

Ready to make your site mobile-friendly? Activate the Jetpack Mobile Theme in your Jetpack settings, and check out our support documents for more detail on how to customize it!

Posted in Spotlight | Tagged , , , , , | 2 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 on How to exclude a category from the Mobile Theme

Remove Jetpack Sharing buttons in the Mobile Theme

You can add the following code to a functionality plugin to remove the Jetpack Sharing buttons in the Mobile Theme:

// 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 remove the sharing buttons, 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() ) {
        remove_filter( 'the_content', 'sharing_display', 19 );
		remove_filter( 'the_excerpt', 'sharing_display', 19 );
    }
}
add_action( 'wp_head', 'jetpackme_maybe_add_filter' );

// Build the function
function jptweak_remove_share() {
	remove_filter( 'the_content', 'sharing_display', 19 );
	remove_filter( 'the_excerpt', 'sharing_display', 19 );
}

Looking for more mobile tips? You’ll find them here!

Posted in Code snippets, Tips & Tricks | Tagged , , | Comments Off on Remove Jetpack Sharing buttons in the Mobile Theme

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
  • Recent Comments

    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
  • Archives

  • Enter your email address to follow this blog and receive notifications of new posts by email.

  • Install Jetpack to see our lineup of features.

    Install Jetpack Now

    Don’t need all Jetpack’s features? No problem. Only activate what you need!