How to Load a Parent Theme’s Style in WordPress

By Lisa Sabin-Wilson

One of the great things about using CSS on your WordPress website is how rules can override one another. If you list the same rule twice in your CSS, the rule that comes last takes precedence. For example:

a {
color: blue;
}
a {
color: red;
}

This example is overly simple, but it illustrates this concept nicely. The first rule says that all links (‘a’ tags) should be blue, whereas the second one says that links should be red. Because CSS says that the last instruction takes precedence, the links will be red.

Using this feature of CSS, you can have your child theme inherit all the styling of the parent theme. You can also selectively modify those styles by overriding the rules of the parent theme. But how can you load the parent theme’s style.css file so that it inherits the parent theme’s styling?

Fortunately, CSS has another great feature that helps you do this with ease. Just add one line to the TwentyFourteen Child theme’s style.css file, as in the following:

/*
Theme Name: TwentyFourteen Child
Description: My fabulous child theme
Author: Lisa Sabin-Wilson
Version: 1.0
Template: twentyfourteen
*/
@import url('../twentyfourteen/style.css');

A number of things are going on here, so let’s break it down piece by piece:

  • @import: This tells the browser to load another stylesheet. Using the @import tag allows you to pull in the parent stylesheet quickly and easily from a particular source (url — explained in the next item).

  • url(‘…’): This file path indicates that the value is a location and not a normal value.

  • (‘../twentyfourteen/style.css’);: This indicates the location of the parent stylesheet. Notice the /twentyfourteen directory name. This name needs to be changed to match the Template value in the header so that the appropriate stylesheet is loaded.

With the Twenty Fourteen theme’s stylesheet loaded into the TwentyFourteen Child theme, your site now completely adopts the styles included in the parent Twenty Fourteen, and you can use the TwentyFourteen Child stylesheet to create your own styles while still using the parent theme for all the functions and features included in the template files.