Creating a WordPress child theme

Creating a WordPress child theme

If you decide to start your own blog, creating a WordPress child theme is one very important step you should do right after installing WordPress, setting up your theme and before you do any customizations. Let me first explain what a child theme is.

Most of the themes (free and paid) get updated regularly. Theme creators fix bugs, optimize the code, release new features and do other updates as part of the regular theme management process. You are notified in the WP Dashboard when your theme update is available, same as for WordPress itself or plugins.

Now here’s the problem. Bloggers and other WordPress users are rarely completely satisfied with how the chosen theme looks and want to make additional custom modifications. So many bloggers add a custom design (CSS) or slightly change how the theme functions (or hire a developer to do it).

And guess what, after updating your theme, your customization changes in the code are lost. You may have just written your first few lines of CSS to update your theme and you’re super happy. Then an update comes, you click the update button and all your customization is lost. Hopefully you have a backup of the code.

Research shows that more than 80 % of WordPress users do custom updates, but less than a third use a child theme. Don't be one of them.

What I did as a newbie was to have a backup of changed files (style.css, functions.php) and when the theme update came out, I updated my theme and then manually updated the custom code. There are two problems with that.

If the theme gets updated after a few months or even a year, you completely forget what exactly you have to do and did last time. So it takes some time to orientate yourself again. If your theme is constantly updated on the other hand, you have to copy paste the same text over and over again, which doesn’t make any sense. It’s a waste of time.

Creating a child theme enables you to update your theme without losing the custom changes in your code. You create a new set of files that you can use for customization and that aren’t overwritten after a parent theme update. The best thing to do is to create a child theme in the beginning, you haven't made any changes to the theme yet and you don’t risk a lot if your site goes down for a minute or two.

When you activate a child theme, a few things are usually lost (menu setting, widgets, some theme settings etc.), so that’s why you should do it as soon as possible. If you’re too late for that, some additional work will be necessary (adjusting your child theme settings), but better late than never.

Here are all the benefits of creating a WordPress child theme:

  • You can upgrade the parent theme without losing custom modifications. Updates will also be applied to the child theme, of course, but no custom modifications will be lost.
  • You can easily add new functionalities without editing other files of the parent theme and risking breaking everything up.
  • A parent theme is always available as a fallback option.
  • You will learn a lot about how WordPress themes work. Trust me, I did. It may be a little frustrating in the beginning, but you’ll be super happy when you get it done.

It’s not that hard to do, but I’m surprised how come there isn’t an even easier way to get it done. Nevertheless, if you follow this guide step by step, you don’t have to worry about anything.

Creating a child theme

Unfortunately, there is no one-click possibility for creating a child theme. You can use a plugin, but you won’t learn as much as if you do it manually. Actually, all you have to do is to create a few folders and files on your server, and copy-paste and modify a few lines of text. If you’re really not comfortable with that, you should maybe get a professional do to it for you. But it’s not that hard. I’m not professional developer and I managed to do it.

Here is exactly what you have to do:

  • Have access to your server and access it using an FTP client
  • Know how to create a folder (theme child directory)
  • You need to create at least two files in the new folder (style.css and functions.php)
  • You need to copy-paste and modify a few lines of text (nothing really demanding)

The process is no different than if you were to do it in File Explorer on your computer. All you need is an FTP client. If you aren’t familiar with FTP, it’s a protocol to transfer and manage files on your server, similar to File Explorer on your computer. It’s nothing more than a piece of software that you use to connect to your server and manage your website files and folders. Two popular FTP clients are FileZilla (free) or FlashFXP (paid – win).

Your can find your ftp address, username and password to connect to your server with your hosting provider (log in to your client area or ask support where to find more information).

You need three pieces of information:

  • Host name (Address or URL): ftp.ourdomain.com (it usually looks something like that)
  • User Name
  • Password

1. Back up WordPress

Before you do anything, make sure you do a backup of your WordPress site. There’s a small chance of something going wrong, but you never know. You can make a full backup with a plugin like BackWPup.

Now, we will do the first action on the server. We will only create a new folder. Nothing more.

2. Creating a new folder

Now you’re hopefully connected to your server and see a bunch of folders and files. You should enter your public folder on the server and then see the wp-content and themes folders. In the themes folder, you will see the folders of all the themes you have installed. One of them is the currently active theme and probably also the theme you want to create a child for.

Wordpress Child Theme 0

Here you can see five themes installed, with child theme folder already created (the second one).

If you don’t know your currently active theme (and which one you want to make a child theme for), log in to your WP dashboard and under Appearance – Themes, you will see the list of all your installed themes and which one is currently active.

Wordpress Child Theme

Now in the themes folder, you have to create a folder for your child theme. It’s highly recommended that you create a folder with the same name as your active theme folder and add the appendix ‘-child’. As you can see on the first picture.

You also want to make sure that there are no spaces in the child theme folder name. It should be on the same folder level as your parent theme directory. In your FTP client you just click create a new folder and name it properly. It’s easy to do, right.

