Jetpack

Indispensable Jetpack features for theme developers

Jetpack offers a number of great features for theme developers that help you cut down both development time as well as load times. Most of these features work right out of the box, but you can also get under the hood to apply tweaks and customisations that really take your theme to the next level.

This article introduces you to:

  1. Speeding up your theme with Photon
  2. Showcasing posts with Featured Content
  3. Automatically loading posts with Infinite Scroll
  4. Instantly applying a Mobile Theme
  5. Customising CSS
  6. Providing Sharing functionality
  7. Integrating Social Links
  8. Showing similar content with Related Posts
  9. Additional resources

 

1. Speeding up your theme with Photon

Jetpack for developersPhoton is a free image CDN offered by Jetpack. As soon as Photon is enabled, it automatically serves the images found in posts and pages from WordPress.com’s speedy servers around the globe.

But did you know that you can use it to save bandwidth and speed up load times for images within your theme, too? You can link to a Photon-ized version of an image by calling the jetpack_photon_url() function. Its quite straightforward and we’ve put together some step-by-step instructions to make it even easier.

 

2. Showcasing posts with Featured Content

Featured Content SettingsFeatured Content is one of Jetpack’s lesser known features. But it’s a really powerful tool for theme development because you can use it to create a completely custom area in your theme for users to showcase posts. The appearance and placement is completely up to you, the theme author.

Your users can then specify which posts to show in that area simply by selecting a tag of their choice. There’s even an option to hide the tag from post meta and tag clouds.

Whether you are building an image slider on your homepage, or want to allow users to highlight specific posts, Featured Content makes it easier than rolling your own custom functionality. You can see a few examples of the feature in action here.

 

3. Automatically loading posts with Infinite Scroll

With Infinite Scroll active, users no longer have to click a link to get to the next set of posts on archive pages. Instead, your theme loads the next set of posts automatically into view when the reader approaches the bottom of the page. You’ve probably seen similar functionality on other sites, and thanks to Jetpack, it’s a snap to add it to your theme.

 

4. Instantly applying a Mobile Theme

Jetpack Mobile Front PageMobile internet usage is growing exponentially and any theme worth its salt should work on mobile devices. That’s why you’ll be happy to know that Jetpack ships with a full Mobile Theme ready-to-go out of the box.

Just use the .mobile-theme CSS class to style the mobile theme or take things a step further and use jetpack_is_mobile to target mobile visitors.

That way you can build the best user experience for your theme, no matter what device visitors are using.

Check out this article on customizing Jetpack’s mobile theme to learn more.

 

5. Customising CSS

If you’ve published a theme before you most likely know that users often want to customize its appearance. Savvy users might create a child theme, but more often than not, users will simply edit your theme’s files directly.

revision_listThat can get messy when you release a theme update that overwrites users’ modifications. But thanks to Jetpack, a much more user-friendly alternative is available through the Custom CSS feature which also includes a revision history.

After activating the feature, a ‘Custom CSS link’ is added to the Appearance menu in the Dashboard. From there, users can add their own Custom CSS, without touching the theme’s files. They can even use their favorite CSS pre-processer, as support for both SASS and LESS is built right in.

 

6. Providing Sharing functionality

The Sharing feature allows you to add social media sharing buttons to your theme. There are multiple display options built in and you can opt to use your own custom styles as well.

In this way you can integrate social sharing buttons in your theme, and keep complete control over their appearance. You can even alter the functionality with some jQuery magic. Our friends over at ThemeShaper have a great article with more information about this.

 

7. Integrating Social Links

Jetpack also makes it easy to include Social Links within your theme. After a user connects their social media accounts through Publicize, you can automatically use links to their accounts in your theme. You can add support with add_theme_support() and then use the Theme Modifications API to pull the data into your theme.

 

8. Showing similar content with Related Posts

Related posts in visually striking modeRelated Posts is one of Jetpack’s newer features. When activated, this adds a section to single posts that includes automatically generated links to similar content.

