Sketch

Five New Themes Come to WordPress.org

We’re tremendously pleased to announce the WordPress.org launch of three gorgeous portfolio themes and two elegant business themes by Automattic.

Espied, Illustratr, and Sketch take advantage of the portfolio custom post type available through Jetpack to let your projects shine. Illustratr was designed by Thomas Guillot and Sketch is by illustrator and web developer Caroline Moore. Espied was created by Takashi Irie, designer of the upcoming Twenty Fifteen default theme.

Edin and Goran both showcase your company or organization through an optional front-page template featuring a large full-bleed featured image. A grid page template provides the perfect place to display a range of information, like team members, case studies, or services. Thomas designed Goran, a child theme of Edin, and collaborated on Edin with Takashi.

We hope you enjoy these new themes – let us know what you think!

Sketch

Illustratr

Espied

Goran

Edin

3194123638_33d9ffe462_b

Why Bootstrap is a bad fit for WordPress Themes

Since its release in 2011, Bootstrap has quickly become the most popular front-end framework on Github. This popularity also has an impact on the world of WordPress themes, with authors using the framework during development or even releasing themes that feature Bootstrap as unique selling point.

This is surprising, because Bootstrap is not a great fit for WordPress theme development.

Bootstrap is the wrong tool for the job

Bootstrap was created at Twitter as a tool for back-end developers to easily create interfaces for their applications. Before Bootstrap, various other libraries were used, which resulted in inconsistent and difficult to maintain interfaces.

So Bootstrap was created with a precise goal in mind, and it continues to develop according to this initial vision for the project. It was created so that developers could focus on back-end code and quickly iterate without having to worry about the front-end.

This is why it’s the wrong tool for a WordPress theme: the front-end, or how the site looks with the theme activated, is all that counts.

Bootstrap does not do things the WordPress Way

WordPress facilitates theme development by providing a set of functions to be used in template files. By leveraging the HTML output of these functions, developers can write efficient and clean code that works with a variety of content.

Bootstrap on the other hand has its own approach to how the HTML is structured, and it does not fit well with what WordPress provides by default.

As such, developers have to take extra steps and write additional code to modify WordPress’ behavior to the fit how the framework works. A good example for this are navigation menus. Instead of using the output of wp_nav_menu(), developers have to write Custom Walker classes that change the HTML output by the function so that the Bootstrap CSS and Javascript can be used.

This approach results in more code and as such is less efficient, results in more maintenance and development time and also does not benefit from the enhancements made to the Core functions.

Bootstrap is bloated

Framework code can never be as efficient as code written for a specific purpose, since frameworks build up from general cases to more specific cases and add bloat in the process. Often multiple CSS classes need to be added to HTML elements to achieve a desired visual result, along with the necessary CSS.

What adds to this problem is that often times, not only the CSS code necessary for the theme’s design is packaged, but the entire framework code.

Bootstrap does not encourage great design

One of the most popular features of Bootstrap is the twelve column, fully responsive grid system. By adding classes into the HTML markup, developers can create websites that react to every screen size.

Unfortunately using a predefined grid is the wrong approach to achieving a great design. The major problem is that you are designing from the outside in, shoving content into predefined boxes. The result is designs that have a rigid and mechanical feel to them, without proper proportions or harmony.

The one-size-fits-all approach also ensures that the theme you’re designing does not adapt to any constraints like image dimensions or line length. Whether you’re using a narrow sans-serif or a didone serif that needs room to breathe, the grid stays the same. The result is often bad legibility and nonharmonic typography.

A better approach

2328591656_311f762a73_o2

Every great theme design starts with a vision. What is the purpose behind the theme you’re designing and who do you envision using it and it what context?

This will inform you about the constraints that you have to work with. Designing an image heavy portfolio theme is a different challenge than creating an optimal experience for a magazine theme featuring long form articles.

Once you have set on a vision, you then start designing from the inside out. Get some sample content for a couple of test posts and then start designing the experience of consuming that content. You’ll see that once you focus on the content first, you can build out the remaining design elements around it and achieve a harmonic result.

On the technical side, use a starter theme that provides you with enough markup to quickly start diving into the presentational markup, without being overly opinionated about the design. Use libraries and code snippets to reduce development time. The default themes that ship with WordPress are usually a good resource for extracting code snippets.

Screen Shot 2014-08-11 at 9.30.46 AM

How to add Google fonts to WordPress themes

When enqueuing Google fonts, there are five things to consider:

  1. Is the font enqueued instead of included directly in the template files or CSS?
  2. Is the font enqueued on the correct hook?
  3. Is the font URL protocol independent?
  4. Can translators deactivate the font if their language’s character set isn’t supported?
  5. Can the font be dequeued by child themes?

In this post, we’ll go over the best practices for enqueuing Google fonts in your WordPress theme. Continue reading

Sass in underscores

Sass comes to _s

I’m pleased to announce that you can now get Sass rolled into _s by simply checking the box on Underscores.me. The community has driven this change through pull requests and forks.

It’s taken a little while, but we wanted to do it right. As with the rest of Underscores, we wanted to keep it as simple as possible, offering any extra scripting with a checkbox option rather than imposing it on all developers. Not everyone compiles or uses Sass the same, so _s shouldn’t force anyone to follow one path or another. In this sense, the Sass provided takes a pure approach, not requiring Compass or any other scripts.

Worth noting along with this addition is that the Github version of _s is now purely for development. We strongly recommend only using Underscores.me to download _s, going forward.

Just like with _s itself, the Sass it uses will probably change and evolve with time. What is in place now is a structure, a starting point. Any issues, or requests can be posted on Github, and you can even roll your own using a fork. Just like _s is your theme’s starting point, you can take the Sass in any direction you want.

I hope you are excited as I am to see Sass in _s! I’d like to thank the following people – without them this would not have been possible. As this was a Github project, here are their Github usernames: @gregrickaby @bradp @hugobaeta @obenland @sabreuse @MichaelArestad @jacklenox and myself. I look forward to seeing what things people build and where they take Sass in _s.

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.