Now in the next step, we will create two files on your computer (not on the server) and later upload them to the server with the FTP client.

Creating two files

You have your child theme folder on your server. Bravo. Now you have to create two files – style.css and functions.php. The first thing we’ll do is to create the CSS file. The CSS file (style.css) is a theme’s style sheet (how everything looks) and in this case, it’ll be a style sheet for your child theme.

Creating the CSS file

I suggest you open a notepad (Windows Notepad or any other text editor) on your computer and save a new file as child-style.css on your desktop or in some other new folder on your computer (not on your server but on your computer). You can name the new folder whatever you want. Later, you will also rename the CSS file, but we will now temporarily add child- to the name just so you don’t confuse or override anything else.

CSS file is nothing but a bunch of text. Even if the notepad offers you to save a file with the ending .txt by default, just delete everything and save it as child-style.css. Now you should have an empty .css file on your computer. It’s time to add a few lines in the file.

Every CSS file needs a header. So, you have to create a header for your child theme’s CSS file. The best way to do that is to copy the header text from your currently active CSS parent theme and adjust it accordingly.

With your FTP client, go out of your child theme folder and enter your currently active theme folder (parent theme folder). In the folder, you will find a style.css file. As you’ve probably figured out, this is a style.css for your parent theme. Click edit in your FTP client and the file will open. Everything between /* and */ in the beginning is the header. Make sure you don’t save or change anything in the parent CSS file.

Wordpress Child Theme 3

All you have to do is to copy the header from the style.css you open with your FTP client and paste it to the child-style.css file you have open in notepad on your computer. Copy-paste, nothing else.

After you copy the text, you have to make a few changes. What you have to change in your child theme CSS file on your computer is Theme Name, Version (optional, but do it anyway) and Template. You should add Child to the theme name and you should enter the parent directory name for the template.  The template is the parent folder name, so the same name without -child. Last but not least, you can state it to be Version 1.0.

  • Theme Name: add Child (required)
  • Theme URI: Leave it as it is (optional)
  • Author: Leave it as it is (optional)
  • Author URI: Leave it as it is. (optional)
  • Description, Tags, License, Text Domain: Leave it as it is or delete it. (optional)
  • Version: 1.0 (optional)
  • Template: Parent directory name (required)

Now save the file and close notepad. Here is how your file should look (with different Theme name and Template of course).

Creating function.php file

In completely the same way, you create a new text file with notepad on your computer, and save it as function-child.php. In this file, copy the text below and save the file.

That’s it.

Wordpress Child Theme 6

Uploading the files

Now go back to your FTP client. Make sure that you’re in your child folder (/wp-content/themes/youractivetheme-child/. Now upload both files (style-child.css and function-child.php) into that folder. In most FTP clients, this is very easy to do.

On the one side, you have explorer with your computer files and on the other, you have the files on your server. You just drag both files from your computer to the selected folder on your server. Make sure you copy only the two files, without any folders or anything else.

Now you should have ONLY two files in your child folder on the server.

But they aren’t named correctly, so you should rename them into style.css and function.php (you delete -child in both files). That was just protection against overriding the files in your parent theme folder.

Wordpress Child Theme 8

You should use the FTP client, be in your child theme folder and by clicking on a file, rename it. You have only these two files in the folder. It’s not complicated. And you’re almost done.

Activate the theme

Now go back to the WP dashboard in your browser. In Appearance -> Themes, you will see a new theme called Child theme. Before you activate it, see how it works with the Live Preview Function. As mentioned, you will probably have to reset menus, widgets and some theme options (depends on your parent theme), if you customized your parent theme before. In Live Preview, you can luckily do most of the things before activating the theme.

Wordpress Child Theme 10

When you make all the customizations, save and activate the theme. If you already made a lot of changes to the parent theme and your child theme is a mess in live preview, you will have to somehow note what kind of changes you made and customize them again in the child theme.

For example, all my widgets were gone when I live previewed the child theme. I went back to the parent theme and wrote down all the widget settings and then reset the same setup in the child theme.

Customize your CSS and enjoy your new WordPress child theme

Now you can enter your customized CSS in the child’s style.css file. With your FTP client, you open style.css in the child theme folder and add custom CSS.

In the same way, you can add code to functions.php. The functions.php file enables you to change or add functionalities to your blog. I would suggest you don’t make any changes to functions.php, unless you’re a PHP developer or know exactly what you’re doing.

That’s it. When you update your theme now, changes won’t be overwritten. Your theme will be updated, and your customization will be preserved. Technically WordPress will look for the file in the child theme first to load it and then it will go to the parent theme.

If you decide to play with it sometime in the future, your child theme can override any other file in the parent theme. You just have to include a file with the same name and in the same sub-folder structure in your child folder as it is in your parent folder. You can override files like header.php, footer.php, index.php, single.php, page.php, sidebar.php and others.

Enjoy updating your theme without losing your customizations.