By default the section appears at the bottom of your content, but you can also move it to the top with a filter. In addition users can add a shortcode wherever they want the section to appear.

This means that you can include styling for the Related Posts section in your theme and then users are able to drop in a custom Related Posts section that matches the rest of their site wherever they want.

 

9. Additional resources

Finally, we’d love to see what you’ve done yourself and what you think of Jetpack. If you have questions, comments or your own tips drop us a comment below! In addition to that, we’re always open to suggestions, so feel free to get in touch. Thanks for flying with Jetpack!

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

Top 5 Best Practices when using Jetpack on client websites

If you’re creating WordPress websites for clients, Jetpack is for you. Jetpack easily adds a great number of features to your client’s websites without the need for a dozen different plugins, reducing the technical debt that you or your client will need to maintain over time.

We recommend these best practices when using Jetpack for a client site that will keep things running smoothly and help you provide a great service to your clients.

This article covers:

  1. Use Jetpack’s Development Mode
  2. Invite your client to connect a WordPress.com account
  3. Activate Jetpack only on the live domain
  4. Use your account when a connection is required
  5. Work with staging sites
  6. How to install Jetpack

 

1. Use Development Mode

Jetpack offers a Development Mode that is enabled when using Jetpack on a localhost. If you’re developing on a development server, you can manually enable development mode.

You can enable this as constant in wp-config.php by adding:

define( 'JETPACK_DEV_DEBUG', true);

or you can add this as a filter in your theme’s functions.php or a development plugin via:

add_filter( 'jetpack_development_mode', '__return_true' );

Use a development plugin
We suggest using a “Development Plugin” that you can use for all of your in-development needs. With a custom development plugin, you can include the Jetpack Development Mode filter and include other necessary tools like the Debug Bar. The added benefit is that it reduces the number of items on your launch checklist and consequently less things to slip through the cracks when launching. The code might look something like this:

Screenshot of the code for a sample development plugin

No matter how you enable Development Mode, ensuring that it is disabled before handing the site over the client is important to ensure your clients aren’t asking you or us why Jetpack isn’t working!

 

2. Invite your client to connect the site to a WordPress.com account

Many site developers will connect Jetpack to WordPress.com with their WordPress.com account for convenience. This becomes problematic however when you end up with hundreds of sites listed on your http://wordpress.com/my-blogs/ page. After your work is done its very likely that for many (if not most) of them you do not need or want access to any longer unless you have a continued relationship with the client. (Even if you do, its a good idea to teach your clients to self-serve so that you’re not a bottle-neck.)

From your client’s perspective, if Jetpack is connected to your account, they aren’t able to manage their Jetpack connection via http://wordpress.com/my-blogs/ or access their enhanced stats via WordPress.com.

Your client may already have a WordPress.com account if they’ve used Gravatar or Akismet in the past so very often its easy to connect Jetpack with their existing account.

 

3. Activate Jetpack only on the live domain

Jetpack connections are based on the URL of the site. Often, we’ll see a Jetpack user write in asking why all of their stats suddenly disappeared or why do their wp.me shortlinks don’t work. Typically, their site was originally connected when it was on a development address and the migration to the live URL didn’t pass back to us.

To avoid this, connect Jetpack to WordPress.com only on the live domain.

 

4. Use your account when a connection is required

With the above practices stated, we realize that development processes can’t always follow the practices outlined above. What if you’re developing off of a feature that requires a WordPress.com-connected feature, like styling our Subscription widget?

While on a development server, you can connect your client’s site to WordPress.com with your own WordPress.com account. The key is to disconnect Jetpack from WordPress.com using the link in the footer of the Jetpack dashboard page at the beginning of the migration to your production server and reconnecting after the site is on the production URL with the client using their WordPress.com account.

By doing this, you’ll disassociate your account from the client site and your client’s site will be connected using the production URL, avoiding the most common pitfalls of client sites.

 

5. Work with staging sites

An increasing number of hosting providers include a staging site, where you can have an exact copy of the client’s site on a separate server. This is great for testing out updates, new features, and more.

Jetpack communicates with WordPress.com through a shared token and blog ID that is stored in the database. When the staging site is copied from the live site, these database values are included. Whenever you deactivate Jetpack, Jetpack communicates with WordPress.com to invalidate the token as a solid security practice.

For you, this means if you deactivate/disconnect Jetpack on the staging site, the same token used on the live site is now invalid. If this happens, simply have the client disconnect and reconnect Jetpack on the live site.

 

6. How to install Jetpack

If you’ve never used Jetpack before and you’re looking for some guidance on how to install it for the first time, you’re in the right place!

There are two ways of installing the Jetpack plugin:

  1. The simplest way is install it directly from your Dashboard. You can find step-by-step instructions here.
  2. Alternatively, if you’re an advanced user, you can download the plugin files (.ZIP) and install it manually.

Finally, if you discover a bug in Jetpack during your development work, please submit an issue or a patch via GitHub. If you have questions or run into problems, drop us a line or leave a comment to share your tips on using Jetpack with clients.

Posted in 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

Let Users Showcase their Posts with Featured Content

Featured Content Settings

The power of showcasing content

Featured Content is a great way to let users highlight their most important posts. Our Theme Wranglers use it often on WordPress.com, but this awesomeness is available to all theme developers.

The concept is simple: each theme can determine where and how Featured Content is displayed. Then, right from their blog’s dashboard, users can specify a tag to determine which posts to showcase in the Featured Content area. Users can even specify how many posts they want to show, and decide if they want to hide the tag from post meta and tag clouds.

Featured Content in Action

If you’ve been following the development of the Twenty Fourteen theme, you’ve seen the prominent featured posts section on the front page. This area was created with Featured Content! The user specifies which posts they want to feature, and the theme does the rest of the work. Check it out here.

Twenty Fourteen

Another great example of Featured Content is the rotating header on the Superhero theme. In Superhero, Featured Content was coupled with Flexslider to create the beautiful post slider that you see at the top of the front page.

Superhero Theme

The possibilities really are endless. Photography themes can use Featured Content to display beautiful photos, and business sites can highlight their most important news and alerts. Best of all, users don’t have to worry about Custom Post Types or theme-specific categories or tags. They simply set a tag, and the theme handles the rest.

Add Featured Content in a snap

Adding Featured Content to your theme is a piece of cake. You can find all of the information you need to get started on the Featured Content support page.

Keep in mind that Featured Content is designed to spotlight content right on your theme’s homepage. If your theme includes a front-page.php file, that’s the only template file to which you’ll need to add the Featured Content area.

Do you have a great idea for Featured Content? Or have you done something cool with it on your own site? Let us know! We’d love to see how Featured Content is being used in the wild!

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

Publicize Crash Course: LinkedIn, Tumblr, and Path

Carolyn Sonnek:

The second part of the Publicize Crash Course series. Learn how to connect LinkedIn, Tumblr, and Path in your Publicize settings!

Originally posted on WordPress.com News:

Yesterday, we learned the ins and outs of pushing your new posts to Facebook, Twitter, and Google+. Today, we continue our tour of the Publicize universe with the three other social networks you can connect to from your WordPress.com account: LinkedIn, Tumblr, and Path.

The ability to share your content with different audiences quickly and easily will help you cultivate a healthy readership. Just as important, with Publicize you can tweak your sharing preferences so that each post reaches its intended destination: you can always choose which services to publish to, and what custom message to include (if any).

You can connect to these three services in exactly the same way, and from the exact same page, as the ones discussed yesterday. Simply visit Settings → Sharing in your dashboard, click “Connect” on the desired one, and authenticate your account in the window that opens. Once you’re done…

View original 491 more words

Posted in Tips & Tricks | Comments Off

Publicize Crash Course: Facebook, Google+, and Twitter

Carolyn Sonnek:

Great explanation of the Publicize feature found in Jetpack. Also instructions on how to connect Facebook, Google+, and Twitter accounts.

Originally posted on WordPress.com News:

“I’m publishing posts every day, but where are my readers?”

While there’s no exact science to successfully building a readership, you have a number of built-in tools on WordPress.com to share your work with the world. Our advice? Hook up your various social accounts to WordPress.com and let us do the rest. We want to emphasize, especially to our newest users, that no blog is an island. Clicking Publish is just the first step, and sharing your work across the internet is key to expanding your audience.

What is Publicize?

With Publicize, you can automatically push out your new posts to social networks: Facebook, Google+, Twitter, LinkedIn, Tumblr, and Path.

Publicize

Connecting to your accounts is easy, and you can select which ones to link to your WordPress.com account. To get started, head over to Settings → Sharing. At the top of the page, you’ll see the options pictured…

View original 823 more words

Posted in Tips & Tricks | Comments Off

How to add a default fallback image if no image can be found in a post

When you publish a new post on your site, Jetpack crawls it and looks for images that can be used when sharing that post on Facebook, on Twitter, or if that post appears in the Top Posts and Pages widget in your sidebar.

Jetpack starts by looking for a Featured Image. If you didn’t define any, we will look for slideshows and galleries, and then for single images you may have inserted in your posts. If you’ve inserted an image that is hosted on another site, we can use it too.

However, sometimes you may not have added any image to your post. In such cases, you can add this code snippet to your theme’s functions.php file, or in a functionality plugin. This way, your readers will see a default image when sharing that post on Facebook, for example:

function jeherve_custom_image( $media, $post_id, $args ) {
	if ( $media ) {
		return $media;
	} else {
		$permalink = get_permalink( $post_id );
		$url = apply_filters( 'jetpack_photon_url', 'YOUR_LOGO_IMG_URL' );
	
		return array( array(
			'type'	=> 'image',
			'from'	=> 'custom_fallback',
			'src'	=> esc_url( $url ),
			'href'	=> $permalink,
		) );
	}
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );

It’s worth noting that the fallback image has to be larger than 200 x 200px, as per Facebook requirements. If your image is smaller, Facebook will ignore it.

Reference

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

Ever accidentally publicize a post that you didn’t mean to?

Ever accidentally publicize a post that you didn’t mean to? This snippet will prevent the connections from being auto-selected, so you need to manually select them if you’d like to publicize something.

add_filter( 'publicize_checkbox_default', '__return_false' );

You can place this code snippet in your theme’s functions.php file, or in a functionality plugin.

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

How to Override Jetpack Infinite Scroll Settings in a Child Theme

From our illustrious colleagues over at ThemeShaper, I’d like to share with you a post on further customizing Infinite Scroll settings in your themes:

When a theme author adds Jetpack Infinite Scroll support to their theme, they configure its options specifically for that theme. Occasionally you might want to override the theme’s defaults for your purposes, and in this article, I’ll show you how to do so in a child theme.

Here is a typical Jetpack Infinite Scroll setup function…

Read the whole post: How to Override Jetpack Infinite Scroll Settings in a Child Theme.

Posted in Tips & Tricks | Comments Off

How to add Javascript events to the Carousel view

Add this to your site’s js to enable events such as adding Google Analytics tracking code to individual Carousel slides:

jQuery(document).on( 'jp_carousel.selectSlide', '.jp-carousel-wrap', function( event, slides ) {
	// This is just to show you what values get passed in.  Delete it before going to production.
	if ( window.console ) {
		console.log( this );
		console.log( event );
		console.log( slides );
		console.log( slides[0] );
	}
	// Do whatever extra stuff you want here.
} );

You can read more about it here.

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

Get every new post delivered to your Inbox.

Join 61,502 other followers