$jetpack_active_modules = get_option('jetpack_active_modules');
if ( class_exists( 'Jetpack', false ) && $jetpack_active_modules && in_array( 'your-module', $jetpack_active_modules ) ) {
      // Do something
}

Here’s some popular module names you might be looking for:

• carousel
• contact-form
• custom-css
• gravatar-hovercards
• infinite-scroll
• minileven (mobile theme)
• sharedaddy
• shortcodes
• widgets

Since I couldn’t find any good code snippets or recommendations for how the callback should work I wanted to share a couple methods I tried. If anyone has improvements or recommendations, please let me know.

All of these examples use the “post-load” javascript event that Jetpack triggers. You can read about that on the Jetpack Infinite Scroll documentation page.

The Simplest

Trigger a re-layout after the new elements load in. The only issue with this that I’ve seen is a flash of un-organized posts layered on top of each other before the re-layout actually happens. (Solution found in this WordPress.org thread).

jQuery( document ).ready( function( $ ) {
	setInterval( function() {
     	$( '#content' ).masonry( 'reload' );
     }, 300 );
});

More Convoluted

Desandro recommends using the appended method in his docs. This is a bit more complicated to implement because you need to figure out which are the new elements.

Jetpack doesn’t pass the new elements in the “post-load” event, but does append a new div “.infinite-wrap” with a unique id “#infinite-view-1″. So, if you keep track of how many times the event has fired, you’ll be able find the div that contains the new elements.

Here was my attempt at that (works, but the new element layout never seems to be 100% consistent):

jQuery( document ).ready( function( $ ) {
     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
	infinite_count = infinite_count + 1;
	var $container = $('#content');
	var $selector = $('#infinite-view-' + infinite_count);
	var $elements = $selector.find('.hentry');
	$elements.hide();
	$container.masonry( 'appended', $elements, true );
	$elements.fadeIn();
     });
});

Final

This final method I went with is a bit of the mix between the two. It uses the “reload” method which seems to be more consistent, but also keeps track of which are the new elements and fades them in as they load. This seemed to create a smoother visual effect than simply popping them into place.

jQuery( document ).ready( function( $ ) {
     infinite_count = 0;
     // Triggers re-layout on infinite scroll
     $( document.body ).on( 'post-load', function () {
	infinite_count = infinite_count + 1;
	var $container = $('#content');
	var $selector = $('#infinite-view-' + infinite_count);
	var $elements = $selector.find('.hentry');
	$elements.hide();
	$container.masonry( 'reload' );
	$elements.fadeIn();
     });
});

Feedback

If you have any suggestions or feedback as to improve this code, please let me know.

Other Resources

• Infinite Scroll Jetpack Docs
• Jetpack Infinite Scroll Tutorial by Otto
• Add Infinite Scroll to Any WordPress Theme (Not Using Jetpack)

Lazy Load Your Images

One popular technique for speeding up the initial load time is called “lazy loading”. It works by replacing the source of images (src=”/example.gif”) with a transparent placeholder image (src=”/pixel.gif”). This allows everything else on the page (text,fonts,scripts,etc) to render first.

The original source for the image is generally saved into a data attribute, such as “data-src”, so it can be accessed in later.

This is helpful because we now have complete control over when images get loaded. At any time the source of the image (src=”/transparent.gif”) can be replaced by the actual source in the data attribute. (See a simple jQuery plugin example).

Several lazy load scripts also work by only loading in the actual images once they enter the viewport, which means the images in the footer won’t load in until the user has actually scrolled down that far. This can save bandwidth for the user as images that don’t get viewed, won’t get loaded.

Also, many jQuery plugins use a quick fadeIn function when replacing images with their actual source, which can be a nice visual effect.

Lazy Loading in WordPress

The key in WordPress is to filter the_content, post_thumbnail_html, and get_avatar content so that any images will have their source replaced by the transparent placeholder.

The best solution I found for this is in the Lazy Load plugin code by Automattic, Jake Goldman, 10Up, and Mohammad Jangda. If you’re simply looking for the easiest way to lazy load images on your site I highly recommend using the plugin.

The Lazy Load plugin uses a single function to filter any $content passed to it, and replace any images within that $content with the placeholder image. Here’s what it looks like (slightly modifed):

