Create and use your own WordPress child theme

Posted in
If you’re searching online for help on WordPress, I’m sure you’ve come across the concept of a WordPress child theme. Don’t let that intimidate you. See how quick and easy it is to implement one for yourself.

If you’re building a website using WordPress, then you are using something that’s called a WordPress theme. A WordPress theme defines the way your website looks. It defines a lot of the functionality your theme may have. It could create specific widget areas. It can add shortcodes  for you to use within your content and so much more. A WordPress theme is the cornerstone of your WordPress website.

View your installed WordPress themes within your admin dashboard

You can view your installed themes and which one is currently active pretty easy. Just click on Appearance / Themes in your WordPress admin dashboard. In the screenshot above you can see that for this WordPress installation two themes have been installed: Twenty Seventeen and Twenty Twelve. Twenty Seventeen is currently the active theme.

If you want to change or add some functionality to your website, if you want to change how your website looks, then you need to change things in your theme. A quality WordPress theme gets updated from time to time: adding in new stuff, making it compatible to the latest WordPress version and more. So when you would edit your theme files directly, those edits would get overridden when you update your theme. How can we prevent this? Just use a child theme. The things you want to change about your theme are placed within that child theme. This child theme will not be overridden by updates of your main theme, thus your own stuff does not get cleared out .

Implementing a WordPress child theme looks complicated, but really, it isn't!Click To Tweet

Child Theme Folder

You need to have access to the files on your web server, through FTP, SFTP or maybe some other way. Then navigate to the folder wp-content/themes. There you can find one or more subfolders. Each folder within the themes folder is an actual theme or a child theme.

View the installed WordPress themes in the file structure

In the example above, you can see there’s a folder for each theme that has been installed. Twenty Seventeen is currently our active theme that we want to extend upon with our own custom functionality and CSS. So we have to make a child theme for this Twenty Seventeen theme.

Creating a new folder for your child theme in the WordPress file structure

Let’s start by making a new folder for your child theme within the ‘themes’ parent folder. Call it ‘twentyseventeen-child’. The name of your new folder does not matter that much, as long as you don’t use spaces. It’s a good practice to add ‘-child’ to your chosen name, so you can see quickly which one of your themes is indeed a child theme.

Your custom stylesheet: style.css

Adding a file style.css in your WordPress file structure

Next, add a new file ‘style.css’ within your new child theme folder. This file is where we are going to put our own custom CSS. With this CSS, we’ll override the CSS of the main parent theme whenever we want.

There’s one more thing left to get our child theme up and running. Open up your new ‘style.css’ file in a text editor and add the following lines on the top of that file:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

This is just a template to get you started. Change everything you want to make this your own. You could change your theme name for instance, add another description, author name and so on. The only thing that matters here is the name you set for the template field. This will be a child theme for ‘twentyseventeen’, so we need to add its name in the template field. Don’t forget to save your file and head on over to the WordPress admin dashboard. Once again, click on Appearance / Themes.

View and activate your new child theme in the WordPress admin dashboard

You can see that our new child theme appears within the installed themes list. Now just click on our new theme, activate it and you’re done. You now can put your own custom CSS within the style.css file of your child theme.

A place to put your PHP code snippets: functions.php

One more thing. There are times you would want to add custom PHP code to your child theme. Of course, that’s not possible within our stylesheet file, so we need to make one other file within our child theme folder: functions.php.

All those code snippets you find on the internet that are talking about placing custom PHP in your functions file, it’s simply this file they’re talking about.

That’s it. You have a fully functional WordPress child theme to add your own CSS and custom PHP code snippets.

Let me know your questions and remarks in the comments below.

Koen Adams

Coding has always been fun to me. There's a lot to learn and after all those years I'm still learning a lot in my quest to be a great full stack developer in the WordPress space.
Posted in

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *