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

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

Jetpack 2.8: Introducing Markdown and Improving Monitor

We’re thrilled to announce that our latest update is out the door! Jetpack 2.8 includes improvements to Jetpack Monitor and also introduces a brand new Markdown module.

Jetpack Monitor Module Card

Improved Jetpack Monitor notifications

Multiple users can now receive Jetpack Monitor email notifications. As an admin user linked to WordPress.com, you can opt in to receive these notifications right from your dashboard. Just navigate to the Jetpack page, find the Monitor module card, and click on Configure. Then, check the “Receive Monitor Email Notifications” setting and save your changes. Now if your site ever goes down you will receive notifications to your WordPress.com linked account email!

Write more efficiently with Markdown

Since introducing Markdown on WordPress.com, we’ve had a lot of requests to bring it over to Jetpack. Well, queue the trumpets, start the drumroll, Markdown is here!

For those who don’t know, Markdown is a quick way to add formatted text without writing out any HTML. Markdown lets you compose links, lists, and other styles using regular characters and punctuation marks. If you want a quick, easy way to write and edit rich text without having to take your hands off the keyboard or learn a lot of complicated codes and shortcuts, then Markdown might be right for you. We do strongly suggest sticking with the “Text” tab in the Editor when using Markdown.

Here is an example of Markdown in the text editor:

Markdown in text editor

And here is that same Markdown converted to HTML in the Reddle theme:

Markdown converted to HTML in Reddle

Isn’t that pretty awesome? You can check out the announcement post over at WordPress.com for more information about Markdown and see our Markdown support page.

Publicize Support for Custom Post Types

For our developer friends out there, we’ve added Publicize support for custom post types, allowing you and your clients to automatically post new entries from any CPT to your social media networks. You’d need to make one small tweak in the code defining the CPT—just add 'publicize' to the CPT’s 'supports' array.

For example, to enable the title, editor, Publicize, and Jetpack’s new support for Markdown: 'supports' => array( 'title', 'editor', 'publicize', 'wpcom-markdown' ),

As always, if you notice any issues with this release, just give us a shout over at the forums or send us a message through our contact form. Thank you for flying with Jetpack!

Posted in Releases | Tagged , , , , , | 29 Comments
Follow

Get every new post delivered to your Inbox.

Join 62,301 other followers