function add_image_placeholders( $content ) {
	// Don't lazyload for feeds, previews, mobile
	if( is_feed() || is_preview() || ( function_exists( 'is_mobile' ) && is_mobile() ) )
		return $content;

	// Don't lazy-load if the content has already been run through previously
	if ( false !== strpos( $content, 'data-src' ) )
		return $content;

	// In case you want to change the placeholder image
	$placeholder_image = apply_filters( 'lazyload_images_placeholder_image', get_template_directory_uri() . '/images/pixel.gif' );

	// This is a pretty simple regex, but it works
	$content = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', sprintf( '<img${1}src="%s" data-src="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $placeholder_image ), $content );

	return $content;
}

Then, you can add your filters to replace images in specific bits of content.

Post Content:

add_filter( 'the_content', 'add_image_placeholders', 99 );

Featured Images:

add_filter( 'post_thumbnail_html', 'add_image_placeholders', 11 );

Avatars (generally in comments):

add_filter( 'get_avatar', 'add_image_placeholders', 11 );

Javascript

Once you’ve implemented the code above in your theme, you shouldn’t be seeing any images in the content that you filtered- just the placeholder pixel.

So, now you can replace the images when you choose with a bit of jQuery:

jQuery('img').attr('src',jQuery(this).attr('data-src'));

The Lazy Load WordPress plugin uses jQuery Sonar, which doesn’t replace images until it is in the viewport window.

There are also a ton of other scripts that do something similar. I say find one that works for you (it’ll likely need a bit of customization), or roll your own.

Should you lazy load images in a theme?

I originally had a homebrewed version for lazy loading thumbnails in my Visual theme, but have since decided to remove it.

I think functionality like this is much better handled by a plugin like Lazy Load. I plan to start encouraging users to install this plugin, and may even add a notice and automatic loader for it.

Theme Features

• Masonry layout: Regardless of the featured image height and width (or even if no image is selected) the posts will look great in a nice dynamic grid.
• Responsive Layout: Visual looks great on small screens, such as tablets and smartphones, as well as on laptops and desktops.
• Three color schemes: Light, Dark and Minimal
• Typography: Uses Raleway, a beautiful webfont by Matt McInerney and served by Google Fonts
• Icon Font: Pixel dense retina displays look great with this theme because of the icon gylphs from Entypo, by Daniel Bruce.
• Solid code: Visual is built off of the Underscores starter theme and uses WordPress best practices.

How to Use the Theme

• Download the theme and activate
• Set your menu in WordPress (under “Appearance” > “Menus”)
• If images don’t show up by default, you may need to set the featured image. Edit your post and click “Set featured image”.
• If you are making changes to the CSS or template files, consider using a child theme. You can download this one to start with.

WordPress.com Users

A version of Visual has been built for WordPress.com. You can get it for free here. If you’re using Visual on WordPress.com you won’t be able to alter the template code or use third-party plugins, but you can still make some css changes with custom design upgrade.

Theme Demo

View the Demo

Get the Theme

Download from WordPress.org

Upgrade

For additional options, features, and support, check out Visual+. Purchases help to support both the free and paid versions. Read more.

One way I’ve handled this in the past is to use the Superfish jQuery plugin, which adds a class to any list items with children. This allows them to be styled differently- with a background image of a down arrow (for instance).

However, I just saw a new theme released by Paul de Wouters called Spine. Instead of using javascript to apply the class- he uses a custom Walker_Nav_Menu so that the class is added to the markup directly.

I think this is a much better way to do it, and solves an issue I’ve seen in some themes where the menu items shift a bit when the new classes and styling are applied with javascript.

Custom Walker Code

I’ve adapted Paul’s code a little bit so it just adds a “has-children” css class to any top level “li” that has a “ul” contained within it:

class Custom_Nav_Walker extends Walker_Nav_Menu {

	function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
		$id_field = $this->db_fields['id'];
		if ( !empty( $children_elements[$element->$id_field] ) && ( depth == 0 ) ) {
			$element->classes[] = 'has-children'; // Use any classname you like
		}
		Walker_Nav_Menu::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
	}
	
}

Then, when you call the menu in the theme, make sure to include the walker:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new Visual_Nav_Walker(), 'depth' => '2' ) ); ?>

However, for some reason the above code does not fall back to wp_page_menu properly when no menu is set. So, this is my workaround:

if ( has_nav_menu( 'primary' ) ) {
     wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new Visual_Nav_Walker(), 'depth' => '2' ) );
} else {
     wp_page_menu();
}

Menu Filter (Updated 3/20/13)

Chip Bennet posted an alternative approach using a filter on wp_nav_menu_objects to the WordPress Theme Reviewers List. This approach seems a bit more straightforward than a walker, so it’s also worth checking out.

Styling the List Item

