underscores

Granting Commit Access to Underscores

With Underscores’ growing popularity and continuing maturation as an open source project, we decided to take the next step and open up commit access to contributors outside of Automattic. Please join me in congratulating Philip Arthur Moore on becoming the first external committer to an Automattic project on GitHub.

Philip has been a fairly easy choice as we obviously know him well here at Automattic. He was with us for over three years and a driving factor in everything theme related during his time with us. But more importantly, he continues to care about Underscores and contribute in discussions and patches, and we know about his theme development skills and passion for world class themes.

We’re much more conservative with our Underscores goals and dreams than most people wanting to contribute, so it is important to us that committers share these values and understand where we see the project headed. We have no doubt that that is the case with Philip, who helped shaping Underscores from the day it started. Andrew Nacin recently published a post about how the WordPress project chooses committers, and while WordPress and Underscores are vastly different open source projects, there is still a lot to take away from it—especially around the qualities of a great contributor—that also applies to this project.

Underscores just recently celebrated its second birthday. It has become an integral part of many projects, not only at Automattic, but for theme developers all over the world. So we’re exited to have Philip back in a leading role and continue this journey with us!

Swag

HTML5 Galleries in WordPress 3.9

With the new release of WordPress will come the ability to declare support for HTML5 markup in galleries. Once a theme declared support, the definition list elements will be replaced by <figure> and <figcaption> for better semantics.

If you decide to not only adopt this new feature but also maintain backwards compatibility, then there are two ways to achieve that:

  1. Style not only the new HTML5 elements, but also add CSS selectors for the traditional definition list elements. This is the route we chose for _s to keep it as simple as possible.
  2. Filter the shortcode attributes and override the tag parameters. Since the shortcode_atts_gallery filter was introduced in 3.6, you’ll be backwards compatible with the latest two versions.

Continue reading

hands up

Tell Us What You Think

We’d love to know what sort of content you’d like to read on ThemeShaper in 2014. Take our quick poll and let us know!

Thank you to everyone who took the poll, we appreciate your feedback.

cain

Using Custom Headers for Avatars

Some themes like to use the admin account’s avatar, if available, in the header of the theme to highlight the author. However, it’s nice to be able to change that image if the admin email’s avatar is not appropriate nor changeable.

The free Automattic theme Writr, by our very own Thomas Guillot, takes the approach of using Custom Headers for customizing the avatar image. In short, we’ll be using Custom Headers to output our image, and its default image argument will allow us to insert the avatar when no custom header image has been uploaded. Let’s get started!

In header.php, we output our Custom Header image as usual.

<!--?php 	$header_image = get_header_image(); 	if ( ! empty( $header_image ) ) : ?-->
	<a class="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
		<img class="no-grav header-image" alt="" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" />
	</a>
<!--?php endif; ?-->

While declaring support for Custom Headers, we set the default-image argument to be a function (which we’ll use for our avatar logic).

function writr_custom_header_setup() {
	add_theme_support( 'custom-header', apply_filters( 'writr_custom_header_args', array(
		'default-image'          => writr_get_default_header_image(),
		...
	) ) );
}
add_action( 'after_setup_theme', 'writr_custom_header_setup' );

Finally, our writr_get_default_header_image function fetches an image from the Gravatar service. If there’s no account matching the admin email sent, we can request another image to be returned from Gravatar; we’ll try to match it to the “Default Avatar” value in Settings → Discussion (that’s all that $default business). More detail on the arguments being sent can be found in the Gravatar Image Requests documentation.

function writr_get_default_header_image() {

	// Get default from Discussion Settings.
	$default = get_option( 'avatar_default', 'mystery' ); // Mystery man default
	if ( 'mystery' == $default )
		$default = 'mm';
	elseif ( 'gravatar_default' == $default )
		$default = '';

	$protocol = ( is_ssl() ) ? 'https://secure.' : 'http://';
	$url = sprintf( '%1$sgravatar.com/avatar/%2$s/', $protocol, md5( get_option( 'admin_email' ) ) );
	$url = add_query_arg( array(
		's' => 120,
		'd' => urlencode( $default ),
	), $url );

	return esc_url_raw( $url );
} // writr_get_default_header_image

