Some Cool JetPack Tools To Play With

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

JetPack Main Page

One of the greatest plugins you can find for WordPress is JetPack. Basically, the ultimate goal of JetPack is to eventually implement all of the cool features that WordPress.com has that you don’t normally get in a WP.org site. There are a few things to know about JetPack before diving in, though.

JetPack and Multisite

Because WordPress Multisite is really intended to set up multiple siloed sites, JetPack has to be set up individually on each site within your installation. If you have 200 sites in your network, and you want to use JetPack to its full capacity, you will have to go into each individual site and “connect” JetPack to WordPress.com. JetPack is designed this way in order to allow each separate site to be connected with a different WP.com account, but it can be extremely time-consuming if you want them all to be connected to the same account.

However, if you just want to play with some of the JetPack features (the ones that aren’t dependent on WP.com), you can get around this requirement by placing a new constant in your wp-config.php file.

Which Modules Work In Dev Mode?

If you do use the constant above to put JetPack in developer/debug mode, some of the JetPack modules won’t be available for you to use, since they require a connection to an existing WP.com account in order to function. Below is a table showing which modules (as of JetPack 2.3) work in developer mode and which don’t.

Module NameDoes it Work?
PublicizeNo
WordPress.com StatsNo
NotificationsNo
JetPack CommentsNo
SubscriptionsNo
CarouselYes
Post By EmailNo
LikesNo
SharingYes
Spelling and GrammarNo
VaultPressNo
Gravatar HovercardsYes
OmnisearchYes
Contact FormYes
WP.me ShortlinksNo
Tiled GalleriesNo
Custom CSSYes
Shortcode EmbedsYes
Mobile ThemeYes
Beautiful MathNo
Extra Sidebar WidgetsYes
Infinite ScrollNo
PhotonNo
JSON APINo
Mobile Push NotificationsNo
Enhanced DistributionNo
JetPack DebuggerYes

Which Modules Are Worth Playing With?

Honestly, I have not had the opportunity to play with all of the modules built into JetPack, yet (some are too new for me to have played with them, others just don’t apply to anything I’m doing), but there are a few that I’ve played with that are really cool:

WordPress.com Stats

This module isn’t nearly as full-featured as Google Analytics, but it does offer some cool information about your site. The best part is that the stats can be easily included in your site’s Dashboard. With that feature, the admins of each individual site can get a quick glimpse of what’s happening on their sites without you having to give them access to Analytics or generate a report for them.

Once activated, JetPack will begin tracking some basic information about visits and pageviews on the site. JetPack will count the total number of pageviews, keep track of referrers, track keywords used to find the site, etc.

You can easily configure this module to determine which user roles have the ability to view the stat reports (the Dashboard module and the full report), as well as telling JetPack whether to track logged in users (by user role). This module is also configured, by default, to add a small chart to the Admin Bar for logged-in users, so they can see a really basic bar graph showing recent activity (past 48 hours) on the site or page that they’re viewing.

Carousel

The Carousel module is fairly new, but it can be absolutely brilliant for use on your site. Instead of fiddling with a bunch of different plugins to implement a nice modal image carousel, you can simply activate this module. The Carousel module automatically hooks into the native WordPress gallery shortcode, causing any clicks within the gallery (which would normally open either the original image file, or take the user to the “Attachment” page for that image) to open a nicely-styled modal window with an image carousel in it. The users can then click forward/backward to view the other image in the gallery.

There are two configuration options for this module:

  1. What background color do you want to use for the modal window (Black or White)
  2. Do you want to display EXIF data (if present) with the image

There are a few caveats that go along with this module, though. At the moment, it automatically includes a comment area for the attachments. There is no way to turn this off. If you use this module, users will have the ability to comment on your images (of course, those comments still go through the normal comment-moderation process) and to view comments that have already been published. There are a few issues with this behavior:

  1. The comment functionality uses AJAX to retrieve the form and to check for comments each time you switch between images. This might start to take a toll on server resources if you’re not careful.
  2. This can be a little confusing for the user; many users may think that they’re seeing a form they can use to comment on the post/page they’re currently viewing, but they’ll actually end up commenting on the attachment.
  3. The comment form takes up real estate that could otherwise be used to show a slightly larger version of the image.

