You may have code that relies on certain JetPack functions. If so, there’s a simple way to check if the module you need is enabled:
if ( class_exists( 'Jetpack' ) && Jetpack::is_module_active( 'photon' ) ) : endif;
JetPack Infinite Scroll + Masonry
I added support for Jetpack Infinite Scroll on a theme of mine that uses Masonry recently.
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. Continue reading
Lazy Loading Images
Images are generally the heaviest assets on a webpage- so if you’re interested in fast load times for users, this is one of the best places to optimize.
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. Continue reading
Visual Theme
Visual is a free theme designed to showcase photography, artwork and images in a neat masonry grid layout. Continue reading
Drop Down Menu Indicator
Update: Menu items now have the class “menu-item-has-children” that can be used for styling thank to this core ticket. So, the menu walker is no longer needed.
I think it’s important to give users a visual cue when menu items have a drop down menu.
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.
Continue reading
TypeKit Code Snippet
Assuming you don’t want to use the TypeKit plugin, here’s how to enqueue the scripts directly from your theme:
https://gist.github.com/devinsays/fb8bee935967cb673c40e854700a1569
Featured Image Meta
I’ve built a couple themes where I’ve needed to give users more control over how the featured image is displayed for individual posts. The obvious place to put these options are in the thumbnail metabox itself.
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.
Getting Started With CodeKit + CSS Preprocessors
I experimented with CSS preprocessing today (both LESS and SASS). I have to admit, it was much easier to set up than I thought and really intuitive to use.
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. Continue reading