The WordPress Child Theme – Your New Best Friend

I think it’s time to let everyone in on one of my pet peeves (well, in WordPress at least) – direct changes to your theme, completely ignoring the handy dandy much-underutilized child theme. Sure, the old way is quick and easy, but it’s a downright mess – still, let’s back up a bit to understand what I’m talking about.

[toc]

What is a WordPress Child Theme?

A WordPress child theme is a theme that uses all of the files of its parent (including all of the functionality), but allows for modification. While you could always modify your existing theme’s files directly, this often results in a big, costly problem:

When you update a modified theme, all of your changes are lost.

While this isn’t a big problem if you’ve made the theme from scratch, chances are that’s not the case. Most site owners will grab a theme off of WordPress.org, an external repository like ThemeForest, or from a designer like WooCommerce. I won’t get into which themes I’d suggest (I got in trouble for that once already) though there are some great themes out there, and if you’re savvy with CSS then you might want to look into a framework. Regardless, that’s a whole different ball game, so back to it.

For a more technical explanation, a child theme is a specific set of files in a folder that overrides your default theme. Think of it like a second coat of paint – easy!

Why would I use a Child Theme?

Child Themes are useful because they allow modifications, but still let you keep your parent theme up to date. As an example, the free Storefront Theme from WooCommerce is a great starter if you’re looking to sell something online (and Canvas is good for everything else), but can look a bit standard or bland. You’re almost certainly going to want to customize it to fit your style – new fonts, colors, you name it.

SOME themes offer areas for you to add custom CSS and even PHP functions. That’s nice and all, but it doesn’t really give me too much comfort. You see, after all of your modifications where your site looks just perfect, an update to the theme will come around with improved performance, security, or new features. After you update, guess what happened to your hard-written design? It’s gone. Unless you have a backup, you’ll never see that again.

Child themes get around that! You get all of the benefits, security, updates, and (in some cases) support of the parent theme, but with your own personal style. The better question is “why shouldn’t you use a Child Theme?”, to which there is no answer.

Creating a Child Theme

Okay, so now that I’ve sold you on the concept, we get to the creation. Here’s where it typically gets a little sticky – not everyone is comfortable with code, and there does need to be a certain level of comfort to get a child theme set up properly. You can find a much more detailed explanation in the Codex page, but in short to have a child theme, you need the following files:

  • A child theme directory (a dedicated folder in your wp-content/themes/ directory of your site)
  • A style.css file
  • A functions.php file

There is of course a bunch more you can do and include in a child theme, but that’s the bare minimum. The tricky part is formatting it – you need a very specific setup. Not only can this be overwhelming to newcomers, it can be tedious to those of us who create child themes all the time – IF ONLY THERE WERE A TEMPLATE SOLUTION!

I think you know where I’m going.

Introducing: The WordPress Child Theme Template!

Child Themes - Kind of a Superhero?

In a spur-of-the-moment, I-should-probably-be-doing-something-else-right-now whim, I put together a quick template you can download, for free, to prepare a child theme for any theme out there. You will need to make some quick customizations to one file and to the folder name, but as long as you have a good text editor (I like Sublime Text or Atom, but WordPad and TextEdit are perfectly fine) it’s a breeze.