If you’re interested in seeing how this module works, you can click on any of the images in the galleries within this post.

Tiled Galleries

This is a fairly new module, so I haven’t played with it extensively. However, it does seem to offer some pretty cool functionality. Basically, instead of displaying a boring grid of images when you insert a gallery into your post or page, the images will be automatically arranged into a nice mosaic-style layout. At the bottom of this post, I’ve inserted a gallery with all of the images from the post so you can see how the Tiled Galleries module lays out the images. You can see more samples of the three different layouts available by checking out the official demo post on WP.com.

Sharing

We’ve all been there. We’ve had site owners ask us to add “Share this post” buttons to their blog posts, pages, etc. In the past, there were a bunch of different plugins we could use to implement this feature, but they all had their issues. Many of them used huge amounts of JavaScript, and were coded poorly so that they interfered with a lot of other things on our sites. They also seem to be one of those categories of plugins that requires the most amount of maintenance, but actually receive the least amount of maintenance (the various social providers constantly change the way their APIs and features work, while the plugin developers tend to ignore the changes). I’ve also found quite a few of these plugins that require an advanced degree in order to figure out how to configure the various options.

With the Sharing module in JetPack, a lot of those concerns disappear. The JavaScript is fairly clean and efficient, and the plugin is supported by Automattic, so it receives constant attention. You can easily configure the plugin to implement just the sharing services you want, and there’s very little overhead.

Unfortunately, it does not allow you to specify whether the sharing buttons should go above or below the post, but there are a few other nice configuration options.

  • Drag and drop services that should be available for sharing
    • Email
    • Print
    • Facebook
    • Twitter
    • Digg
    • Google+
    • LinkedIn
    • Pinterest
    • Reddit
    • StumbleUpon
    • WP PressThis
    • Tumblr
    • Pocket
  • Drag and drop services into a separate area to create one “Share” button that opens a dialog with the available sharing options (like those annoying AddThis buttons)
  • Specify what types of buttons are shown
    • Icon + Text
    • Icon only
    • Text only
    • Official buttons
  • Specify what types of pages and content types should use the sharing buttons (archives, posts, pages, other content types, etc.)
  • Disable CSS and JS (if the JavaScript and CSS conflict with your own configurations, you can disable the packaged files; this requires that you put your own JS and CSS in your theme, though)

Custom CSS

The Custom CSS module within JetPack

The Custom CSS module within JetPack

This module can be a real lifesaver. Basically, it adds a new menu item under the “Appearance” menu that allows you to edit CSS. When you visit the new admin page for Custom CSS, you will be greeted with a blank CSS file. You can add your own CSS rules to that stylesheet, and they will be added to your site when the wp_head() action is fired.

Recently, Automattic added support for LESS and SASS to this module, so you can even write your CSS in one of your favorite pre-processor flavors.

In addition to being able to choose a pre-processor to use with the Custom CSS you write, you can also choose whether you want the custom CSS added to your existing styles (the custom stylesheet will be output after your theme’s stylesheet(s)), or to replace your theme’s CSS (the theme stylesheet(s) will not be output on the page, relying entirely on your custom rules).

Unfortunately, as of right now, it’s difficult to specify which users actually have access to this module. If you are running WordPress Multisite, only Super Admins will be able to use the Custom CSS module; it would be much more useful if there was a way to allow normal site admins the ability to modify the CSS. With that being the case, the same users that have access to the Custom CSS module also have access to edit the original theme files and to install new themes and plugins (and, more than likely, have the ability to upload custom mu-plugins if necessary). However, if normal site admins had the ability to make these changes, you could easily turn on a common theme and allow them to make minor changes to the appearance of their sites.

