Getting Started with WordPress Child Themes

So, you imagine that are starting your tweaks in the WordPress world and you’ve found a lot of awesome themes. You even find a lot of premium themes and most of them really worth the price (a few books for a professional look and code). And most of the themes you find are so close, but none is exactly what you want. It would be good to be able to move the menu bar a little bit, to replace the font, to add a new text block.

Well, if this sounds familiar, this guide is for you. Here we’ll dive into the child themes world, where you can do pretty much anything you want without breaking the awesome theme you’ve bought, or losing future updates because anything you do will be undone.

Editing appearance without modifying theme files

In short, that is what Child theme is about: Customizing without modifying original files. A child theme will basically have the same functionalities and look of your main theme (parent), unless you explicitly say otherwise.

It’ll contain at least 2 files, the style.css and the functions.php file, all other files will be grabbed from the parent theme so unless you create a new file in your child theme directory you’ll be using parent files.

We have a lot of possibilities here, but the main advantage is that you can move back to the original theme easily, and so you can also update your main theme without losing any edits, since they are done in a completely different folder.

Let’s get our hands dirty

So, the very first step is creating a new child theme directory under your /wp-content/themes/ folder. Let’s call it “Twenty-Child”, and let’s create our basic styles.css file:

/*
	Theme Name: Twenty Child
	Theme URI: http://www.webrevenue.co
	Description: Learning Child themes right now
	Author: Rochester Oliveira
	Author URI: http://www.webrevenue.co/author/rochester/
	Template: twentytwelve
*/
	/* Calling main theme CSS file */
	@import("../twentytwelve/style.css");

	/* Add anything you want below */

The parameters are (among other optional parameters omitted):

  • Theme Name: The name you’ll see under themes selection screen
  • Theme URI: The link that will be shown there
  • Description: A short description so you’ll remember what this is about
  • Author: Who has created the child theme
  • Author URI: If you want to link to author’s site
  • Template: The main theme folder (so if you want to use a different theme as the main, just replace this parameter)

Once you add this code you’ll see the Child Theme under WP admin > Appearance > Themes. You can select it now and all changes done will be seen in your site.

Child Theme Edits 101

This can be useless if you have zero CSS knowledge, right? Wrong! CSS is actually pretty easy and you can find a lot of snippets to help you there. Here are a few simple tips to help you in your customizations.

#1  Install Firebug

A lot of people just love Chrome and Safari (so do I!), but for me FireFox is much better for development. So, if you want to use it, I recommend you also installing firebug, which is an awesome tool to understand all selectors that are active in the current element.

Once you install it, you can press F12 or right click somewhere in the page and select “Inspect Element”. You’ll see a new window with current page HTML and CSS (and a lot of other tabs that are useful, maybe we can talk about them later).

In the CSS box you’ll see from top to bottom all CSS rules applied to current element, and the more “specific” rule in the top. That’s cool, but let’s see what you can do with this info

#2  Consider CSS specificity (or selector weight)

Each CSS rule has its selector, the properties and the values. But when the browser find 2 or more rules that will affect the same element it has to choose which one of them is more suitable. We usually have this “rule” to understand what will be considered:

  • ! important declaration will overwrite anything else
  • Inline CSS will overwrite anything but ! important rules
  • ID’s (#header, #footer, #container…) worth 100 points
  • Classes (.main, .nav, .box) worth 10 points
  • Tags (body, div, p, a) worth 1 point
  • Universal selector and pseudo classes (*, :hover, :after) worth 0 but they will apply if there’s a “tie”

Ok, let’s see an example in order to better understand this. Right click your site header using the twenty twelve and you’ll see that the first CSS that appears is this:

.site-header {
    padding: 1.71429em 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

The first selector has 10 points (since it’s a class), and the second one has 1 point each (since commas just separate different selectors) that’s why it appears in the top. If you had something like #header div there that selector would certainly be the first one to show up.

Why this is so important?

Because in order to edit the main theme without editing its CSS files you’ll need to ALWAYS use rules that have more points than the rules defined in the main theme. And you can be smart on this and use simple code. For instance to overwrite this property:

.site-header {
    padding: 1.71429em 0;
}

You can add this in your child theme CSS, but you shouldn’t:

.site-header {
    padding 15px  0 ! important;
}

Because this is bad code, and it’s way harder to overwrite again if you need to change that in a single page, for instance. So you could simple use this:

body .site-header {
    padding: 15px 0;
}

This selector has 11 points, which is greater than the original 10 and so this code will be applied.

#3 Make good use of the functions

The child functions.php file is the only file that will be loaded IN ADDITION to original file. That’s a smart workaround done by WP team, so you can keep original functions and add your own functions. The catch is, the child theme functions will be loaded first and the theme developer MUST do something like this to avoid conflicts when declaring functions:

if( ! function_exists('top_menu') ){
	function top_menu(){
		//cool code here
	}
	add_action('wp_head', 'top_menu');
}

That’s because if you define a function in your child theme file it can overwrite the original one. If theme developer doesn’t do it this way you’ll end up with an ugly PHP error (since the same function is being created twice).

#4 Learn some CSS properties

Did you know that you can hide and add stuff using CSS? You’ll need to install the firebug to find the right selector, but you can hide an item by adding this code:

body a {
	display: none
}

To add it’s more complicated, since you can only add small texts, if you want an “On Sale!” text after a price tag, for instance you could use this code:

.price del:after {
    color: red;
    content: " On Sale!";
}

What do you think?

What do you think about this guide? Will you consider using child themes? Are you already using it? Let us know using the comments section below!