An Alternative to @import in WordPress Child Themes

Using Child Themes in WordPress is a great way to modify an existing theme, however the CSS @import directive is slower than it has to be, so you should try and avoid it. Here’s why.

If it takes 200ms to load the child theme’s stylesheet, and 200ms to load the parent theme’s CSS, a modern web browser should take approximately 200ms to load both of them, because modern browsers load assets in parallel.

Unfortunately this is not true for CSS @import. Let me quote Google:

The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

Which means that instead of 200ms, with @import it’ll take the web browser approximately 400ms to load both stylesheets. Here’s a typical child theme’s CSS:

/**
 * Theme Name: My Child Theme
 * Template: parent-theme
 */
@import url(../parent-theme/style.css);

/* My Child Theme CSS */

We can drop the @import statement, and make good use of functions.php and the wp_enqueue_style() function:

// Faster than @import
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
    wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}

And we don’t need to re-declare dependencies because the child theme’s functions.php is loaded before the parent theme’s. Unless, of course, the parent theme uses a different action priority, in which case we should just match it.

That’s +1 to our PageSpeed score :)

Introducing Semicolon

Semicolon is a brand new magazine theme for WordPress. It’s simple, clean, and it’s got quite a unique grid layout with support for featured posts.

Semicolon WordPress Theme

Semicolon was initially created for WP Magazine, an online news site about WordPress in Russian. It’s got support for featured posts, a social profiles menu, related posts, author bios, and a few widget areas.

Head over to the demo to take a look around. The latest version is always available for download on WordPress.org (don’t forget to rate it!), and if you ever get stuck, please visit the the FAQ and the support forums.

Semicolon is based on the amazing _s starter theme, and is distributed for free under the GNU GPL. Enjoy!

Expound: A Free Magazine Theme for WordPress

Meet Expound — a free magazine theme for WordPress. Freshly baked, straight out of the oven, filled with _s goodness, a responsive layout, wicked support for featured posts and more!

Expound Magazine Theme for WordPress

Expound was initially built for WP Magazine, a little blog with a big goal to change the perception of WordPress in Russia. It supports up to five featured posts on the home page, post thumbnails, custom excerpts, threaded comments, a sidebar for your widgets, a related posts section built right in, and an awesome responsive layout to keep your readers reading, wherever they are.

You can get Expound from the WordPress.org repository, and don’t hesitate to give a thumbs up if you like it. Enjoy!

7 Tips for Better WordPress Theme Development

I gave this talk at WordCamp Norway 2013. It covers several tips and tricks that will make you a better theme developer.

You can follow the slides and the notes/transcript below. If you have any questions or comments, feel free to ping me here or on Twitter, I’m always happy to help :)

Continue reading