That’s it; we automatically get the avatar of the admin email (or an appropriate substitute) from Gravatar, or we can simply upload a new custom header image to override it. Have fun!

Cheetah in Namibia, by user tpsdave on Pixabay, CC0

Theme Performance

Website performance is a daunting, complicated subject; everything from servers, networks and the code itself affects the length of time it takes for our carefully-crafted pixels to arrive on the screen of our viewer. However, when it comes to WordPress themes, there are a few simple guidelines we can follow to make sure our themes help, rather than hinder, that process.

There is a single, unifying concept behind all of the following practices: less is more. Performance can be improved every time we:

  • reduce the amount of data we fetch,
  • reduce the time required to fetch that data, and
  • reduce the number of times we have to fetch data at all.

Image Handling

Images require special treatment to not get in the way of performance. These tips will make sure any images you require are as lean as possible.

  • Many images can be further compressed before suffering any visible loss in quality. Make sure any included images in your theme are compressed, either with your favourite image editor, or a tool like PNGCRUSH. Use the image format (JPG, PNG, or GIF) that best suits your situation and results in the smallest file size.
  • The best way to reduce image size? Don’t use them at all. If all you need are icons, use an icon font (like Genericons) instead, or the vector format SVG. Use CSS whenever possible for graphic elements, such as spinners or loaders.
  • If you must use multiple small images, combine them into a single file as CSS sprites, to reduce their download to just one HTTP request.

Scripts and Stylesheets

Scripts and stylesheets add up quickly. Simply adding third-party scripts and libraries that cover all edge cases can result in a lot of un-necessary code, while comprehensive CSS frameworks can also amount to needless data. Keeping in mind our mantra of less is more, two further action points can bring significant improvements to our page loads.

  • Minify, combine and compress your scripts and stylesheets to reduce their size and the number of requests to load them.
  • Enqueue scripts and stylesheets only on the pages that require them. See the Twenty Fourteen default theme for an example of how CSS and JS for the slider are conditionally loaded for just the home page.

Transients

Web servers have a very repetitive job. If ten users request our website in one minute, and nothing has changed on that page in that minute (a new post, categories removed, menus changed), it’s a bit of a waste for the web server to keep querying the database for the same information every time. This is where caching comes in. Caching is the general idea of doing the time-consuming data fetching one time, storing the results, and then delivering those stored results the next time someone asks for that same page. While the details of caching are far beyond this article, suffice it to say that the more our theme code can take advantage of caching, the speedier our sites will be – and the Transients API is a simple tool for theme developers to do just that.

Theme developers can store long-running queries in a transient, meaning each time that information is requested by the theme, it will be delivered quickly from cache rather than from a full query of the database. Secondary loops can be stored in transients, as well as the results of uncached core functions. The Twenty Fourteen default theme uses a transient for handling Featured Content.

For more information on transients and caching in general, Zack Tollman of The Theme Foundry has written an easy-to-understand overview of how WordPress uses caching in core.

Testing

Google’s PageSpeed Insights tool is extremely helpful when measuring performance of your sites in general. While some of it will not apply directly to theme code, it can point out issues with large images, unminified assets and more. There are two versions: a web version and a Chrome extension. The web version is usually more up-to-date (and now includes mobile-specific tests), while the extension can be used for offline, local testing.

Pingdom offers a suite of tools for web developers, one of which is the Website Speed Test. While PageSpeed is an overall review of best practices, Pingdom’s page test is focussed on load time, with the number of requests and load size for context.

Wrap-up

Getting content in front of our users as fast as possible is more important than ever these days, particularly considering the growing use of mobile phones and tablets. If we want content in front of our user within one second, we need to squeeze every millisecond we can get out of our themes and WordPress installs. Performance is an ongoing, incremental process which, with these guidelines and regular education, will keep your themes in top shape for all of your visitors, mobile and up. Remember: less is more!