How To Create A Child Theme

What Are Child Themes?

A child theme is a theme that inherits the functionality of another theme (called the parent theme). Creating a child theme is a good idea really a necessity if you want to make any modifications or changes to an existing WordPress theme. Instead of modifying the theme files directly, a child theme allows you to override theme functionality on a case-by-case basis. This is useful because when a WordPress theme is updated, all of the files in the theme’s directory are removed and then replaced. What does that mean for you? Well, if you were to modify a theme directly your changes would be gone forever (unless of course you had a backup).

I Want One, I Want One!

Now that you know you’re in the market for a child theme, creating one is a piece of cake.

---

UPDATE: We now have one-click child themes on our WordPress themes, making it very easy to create a child theme! Read about them here!!

---

You’ll want to create a new directory in your themes directory (usually /wp-content/themes/) to hold your child theme. This directory name should have no spaces and it’s a common practice to use the parent theme name as the base with “-child” appended to the end of it (think “socialize-pro-child“).

Once created, the only file that is actually required for a child theme is “style.css”. This file should contain, at a minimum, the following:

/**
* Theme Name: My Child Theme
* Template: my-theme
*/


You can change the above lines as necessary to suit your configuration. We’ve only included the required lines above, but there are a few more that you may want to include as well. The most important line in the above snippet is the “template” which refers to the directory name of the parent theme. In this case, we’d have to have a parent theme inside of the “my-theme” directory. If you were using Socialize Pro your template would be “socialize-pro”.

Now here’s the best part, with any one of our themes (except our classic themes) you can simply add CSS styles to your “style.css” and you’ll instantly see the changes on your site. This is especially useful if you’re just modifying the parent theme’s styling. You might think that this is exactly how most WordPress themes function. And you’d be right. However, there’s one small change that I’d like to mention: you don’t have to worry about importing any parent styles in your child theme’s “style.css” file.

As a matter of fact, you don’t have to include anything else if you just want to adjust the styling. It’ll just work. Our themes are smart. They’ll know when you’ve created a child theme and automatically load the parent styles for you.  This small little detail can make it that much easier to spin up a child theme, especially for beginner developers.

As a beginner WordPress developer, how many times have you run into a site that had no CSS styling because the parent theme styles weren’t loaded? If that hasn’t happened to you before, you’re off to a great start! If it has, you know how frustrating it can be. Either way, you may want to read on to see why importing parent styles might slow your website down.

Let’s Get A Bit More Technical

At Slocum Themes, we’re all about speed, fast load times, and lightweight code. In the WordPress Codex example, you will notice that they’ve included an”@import” CSS declaration inside of their child theme’s “style.css”. Unfortunately, this can have a negative impact on your website by hindering page load times. This is due to the fact that using “@import” can break parallel downloads in modern browsers. Now, you may or may not see a decrease in load times on your site when using the “@import” method, but we wanted to be safe. You know the old idiom: “Better safe than sorry”.

Remember earlier when I said you could modify your theme on a case-by-case basis with a child theme? Well let’s say you want to modify one of our templates. Simply head to the parent theme and copy the template that you’d like to change into your child theme directory and modify accordingly. Your web site will now use the template found in your child theme as opposed to the parent theme template. Pretty neat huh?

There are endless possibilities when it comes to customizing WordPress themes and really your imagination is the limit, but what if there was an even easier way?

Tell Me More!

Now that I’ve peaked your interest, in the coming weeks we’ll be rolling out an even easier way to create a child themes. You’ll soon have the option to create a child theme right from our Theme Options panel! That’s right, a one-click solution to creating your very own child theme. Gone are the days where you’re messing around with files and permissions on a server. Let’s keep that sort of stuff to the server admins.  Stay tuned for updates.

P.S. – At the time of writing, we’re still waiting for approval of these updates on our free themes on WordPress.org. However you can get this update and all of our other great features now if you upgrade to the Pro version of any of our themes.