In the case of the University of Mary Washington, we’re using a custom child theme of Genesis, which also allows us to add some custom CSS. The difference is, within Genesis, the site admins themselves have access to these settings, so it’s much more extensible than the JetPack module. In a pinch, though, especially if you’re used to using SASS or LESS, the Custom CSS module in JetPack can be extremely useful.

Shortcode Embeds

This module is somewhat hit-and-miss. It implements some really nice, new shortcode embeds, but it also just rehashes some things that are natively available through oEmbed support.

The portions of this module that aren’t already implemented through WordPress’ native oEmbed support are:

  1. Audio – with this module, you can now embed an audio file (mp3, etc.) and have it rendered on the front-end as a player, rather than just a link to the file
  2. Ted – embed TedTalk videos (does not yet seem to be supported through native oEmbed support)
  3. Bandcamp – embeds audio from Bandcamp.com
  4. Gallery slideshows – allows you to turn a native WordPress gallery into a nice slideshow/carousel (different from the “Carousel” module mentioned above – this actually replaces the gallery grid with a slideshow, rather than requiring the user to click on one of the gallery items to open a carousel)
  5. Archives – allows you to embed an archive of posts within a page or post
  6. GoogleMaps – embeds a Google map

Extra Sidebar Widgets

This module adds a handful of new widgets that you can place in your widgetized areas. At this time, there are three new widgets implemented by this module:

  1. RSS Links Widget – displays links to your site’s RSS feeds
  2. Twitter Widget – displays your Twitter timeline (requires configuration on Twitter before using – thanks to the new Twitter API)
  3. Image Widget – allows you to display an image from your media gallery within your sidebar

In my opinion, the only widget in this pack that’s really worth using is the Twitter widget. There aren’t a lot of situations in which I can envision needing the RSS Links widget (there are probably much easier ways to implement this if you really want it), and the Image Widget currently lacks some functionality you can find in other similar plugins. However, with the rapid pace at which Twitter changes its requirements, a Twitter widget officially supported by Automattic might be worth its weight in gold.

Gallery Samples

Below are four different samples of how you can implement native WordPress galleries with the JetPack plugin. The first three are the three layouts made available through the Tiled Galleries module, the last one is the Slideshow made available through the Shortcode Embeds module.

Mosaic Style

Square Tiles

Circles

Slideshow (implemented by Shortcode Embeds)

This slideshow requires JavaScript.

What Say You?

Notice a module that I missed while reviewing JetPack? Have something more to say about a module I discussed? Want to yell at me for getting something wrong? Let us know in the comments what you think.

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)
Some Cool JetPack Tools To Play With, 4.0 out of 5 based on 1 rating

Comments

  1. George Sackett says

    Introduced to Jetpack when trying to look at stats using the WordPress mobile app. Lots of fun tools to play with.

  2. Emma Macphail says

    Great article. Thanks.

  3. Perfect. Just in time to help with the development of our new WordPress-driven student media site now underdevelopment!

  4. williamrford says

    Nice article. I am looking to use a wordpress blog to provide feedback and support for undergraduates in the areas that I teach on. I have been looking for a way of providing notification of new posts to users facebook pages. I do not want to use my facebook page nor do I want to have access to undergraduates personal pages. Would the ‘Sharing’ module in jetpack achieve this aim?

    • I’m not sure JetPack is capable of doing this. If the students were authors of new posts, you could use JetPack to let them automatically share their own new posts to their Facebook profiles, but there’s no way to automatically notify them on Facebook that you’ve posted a new item. The only way I could think of to achieve this would be if there was some way to post to their Facebook pages via email, you could let them sign up for email notifications and have those emails automatically directed to their Facebook profiles.

Trackbacks

  1. […] have to connect it to a WordPress.com in order to use some of its features. Here’s a handy list of features that are supported using Jetpack’s development […]

Leave a Reply