Add Infinite Scroll to search result pages

By default, Infinite Scroll is only active on your site’s home page as well as on the archive pages. You can, however, use the infinite_scroll_archive_supported filter to add support to other pages:

function tweakjp_custom_is_support() {
	$supported = current_theme_supports( 'infinite-scroll' ) && ( is_home() || is_archive() || is_search() );
	
	return $supported;
}
add_filter( 'infinite_scroll_archive_supported', 'tweakjp_custom_is_support' );
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

Jetpack 2.3: Omnisearch, Social Links, and DIY Debugging

Version 2.3 of Jetpack has launched! New features like Omnisearch, Social Links, the Debugger, and more give you powerful, simple ways to customize and administer your Jetpack-powered site.

Ominsearch

Omnisearch

Omnisearch: one search box, global results. Don’t waste time digging for that one comment with the useful link — or was it a post you saw it in? Search once and get results from all of your posts, pages, comments, and plugins.

It’s also incredibly simple to let other plugins offer search results for when a user does a search. Do you have a plugin to build forms? Let Omnisearch provide your users with relevant points of contact from their visitors. Shopping cart plugin? Use it to find individual orders or products. Omnisearch is easy to extend via WordPress’s native Filters API to create a comprehensive search experience within your Dashboard.

Social Links

Social Links

Are you using a theme that supports Social Links? Now, you can configure your social icons directly from the Customizer (just make sure you’ve connected your social services using Publicize first).

Debugger

Debug Module

Debugging your Jetpack connection has never been easier. Activate the Jetpack Debugger, find out why Jetpack isn’t working for you, and submit a help request directly from your Dashboard. Our support folks can see the test details, helping them hone in on the issue more efficiently.

Other Enhancements

In addition to these features, you can now customize the “submit” button text on contact forms, as well as captions used by slideshows

(We’ve also spent a lot of time fixing bugs. For a complete list of changes, take a look at the changelog.)

If you’re already running Jetpack, head to your dashboard to update to 2.3. Otherwise, download Jetpack today!

Posted in Features, Releases | Tagged , , , , , | 15 Comments

Moving Sharing Icons

One of the most common requests you send us is “Can we move the Sharing and Like buttons?” By default, the Sharing and Like buttons get printed at the end of the the_content() Loop function, which causes them to display at the end of your post’s text — but that may not be where you want them in your site’s design.

There are actually two ways to move the Sharing buttons and one for the Like button.

Move the Sharing and Like buttons

Jetpack, by default, just attaches this tag to two filters — the_content() and the_excerpt() — so that the Sharing icons get displayed. By editing your theme files, you can move the tag wherever you’d like — we default to attaching it to the filters so that, when the Sharing and Likes modules are activated, the buttons are displayed with no extra work. You’re free to move it around to put the Sharing icons where you’d like; here’s how:

1. In your functions.php file, add the following:

function jptweak_remove_share() {
    remove_filter( 'the_content', 'sharing_display',19 );
    remove_filter( 'the_excerpt', 'sharing_display',19 );
    if ( class_exists( 'Jetpack_Likes' ) ) {
        remove_filter( 'the_content', array( Jetpack_Likes::init(), 'post_likes' ), 30, 1 );
    }
}

add_action( 'loop_start', 'jptweak_remove_share' );

2. Find the file for the location where you’d like the sharing icons to appear and insert the following code in the area you want the Sharing or Likes buttons to appear:

if ( function_exists( 'sharing_display' ) ) {
    sharing_display( '', true );
}

if ( class_exists( 'Jetpack_Likes' ) ) {
    $custom_likes = new Jetpack_Likes;
    echo $custom_likes->post_likes( '' );
}

Note that you do not need to display these together; you can put sharing_display() in a separate place from the Likes display codeblock.

Move the Sharing Buttons via jQuery

This method comes via Beau Lebens, a fellow Automattician. He coded this jQuery method for moving the Sharing icons:

jQuery( document ).ready( function( $ ) {
    // Relocate Jetpack sharing buttons down into the comments form
    jQuery( '#sharing' ).html( jQuery( '.sharedaddy' ).detach() );
} );

The #sharing selector is just the DOM location where I want to move the buttons to, and the .sharedaddy one is the container that Jetpack places its buttons in normally. We just detach it from the normal position and then dump it into the new location exactly as it was.

We hope this helps you develop your theme and display things the way you like.

Posted in Misc, Tips & Tricks | Tagged , , , | 4 Comments

How to insert another plugin before the Jetpack sharing buttons

Jetpack sharing buttons are added immediately after the post content. In some cases, you may want to insert a new element between your post content and the sharing buttons.

To control whether that element will appear before or after the Jetpack sharing buttons, you will have to change the priority of the filter. In the example below, we’ve added an author box and used the priority 18. As long as the priority is less than 19, it will appear before the sharing buttons.

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

Tiles and Circles and Squares, Oh My!

Jetpack has lots of different modules that do all sorts of fun and interesting things to supercharge your self-hosted WordPress site. Not everyone uses all of these modules, though — with so much good stuff, it’s easy to miss something. To help you discover all the great things you could be doing with Jetpack, we’ll be highlighting the most-overlooked modules and the modules we get asked the most about. First up: Tiled Galleries!