[button link=”https://github.com/DanielSantoro/wordpress-child-theme” size=”large” bg_color=”#828282″ border=”#828282″ window=”yes”] View on GitHub[/button]

Has it been done before? Of course! Is it still useful? You bet! With a few quick changes you can make following along with the README file, you can create a functional Child Theme in just a few minutes. From that point on, all of your CSS and PHP changes will be done in your Child Theme, and any template overrides will be copying the files from your parent theme into your child and making modifications.

It’s under GPL just like every good WordPress creation, so feel free to modify it, use it personally or professionally, improve on it, or whatever else. Credit would also be nice, but if you’re the kind of jerk that removes credit from code, then there’s no reasoning with you.

Direct Link: https://github.com/DanielSantoro/wordpress-child-theme

What’s it got in there?

First of all, it has all of the files and folders to get you started. Depending on your needs you might not need the assets folder (though it doesn’t hurt to have there) or you might need to add more, but all of the essentials are there:

  • A style.css with an appropriate header (this is where you’ll make changes to rename your child theme and add a description). Additionally, I’ve included a meticulously structured CSS template you can use – meant for theme development, it should hopefully encourage you to keep your customizations nice and neat for later reference.
  • A functions.php (theme functions) file that already is set to pull the parent styles
  • A placeholder image/thumbnail
  • A bit of a starter guide on next steps and getting started

What can’t it do?

  • It can’t make a child theme of a child theme. See the first FAQ question for more details on this.
  • It can’t apply if you switch parent themes. You would need to change the information in your child theme’s style.css – while that isn’t a big deal, things like CSS classes and PHP hooks are likely to change between themes, unless they’re by the same (organized) author.
  • It can’t help you pick up dates. I mean, I guess it could if they were really into WordPress coding, but don’t hold your breath or anything.

What should my folder structure look like?

If you log in to FTP using a client like FileZilla or Cyberduck (both free), then you need to be able to find your WordPress installation – it’s where your wp-config.php file is. From there, you’ll see a folder called wp-content – after that, it should look something like this:

FAQ

[toggle title_open=”I bought a Child Theme from a theme shop. Can I create a grandchild theme?” title_closed=”I bought a Child Theme from a theme shop. Can I create a grandchild theme?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]Unfortunately, no. WordPress doesn’t currently support “grandchild themes”, which brings a new level of complexity to theme developers that use a framework. A great example of this is the Genesis Framework by StudioPress. When you purchase Genesis, you’re going to purchase a child theme to go with it – the child theme adds the style and appearance you’ll build your site off of. The downside is you can’t make a child theme, so modifying it in the manner we’ve discussed is off the table.

That’s not to say it can’t be done, though! I personally love Genesis and Storefront (a different theme by WooCommerce), both of which do this. Instead, what you’ll do is make changes in a plugin.

The first way to do this is a one-stop solution – check out the Theme Customizations plugin by the always-brilliant James Koster. This is a clever workaround that basically puts a child theme into a plugin, so it bypasses the system to create a really cool end result – you can make any changes (including template file overrides) with this method.

The second, probably easier (but less robust) method is through a couple of plugins. You can use two of my favorite/must-haves: Simple Custom CSS and My Custom Functions, which allow you to add CSS and PHP functions to your site.

It’s worth noting that both of these solutions are free, so you can’t beat that.[/toggle]

[toggle title_open=”Can I still use those plugins that you mentioned for modifications?” title_closed=”Can I still use those plugins that you mentioned for modifications?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]Of course. All three of the plugins mentioned above for the Grandfather Theme solution will work with your custom template. I frequently use these plugins to quickly add code to test or add a fix/feature, and then every now and then go through those plugins and move the features over to my theme. It’s a nice temporary home.[/toggle]

[toggle title_open=”A guide online said to add some code to my theme’s functions.php file. What do I do?” title_closed=”A guide online said to add some code to my theme’s functions.php file. What do I do?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]Instead, add any PHP code to the functions.php file found in the child theme folder. The same goes for any CSS they ask you to add to style.css.[/toggle]

[toggle title_open=”Can I switch parent themes?” title_closed=”Can I switch parent themes?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]Not really. You could modify your child theme to instead point to a new parent theme, but unless both parent themes are by the same author, using the same framework, CSS classes, and PHP hooks, then chances are your customizations won’t quite work.

However, if you’re switching to a different parent theme then you’re likely looking for something totally different, and you’ll have a record of every change you made in your child theme. Just create a new one for the new parent theme and copy over what you want.[/toggle]

[toggle title_open=”Can a Child Theme make changes to a Plugin?” title_closed=”Can a Child Theme make changes to a Plugin?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]Yes, but you probably shouldn’t. CSS changes and functions can work, and there are some exceptions (you can use Template Overrides for WooCommerce files), but in general you shouldn’t be modifying plugins in your child theme. It’s better to create a separate plugin for those changes – it’s along the same principle as why you don’t modify a theme directly.[/toggle]

[toggle title_open=”Will my theme developer provide support for my Child Theme?” title_closed=”Will my theme developer provide support for my Child Theme?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]Almost certainly not. Unless they’re feeling particularly generous, the developer of your parent theme will only support their code – it isn’t reasonable to expect them to look through your changes to see what could be causing a problem. That said, unless you start to get into very heavy customizations it shouldn’t usually cause an issue you’re unaware of. Save early, save often, and keep backups.[/toggle]

[toggle title_open=”My Child Theme just broke something! What should I do?” title_closed=”My Child Theme just crashed X! What should I do?” hide=”yes” border=”yes” style=”default” excerpt_length=”0″ read_more_text=”Expand” read_less_text=”Close” include_excerpt_html=”no”]If you’ve recently made a change to cause the crash, revert that change. If you can’t get into your WordPress Administration at all, then load up FTP and temporarily rename the child theme folder. It’s good to work on a staging server or development copy for big edits before pushing to your live site.[/toggle]


Hopefully this gives you a leg up on your next project. I’d love to hear from you on if this helped you out, if you have ideas on how to improve it, or if you have any questions I may have not addressed – just post in the comments and I’ll do my best to answer!

Leave a Comment