There’s many ways you could go about styling this list item with the “has-children” class. For a new theme I’ve been working on, I already use glyphs from the Entypo icon font- and I think the “chevron-small-down” from this collection works great as a drop down menu indicator.

To use it with my menu (.main-navigation) I just needed to add this CSS:

.main-navigation li {
     float: left;
     position: relative;
}
.main-navigation li.has-children a {
     padding-right:40px;
}
.main-navigation li.has-children > a:after {
     content:'\e760';
     font-family: 'entypo';
     position: absolute;
     right:20px;
     speak: none;
}

(For more about using icon fonts, see this post)

I’ve also been thinking a “has-children” class might be a good core feature. Any thoughts?

/**
 * TypeKit Fonts
 *
 * @since Theme 1.0
 */
function theme_typekit() {
    wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxxx.js');
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
  	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
}
add_action( 'wp_head', 'theme_typekit_inline' );

Display Thumbnail Landscape

In this theme the default display of the thumbnails is a cropped to a square next to the title. But if the user had a large landscape image, they could choose to display it full width instead.

Option to Display Featured Image in Post Automatically

In this theme the featured image is used as a thumbnail on portfolio archive pages, but it is also displayed full size on the portfolio post types. This option gives users the option to use a different image in the actual post if they prefer.

Add the Option

Adding the option is fairly simple, you’ll just need to hook into the admin_post_thumbnail_html filter:

/* Add a checkbox to the featured image metabox */

add_filter( 'admin_post_thumbnail_html', 'theme_featured_image_meta');

function theme_featured_image_meta( $content ) {
	global $post;
	$text = __( "Don't display image on post.", 'textdomain' );
	$id = 'hide_featured_image';
	$value = esc_attr( get_post_meta( $post->ID, $id, true ) );
    $label = '<label for="' . $id . '" class="selectit"><input name="' . $id . '" type="checkbox" id="' . $id . '" value="' . $value . ' "'. checked( $value, 1, false) .'> ' . $text .'</label>';
    return $content .= $label;
}

Sanitize and Save the Option

This option will need to be sanitized and saved when the post is updated- like any other custom field in a metabox.

This is a longer topic than I want to cover in this short post, but if you need a tutorial on how to do that I’d recommend the one on Smashing Magazine by Justin Tadlock.

Credits

The thumbnail images above are from Alexander S. Kunz Photography.

To get started, I just downloaded a copy of CodeKit (OSX) and dropped a couple theme directories into it. When that happened, CodeKit started to watch all the LESS and SASS files in those directories- and automatically compiled them into actual CSS files whenever I saved.

To become more familiar with the syntax, I forked a copy of Jared Erickson’s LESS theme on GitHub and made some edits. Then I converted it to SASS syntax. If you’re completely new both SASS and LESS- I think that’s a fun small project to do.

I didn’t get deep into the mixins and nesting, but I already see several ways it could improve my workflow. And honestly, I was just as impressed with the CodeKit UI and features- like live browser reloading, file minification, etc.

Just so you have no reason not to try it too, I made a short video showing how to take a regular WordPress theme and set it up to start using SASS files with CodeKit:

Other Resources

• Musings on Preprocessing (CSS Tricks)
• SASS Documentation
• LESS Documentation
• CodeKit

Original

Let’s say this is the script you are enqueuing:

function prefix_enqueue_custom_script(){
	wp_register_script( 'prefix_custom_script', plugin_dir_url( __FILE__ ) .'js/custom-script.js', array( 'jquery' ) );
        wp_enqueue_script( 'prefix_custom_script' );
}

Translatable

In this custom script there are two strings that should be translatable: “upload” and “remove”. To make this happen we’ll use the wp_localize_script function, which gets hooked onto the script handle:

function prefix_enqueue_custom_script(){
	wp_register_script( 'prefix_custom_script', plugin_dir_url( __FILE__ ) .'js/custom-script.js', array( 'jquery' ) );
        wp_enqueue_script( 'prefix_custom_script' );
        wp_localize_script( 'prefix_custom_script', 'prefix_object_name', array(
		'upload' => __( 'upload', 'textdomain' ),
		'remove' => __( 'remove', 'textdomain' )
	) );
}

Using the Strings

Now in my javascript, instead of simply using the text “upload” and “remove” I’ll use the variables prefix_object_name.upload and prefix_object_name.remove.

This tutorial explains how to output post meta (comments, tags, categories, edit link) and display a small icon before each one using an icon font. Icon fonts are great for this purpose because they can scale to any size, look great on retina devices, have a smaller file size than images, and use a single HTTP request.