Are you tired of plain old thumbnail galleries? Are row after row of tiny squares getting you down? Do you spend tons of time using photo editing software to create more interesting layouts for your images? Well have no fear, Tiled Galleries are here! Jetpack lets you display images in a variety of bold, elegant layouts with just a few clicks.

To insert a gallery into a post or page, the first thing you need, of course, are some images. Do you want to showcase your recent trip to New Mexico? Or maybe that new puppy you got? Any collection of images can be turned into a Tiled Gallery, whether you uploaded them to your site weeks ago or are just uploading them now.

Then, make sure that you’ve enabled the Tiled Galleries module in Jetpack. Activate it by going to the Jetpack page in your dashboard, and click the blue “Activate” button on the Tiled Galleries card.

Next, you’ll want to insert a new gallery into your page or post. To add a gallery, click on the “Add Media button,” and then on “Create Gallery” on the top left. You can then either upload new images or select images that are already in your media library. Choose the images you want, then click on the “Create a Gallery” button on the bottom right. Once you’ve created the Gallery, you can drag-and-drop the pictures to put them in the order you want them to appear in.

Now the fun part: choose the layout style that you want for your gallery, in the “Gallery Settings” area on the right, and let the Tiled Galleries module work its magic. You can have:

Square Tiles

or Circles

and my favorite, Tiled Mosaic

Great pictures, aren’t they? And they look smashing in the Tiled Galleries. Jetpack takes care of all the cropping and arrangement, and your site visitors can click any tile to pull up the full image.

I hope this inspires you to turn your regular Thumbnail Galleries into stylish Jetpack-powered Tiled Galleries!

Do you have any questions about Tiled Galleries? Is there a particular Jetpack module you’d like to learn more about? Let us know!

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

How to use your own resources in the sharing module

The sharing module includes an “advanced” option, allowing you to use your own Javascript and CSS files instead of the files added by Jetpack by default.

To get started, go to Settings > Sharing in your dashboard, and check the “Advanced” checkbox at the bottom of the page.

Then, you can add your own libraries by adding the following code in a functionality plugin or in your theme’s functions.php file:

function tweakjp_add_sharing_js() {
    wp_enqueue_script( 'sharing-js', WP_SHARING_PLUGIN_URL . 'sharing.js', array( ), 3 );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_js' );

function tweakjp_add_sharing_css() {
    wp_enqueue_style( 'sharing', WP_SHARING_PLUGIN_URL. 'sharing.css', false, JETPACK__VERSION );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_css' );

Once you’ve checked the option, you will be able to manually enqueue your own sharing js and css files.

You’ll note that Jetpack uses the WP_SHARING_PLUGIN_URL constant to build the path to load the libraries. You will have to change that constant by your own when reenqueueing the sharing libraries.

Reference

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

Skip an Image with Photon

Once you activate the Photon module, it will automatically cache and serve all images you’ve added to your posts and pages that have been uploaded to your site.

You can exclude a specific image or an entire page from Photon easily.

To exclude an entire post or page from using Photon, you can modify this snippet to fit your needs and add it to your theme’s functions.php or a core functionality plugin:

function no_photon_by_page() {
  if ( is_page( 2 ) ) {
    add_filter( 'jetpack_photon_skip_image', '__return_true');
  }
}

add_action('wp', 'no_photon_by_page');

In this example, Photon won’t be used on the page with the ID of 2, but you can use any of the WordPress Conditional Functions.

If you’d like to exclude an image from being cached and served by Photon, you can add the following code to your theme’s functions.php file:

function my_photon_exception( $val, $src, $tag ) {
        if ( $src == 'YOUR_IMAGE_URL' ) {
                return true;
        }
        return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );

If you’d like to disable Photon in other specific situations instead, you can check this tutorial.

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

How to remove Publicize options from the New Post screen

Publicize adds a set of options right above the “Publish” button in your dashboard. You can hide these options by adding the following code to a functionality plugin, or to your theme’s functions.php:

// Replace with admin_head-post.php for the edit post screen
add_action( 'admin_head-post-new.php', function() {
        global $publicize_ui;
        remove_action( 'post_submitbox_misc_actions', array( $publicize_ui, 'post_page_metabox' ) );
} );

Reference

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

Remove Jetpack’s Open Graph meta tags

If you’ve activated the Sharing or Publicize module, Jetpack will automatically add Open Graph meta tags to each one of your posts. These tags are used by Facebook to gather information about the post and build a post preview when one of your readers shares a post on Facebook.

If you already use another plugin to handle Open Graph meta tags on your site, we’ll automatically deactivate Jetpack’s Open Graph meta tags for you, to avoid any duplicates.

If, however, you’ve added these tags to your theme or built your own plugin, you’ll want to add the following code to your theme’s functions.php file or to your plugin, to deactivate Jetpack’s Open Graph meta tags:

add_filter( 'jetpack_enable_open_graph', '__return_false' );
Posted in Code snippets, Tips & Tricks | Tagged , , , | Comments Off
Follow

Get every new post delivered to your Inbox.

Join 58,054 other followers