How to create a WordPress child theme

How to create a WordPress child theme

Online by J&S Code
1 October 2017 | MySQL PHP PHP - MySQL WP snippets, code & hacks | 939 recognitions

The WordPress platform is a magnet for those who want to take matters into their own hands, who want complete control over their websites and want to be independent in running them. WordPress does make it really easily to completely customize a website. If you have a bit of knowledge of HTMl, CSS and/or PHP, there is nothing you can’t change.

What are child themes and why use them?

When talking about child themes, we first have to talk about parent themes. A theme only becomes a parent theme when someone builds a child theme for it. Until then, it is just a theme, such as the ones you find in the WordPress directory. Every theme that includes all of the files required in order to be considered complete can be a parent theme.

Yet, while any such theme can be a parent theme, some are better suited to this purpose than others.

What is a child theme, then? Well, from the WordPress back end, a child theme doesn’t behave any differently. You can find and activate it under “Appearance” → “Themes,” just like you would with any other theme.

The big difference is that a child theme depends completely on its parent in order to work. Without its parent theme present, it will not do a thing and cannot even be activated.

That’s because a child theme isn’t a standalone entity, but instead modifies or adds to the files of an existing theme. It uses everything present in the parent theme and changes only those parts that you want to be different.

This allows you to alter styles, functions, layout, templates and more. In fact, you can customize the parent theme beyond recognition. However, without it being present, none of it will work.

Advantages of child themes

There are numerous advantages to going the child theme route:

  • Instead of having to create a complete theme from scratch, you can build on something that already exists, thus speeding up development time.
  • You can take advantage of the functionality of sophisticated frameworks and parent themes, while customizing the design to your needs.
  • You can upgrade the parent theme without losing your customizations.
  • If you aren’t satisfied with your customizations, just disable the child theme and everything will be as it was before.
  • It’s a great way to start learning about how themes work.

A child theme can contain image folders, JavaScript, CSS, template files and many other things. The beautiful thing, though, is that they don’t have to. You can include as much or as little customization as you want.

In fact, a child theme really only needs three things: a folder, a style sheet and a functions.php file. That’s it. And the two files can even pretty much be empty.

So when to use a child theme

So, should you always build a child theme whenever you want to make any changes to a WordPress website? No, it really depends.

If you plan to make only minor modifications, such as color changes or a different font, then a custom CSS plugin might be all you need (other options are Jetpack and SiteOrigin CSS). Many themes nowadays also offer the option to add custom code natively.

However, if you plan to introduce larger changes, such as a complete design overhaul, multiple template changes or anything else of that magnitude, then a child theme is definitely the way to go.

Set up a basic child theme

All right, now that we know how awesome child themes are and what they can do for us, let’s go over how to create one step by step. For our example, we will use Twenty Seventeen, the latest default theme for WordPress. Don’t worry, it’s really easy and you will get it in no time.

Create a folder in wp-content/themes

As mentioned, a child theme needs three things: its own folder, a style sheet and a functions.php file. We will start with the folder.

Like any theme, child themes are located in wp-content/themes in your WordPress installation. So, navigate there now and create a new folder for your child theme.

A best practice is to give your theme’s folder the same name as the parent theme and append it with -child. Because we are using the Twenty Seventeen theme, we will call our folder twentyseventeen-child. You are free to use any name you want to; just make sure not to include any spaces because that might cause errors.

Now that we have our folder, we will need a style sheet. In case you are not aware, a style sheet contains the code that determines the design of a website. Themes can have multiple style sheets, but we will be content with one for the moment.

Making a style sheet is easy: Simply create a new text file and call it style.css. Done! However, in order for it to actually work, we will have to paste the following code, the so-called “style sheet header,” right at the beginning of the file (code courtesy of the WordPress Codex):

Here is what each line means:

  • Theme name
    This is the name that will show up for your theme in the WordPress back end.
  • Theme URI
    This points to the website or demonstration page of the theme at hand. This or the author’s URI must be present in order for the theme to be accepted into the WordPress directory.
  • Description
    This description of your theme will show up in the theme menu when you click on “Theme Details.”
  • Author
    This is the author’s name — that’s you, in this case.
  • Author URI
    You can put your website’s address here if you want.
  • Template
    This part is crucial. Here goes the name of the parent theme, meaning its folder name. Be aware that it is case-sensitive, and if you don’t put in the right information, you will receive an error message, so double-check!
  • Version
    This displays the version of your child theme. Usually, you would start with 1.0.
  • License
    This is the license of your child theme. WordPress themes in the directory are usually released under a GPL license; you should stick with the same license as your parent theme.
  • License URI
    This is the address where your theme’s license is explained. Again, stick with what your parent theme says.
  • Tags
    The tags help others find your theme in the WordPress directory. Thus, if you include some, make sure they are relevant.
  • Text domain
    This part is used for internationalization and to make themes translatable. This should fit the “slug” of your theme.

If you feel a bit overwhelmed (already?), you might be happy to know that not all of this information is actually required. In fact, all you really need is the theme name and template.

The rest is important only if you plan to publish your theme, which I am not. For this reason, my child theme’s header looks like what’s shown below. Feel free to copy it and make your own adjustments.

Once your folder and style sheet are present, go to “Appearance” → “Themes” in the WordPress back end and find your child theme there. When you click on “Theme Details” now, you will see the contents of the style sheet header. That’s what that info is for. All right, now click on the button that says “Activate.” Good job! Your theme is now activated.

Customize your theme as you like:

  • create functions.php

  • inherit parent styles

  • add theme image
  • use theme hooks

Wrap up

As you have hopefully seen, building a child theme in WordPress is not very complicated. All it takes is a folder plus two files.

Yet, despite its simplicity, a child theme is quite powerful. It allows us to completely and safely customize a website without editing any core files.

The benefits of this are numerous: You can build on top of an existing theme or framework without having to write a theme from scratch; your changes are safe from theme updates; and, if things go awry, you will always have a functioning theme to fall back on.

Plus, you are getting a top-notch education in building WordPress themes on the side. Not too bad, right?

For this reason, learning about child themes is an important step in the career of any WordPress designer or developer and for those who want more control over their WordPress websites. I hope this article helps you get started.

What is your experience with building child themes for WordPress? Do you have anything to add? Anything you’d do differently? Please share it in the comments.

About The Author

J&S Code

Sorin C is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

Put here your thoughts

Your email address will not be published. Please complete all fields * correctly You may use these HTML tags: bold text, italicised text, and paragraphs.

On the same idea

How to Remove HTML Tags from WordPress Comments
Online by stevenmedia | 8 November 2017

Nowadays, a lot of bloggers choose to remove HTML tag from WordPress websites. However, for beginners and newbies in this field, they may feel confused about the practice. Meanwhile, some...

Useful WordPress Hook hacks
Online by stevenmedia | 30 September 2017

Hooks are very useful in WordPress. They allow you to “hook” a custom function to an existing function, which allows you to modify WordPress’ functionality without editing core files. In...

Sharpen Resized Images in WordPress
Online by stevenmedia | 22 September 2017

Are you finding issues in managing the image quality for your WordPress powered website/blog? If your answer is a “Yes” then this is a post just for you. Here, I’ve...