What is a Child Theme and how to use it

What is a WordPress Child Theme

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme. In the past, there was no easy way of updating WordPress themes without losing all the custom styling and changes that you had made. This becomes chaos when all the sudden you find out a widely used script in popular themes has a major exploit, and you need to update your themes ASAP. It becomes a tough choice because on one hand, you would lose all the custom styles if you update. On the other hand, you risk your site getting hacked if you don’t update fast enough.

The core team and the community decided to solve this problem by introducing the concept of parent theme and child theme. A child theme in WordPress would inherit all the functionality, features, and the code of the parent theme without making any changes to the parent theme itself. This allowed users to change the styling of the parent theme and add/modify features without losing the ability to update the parent theme.

Advantages of Using Child Themes

Using a child theme has many advantages some of which are as follows:

  1. Safe Updates

A child theme automatically inherits the parent theme’s features, styles, and templates. This allows you to make changes to your site using child themes without ever modifying the parent theme. When a new version of the parent theme arrives, you can safely update it as all your modifications are saved in the child theme.

  1. Easy to Extend

A child theme built on a powerful theme framework allows a great deal of flexibility without writing a lot of code. You can selectively modify only the template files and functions that you need without going through other template files. You can add new functionality and much more.

  1. Fallback Safe

When you are creating a complete theme you need to think about all the possible scenarios and code for them. However, when you are working on a child theme and you forget to code for something, then there is always the parent theme’s functionality available as the fallback option.

How child themes work in WordPress

  • You make the child theme: just one directory and one CSS file in it.
    • You may also use a functions.php file (outside the scope of this introduction).
  • The child theme, in its CSS file, declares its parent, i.e., the theme whose templates it uses. It inherits all files of the parent except the stylesheet (which can be explicitly imported). Once everything is in place, the child theme:
    • Is activated like any other theme, via the administration panel.
    • Behaves exactly like its parent, in everything. E.g., if the parent has an options page, the child will have it too.
    • Looks exactly like its parent, plus or minus any changes you make: you can modify everything beyond recognition or just change one tiny, unnoticeable detail.
  • You don’t have to keep track of your modifications or worry about losing them the next time the parent theme is updated, since you haven’t touched the parent theme. Your changes live in their own file(s) within their own directory in wp-content/themes.

Installing a WordPress Child Theme

Installing a Child Theme is almost the same as installing any other WordPress theme. The only difference is that you need both the parent theme, and the child theme uploaded to your WordPress theme directory.

How are themes modified without being modified?

For styling, this is possible thanks to the way Cascading Style Sheets work. In this particular case, the stylesheet of the parent is imported (by an explicit instruction) into the stylesheet of the child. Then, you add your own rules to the child’s stylesheet. When a rule you added conflicts with a rule of the parent, here is what happens — quoted from the CSS 2.1 Specification:

[I]f two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. — SOURCE

Let’s see an example. The parent stylesheet says:

body {
     color: #3f3f3f;
}

It means gray text (on white background) for the whole body of the HTML document. But you prefer black. So, into the stylesheet of the child you put:

body {
     color: #000000;
}

Now, obviously, the two declarations conflict. But, while they are equal in everything, they are different in this: The parent’s comes from an imported stylesheet, while the child’s is in the stylesheet itself. — The child wins!

SYNTAX OF CASCADING STYLE SHEETS

As you can see in the example above, the syntax of CSS is simple and the naming scheme intuitive:

There are rules. Each rule has a selector, for example body or p(aragraph), and a declaration block. The declaration block is enclosed in braces and it can contain several individual declarations, which are separated by semicolons. Each declaration has a property (in the examples above, color) for which a value is specified. That’s it!

Adding CSS rules to your child theme

· Changing the style of links

a:link, a:visited {    
    color: #006600;
}
a:hover, a:active {
    color: #666666;
}

· Adding a font

body {
    font-family: "Trebuchet MS", "Lucida Grande", Sans-Serif;
}

· Hiding an element

#searchform label {
    display: none;
}

Putting it all together and activating the child theme

In a few minutes you constructed 4 CSS rules: 2 for links, 1 for fonts, and 1 to hide something from display:

/* Theme Name: your-name
Theme URI: your url/
Description: Child Theme for parent-theme
Author: you
Author URI: your url
Template: toranj
Version: 0.1
*/
@import url("../parent-theme/style.css"); 

a:link, a:visited {
    color: #006600;
}
a:hover, a:active {
    color: #666666;
}
body {
    font-family: Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
}
#searchform label {
    display: none;
}