Adaption, Bosco & Isola – Three New Free Themes

A trio of themes from Automattic designers has launched in the WordPress.org Theme Directory.

Designed by Tammie Lister, Adaption has a bold, contemporary, vibe. It features full-width images, two widget areas, and an optional third column.

Adaption

Adaption

Looking for an uncluttered single-column theme with strong typography? Check out Bosco, crafted by Frank Klein.

Bosco

Bosco

Isola was inspired by a “less is more” philosophy and influenced by mobile design patterns. This minimalist theme was designed by Joen Asmussen, with web development by Caroline Moore.

Isola

Isola

All three themes are responsive, and look gorgeous on devices both small and large.

Meet Kelly

Kelly, a colorful personal-blogging theme designed by Automattic’s Kelly Hoffman, is now available for download from the WordPress.org Theme Directory. Here’s how Kelly explains the creative inspiration for her namesake:

I really wanted to keep it simple but fun, which is why I went with bold splashes of color and large type. I went with the complementary color palate of reddish orange and green as a fun reference to my red hair and green eyes.

Kelly

Sharedaddy

Customizing Jetpack’s Sharing module

One of my favorite feature in Jetpack is sharing, but if you are a theme designer/developer like me, it can be really frustrating trying to customize it.

By adding a simple filter to functions.php or inc/jetpack.php if your theme is based on _s, you can actually avoid the Sharedaddy stylesheet from being enqueued.

/**
 * Remove Jetpack's sharing script.
 */
function _s_remove_sharedaddy_script() {
	remove_action( 'wp_head', 'sharing_add_header', 1 );
}
add_action( 'template_redirect', '_s_remove_sharedaddy_script' );

Now you can add you own custom CSS without worrying about multiple levels like .site-main .entry-content > .sharedaddy .sd-title, or having to use !important to overwrite the Sharedaddy stylesheet.

If you want to go a bit further, you can use some jQuery/Javascript. For example, if you want to create a link that, when you click on it, toggles the sharing buttons:

1) Let’s add some CSS to hide the div:

.sd-sharing-enabled:not(#jp-post-flair) {
	display: none;
}

2) Then create some (very basic) jQuery to do the magic:

/*
 * Create a toggle button for sharedaddy.
 */
function sharedaddy_toggle() {

	// Create toggle button
	$( '.sd-sharing-enabled:not(#jp-post-flair)' ).each( function() {
		$( this ).before( '<a class="sharedaddy-sharing">Toggle Button</a>' );
	} );
	
	// Click to open
	$( '.entry-content' ).on( 'click', '.sharedaddy-sharing', function() {
		$( this ).next( '.sd-sharing-enabled' ).toggle();
	} );
	
}

Make sure you load the function after the window is loaded and after a post-load (for Infinite Scroll).

3) Ta-da!
Sharedaddy toggle

You can do the same with the Related Posts module or Likes module like so:

/**
 * Remove Jetpack's related-posts and likes scripts.
 */
function _s_remove_jetpack_scripts() {
	wp_dequeue_style( 'jetpack_related-posts' );
	wp_dequeue_style( 'jetpack_likes' );
}
add_action( 'wp_enqueue_scripts', '_s_remove_jetpack_scripts' );

Be aware that the Likes module isn’t fully customizable because the buttons are located in an iframe.

Have fun!

Pictorico

Spring Theme Launches on WordPress.org

Over the last few months, Automattic has released a half-dozen new free themes in the WordPress.org theme directory, ranging from stylish personal blogging themes to photo-intensive portfolio themes.

Meet the class of 2014:

Designed by Automattic’s Dan Hauk, Pictorico is a snazzy portfolio theme with large featured images and a classy post slider.

Pictorico

Caroline Moore launched three flexible blog-oriented themes of her own design: Fictive, as well as Quadra and Circa, both child themes of Hexa. All take attractive advantage of post formats, with charming use of colorful geometric icons throughout.

Hexa Circa Quadra

Tonal is Tammie Lister‘s debut solo theme in the WordPress.org directory. Tonal’s graceful, minimalist look also comes with a bonus: change the site’s background color to a shade of your liking and the theme automatically adjusts the typography to ensure your text stays clean and readable.

Tonal

Musicians have been taking full advantage of Singl‘s strong, contemporary vibe. Crafted by Thomas Guillot, it serves its creative niche with polish and panache.

Singl

We hope you enjoy our Spring Collection!

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!