Examples

An icon font I particularly like (and use in this demo) is Entypo by Daniel Bruce. There’s over 250 icon glyphs available in the font and the download size is only 19k. But there are a lot of great choices out there to use. (Update: the tags icon is now from FontAwesome)

Build a Custom Font

Since you’ll generally only need a couple of the glyphs in the icon font you use, I recommend using Fontello to trim the font down to what you need. In my theme, I only needed five of the glyphs- which took the download size down to 4k!

Fontello also allows you to remap the characters, generates all the CSS you need, and puts it into a nice little download package (for free!). I didn’t use the exact CSS Fontello generated, but it was extremely useful to get the ASCII number for the glyphs so that I could easily pop them into a :before psuedo element in my own stylesheet.

The Markup/Code

I’m about to paste in a big blob of code here that I use to output the post meta. What this does is:

• Links to the comments section of the post and displays the number of comments (if there are any)
• Outputs the categories the post is listed in, as long as there is more than one category on the site
• Outputs the list of tags (separated by commas) if the post has any
• Displays the edit link (for users with permissions to edit the post)

Most of this is ripped directly out of the _s theme, which I use as a base for most of my custom themes.

<footer class="entry-meta">
	<?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
		<span class="icon comments-link"><?php comments_popup_link( __( '<span>Comment</span>', 'example' ), __( '1 <span>Comment</span>', 'example' ), __( ' % <span>Comments</span>', 'example' ) ); ?></span>
	<?php endif; ?>
	<?php if ( 'post' == get_post_type() ) :?>
		<?php
			/* translators: used between list items, there is a space after the comma */
			$categories_list = get_the_category_list( __( ', ', 'example' ) );
			if ( $categories_list ) :
		?>
		<span class="sep"> | </span>
		<span class="icon cat-links">
			<?php printf( __( '<span>Posted in</span> %1$s', 'example' ), $categories_list ); ?>
		</span>
		<?php endif; // End if categories ?>
		<?php
			/* translators: used between list items, there is a space after the comma */
			$tags_list = get_the_tag_list( '', __( ', ', 'example' ) );
			if ( $tags_list ) :
		?>
		<span class="sep"> | </span>
		<span class="icon tag-links">
			<?php printf( __( '<span>Tagged</span> %1$s', 'example' ), $tags_list ); ?>
		</span>
		<?php endif; // End if $tags_list ?>
	<?php endif; // End if 'post' == get_post_type() ?>

	<?php edit_post_link( __( 'Edit', 'example' ), '<span class="sep"> | </span><span class="icon edit-link">', '</span>' ); ?>
</footer><!-- .entry-meta -->

Styling

Now that the markup is in place, we can style it with the icon font.

You’ll need to load the font at the top of style.css in your theme. In mine, I use a custom font generated by Fontello called “ExampleCustom”:

@font-face {
    font-family: 'ExampleCustom';
    src: url('fonts/example.eot');
    src: url('fonts/example.eot?#iefix') format('embedded-opentype'),
         url('fonts/example.woff') format('woff'),
         url('fonts/example.ttf') format('truetype'),
         url('fonts/example.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Below is the styling I used for the meta elements. Basically we’re just using a :before psuedo element to output the glyph character (e.g. content: ‘\270e’;). The characters will be different depending on the icon font use.

footer.entry-meta a {
	color:#555;
	text-decoration: none;
}
footer.entry-meta a:hover {
	color: #0a836b;
}
footer.entry-meta .sep {
	margin:0 8px;
}
.cat-links span, .tag-links span {
	width:0;
	display: inline-block;
	text-indent:-9999em;
}
.icon:before {
	vertical-align: -2px;
	color:#454545;
	font-family: "ExampleCustom", sans-serif;
	font-size:20px;
	font-size:2.0rem;
	margin:0 4px 0 0;
}
.icon:hover:before {
	color: #000;
}
.comments-link:before {
	content: "\e720";
}
.cat-links:before {
	content: "\1f4c4";
}
.tag-links:before {
	content: "\e70d";
}
.edit-link:before {
	content: '\270e';
}

The text for “Posted In” and “Tagged” would normally be displayed, but since I have an icon font to convey the message, that text is hidden with a “text-indent:-9999em;”.

Download an Example

If you want to play with a real life example, check out the theme I’ve been working on.

On my site I now display the post dates as a human time diff (aka, a human readable format) if the post is less than a month old. If it’s older than I month, I use the standard date format selected inside the WordPress dashboard under “Settings > General : Date Format” (in my case Month Day, Year).

The Code Snippet

if ( ! function_exists( 'example_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 *
 * @since Example 1.0
 */
 
function example_posted_on() {
	$post_date = the_date( 'Y-m-d','','', false );
	$month_ago = date( "Y-m-d", mktime(0,0,0,date("m")-1, date("d"), date("Y")) );
	if ( $post_date > $month_ago ) {
		$post_date = sprintf( __( '%1$s ago', 'example' ), human_time_diff( get_the_time('U'), current_time('timestamp') ) );
	} else {
		$post_date = get_the_date();
	}
	printf( __( 'Posted <time class="entry-date" datetime="%1$s" pubdate>%2$s</time><span class="byline"> by <span class="author vcard">%3$s</span></span>', 'example' ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( $post_date ),
		esc_html( get_the_author() )
	);
}

endif;

Explanation

Use a Function

Instead of adding this code to each template where I need to display the date, I’ve wrapped it in the function “example_posted_on” so I can reuse and easily update it if needed. Whenever I need to call the date, I just use example_posted_on().

Since this is used in a theme of mine, I’ve wrapped it in a “if ( ! function_exists( ‘example_posted_on’ ) ) :” check so someone can easily override it from a child theme if they need to.

Compare the Timestamps

To check if the date of the post is older than a month, I generate a timestamp to compare with the one from the post:

$month_ago = date( "Y-m-d", mktime(0,0,0,date("m")-1, date("d"), date("Y")) );

You could easily change this to be to any time period you want and compare those timestamps instead.

Make Sure it is Translatable

If you’re wondering why the strings are wrapped in “sprintf” and “printf”, that’s so everything can be translated if someone wants to localize the theme for a different language. Make sure to change the textdomain “example” to whatever you’ve defined as the textdomain in your theme.

Be Careful of Caching

If your site makes use of heavy caching (W3C Total Cache, and/or a good CDN) your post “day” may get stuck for a while. If it’s included as part of a publicly released theme you may want to give users an option to turn it off and use the regular date instead.

Another option (in that case), would be to use javascript to look for the post date, and convert it to a human readable format on front end instead- but that’s probably fodder for another post.

This video explains how to use Optimizely to create a basic multivariate test (relying on javascript to push events and create variants). Some of that code is also posted below.

Tracking Events

I fire off a tracking event for anything I want to track on the page. My primary use for this is to measure clicks, and to see my variants have any effect on this (e.g. measuring clicks on a conversion module).

Here’s some of the example code I used on WP Theming to measure clicks on the different sections of the page. I put this code under “Options -> Global Javascript” in the Optimizely editor:

window.optimizely = window.optimizely || [];

$("#masthead a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'masthead']);
});

$(".hentry a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'hentry']);
});

$("#comments a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'comments']);
});

$("#colophon a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'footer']);
});

In this example I am tracking any clicks on any link in the #masthead, .hentry, #comments, and #colophon. You’ll also need to add a goal for each of these track events if you want to see it in the results dashboard.

To set up a new goal, click “Set Up Goals” in the Optimizely editor, then “Add a Goal”, then “Create a New Goal”. Under “What to Track”, select “Custom Event”. You can name your goal whatever like, but make sure the “Custom Event to track” matches trackEvent you’re pushing in the javascrip (e.g. masthead, hentry, comments, footer).

Create a Variant

To create a new variant, just click “Add Variation” from the Optimizely editor and name it. Then click the “Edit Code” tab at the bottom of the screen, and put in whatever jQuery you want to alter the appearance of the variant. In the WordPress.com example, I used:

$('#home-signup h4').text('Free Account');

Using Optimizely with WordPress

Optimizely has their own plugin to embed the code, but as I mentioned in the screencast, it’s a bit of a blunt instrument.

If you’re comfortable editing code, I’d probably just enqueue it yourself and only load it on the pages you need:

function prefix_optimizely() {
	if ( !is_single() ) {
		wp_enqueue_script( 'optimizely', 'http://cdn.optimizely.com/js/xxxxxxx.js', array( 'jquery' ), false, true );
	}
}
add_action('wp_enqueue_scripts', 'prefix_optimizely');

This above code (for example) would just load the Optimizely snippet on single post pages.

Is Optimizely Worth It?

If you sell any sort of product and have a good amount of traffic to your site, I think it’s worth investigating how users interact with your site. If you could change the color of a link, move a button, or use a different image on your home page, and that led to a 5% increase in sales, would that be worth it?

Sidenote: If you need help setting up variants in Optimizely for your WordPress site, get in touch.