How To Create A Child Theme
Sometimes, finding the perfect theme for your website is hard. Some theme may have a good functionality, yet, the design doesn't suit your need or vice versa. Therefore, the best option is to use a theme closest to your needs and modify it accordingly. This can be done by creating a child theme. And in this article, I will share with you how to create a child theme.
About Child Theme
What Is A Child Theme
A child theme is a WordPress theme that inherits all functionality and design from another theme which acts as its parent theme. With a child theme, you can further customize the theme, adding more functionality or change its design without losing any of your customizations.
This is because any modifications made directly to the parent theme will be replaced with the latest version of files during the update. And to prevent this, WordPress core team along with community have created the concept of parent-child theme.
Do You Need A Child Theme To Customize
Not necessarily. It depends on the customization you want to do. If you simply want to change button color, hiding certain element or other small changes, using Additional CSS is a better solution. You can find this option in your current theme by going to Appearance » Customize.
However, if you want to completely change the design and remake the template, then, using a child theme is the best way.
The Advantages And Disadvantages Of Child Theme
Besides you can preserve your customization when you update parent theme, creating a child theme also can speed up your development time. With a child theme, you don't have to create a theme from the scratch. Instead, you can use any good existing theme, adding more function or changing its design to suit your need.
Usually, creating a theme from scratch may take days to weeks to complete. But, with a child theme, you only need hours to days to start your website.
Furthermore, creating a child theme is also a great way to learn about theme development. This will give you a better understanding of how WordPress theme work.
But, please keep in mind that different theme may have a different structure. And since each theme may use different hooks and filters, the time you need to invest in learning the theme may vary.
Tips Before You Create A Child Theme
As you already know, a child theme usually used to extend functionality and further customize its parent theme. Therefore, it is important to choose a good theme as the parent theme. Although all themes can have a child theme, yet, not all of its suit to be a parent theme.
In order for a child theme to give its best potential, it is recommended to use a WordPress framework. There are many WordPress framework you can use as a parent theme. For example, Genesis, Themify, or Thesis are some of the most popular frameworks among WordPress users.
Create A Child Theme Manually
In order to make a child theme, you need four things. It is a folder, a stylesheet, a PHP file named functions.php and a theme which will act as a parent theme. For the sake of this tutorial, I will use Twenty Seventeen, an official WordPress theme as my parent theme.
All the steps below are done through the FTP connection. You might want to read how to upload files and folders using FTP client. Or, if you familiar with cPanel, you can also do it directly in the File Manager app.
Create A Folder
Without further ado, let's start by creating a folder for our child theme. Similar to other themes, child themes are also located in wp-content/themes in your WordPress installation.
First, navigate to wp-content/themes and create a new folder and name it to anything you like. In my example, I named it as twentyseventeen-child as you can see in the image below.
Create A Stylesheet
Next, create a new file and name it as style.css. Then, add the following lines into your newly-created style.css.
Let's break the above lines into smaller part. Please note that only Theme Name and Template are required to create a child theme. And the rest of the lines are optional unless you're planning to publish your child theme in the WordPress directory.
- Theme Name: The name for your child theme.
- Theme URI: Link to your child theme page.
- Description: A description of your child theme when you click on the Theme Details.
- Author: Name of child theme author.
- Author URI: Link to child theme author page.
- Template: Most important part and also case-sensitive. Missing or incorrect value will make your child theme treated as a normal theme or cannot be activated at all. To get template name for your child theme, please check the folder name of your parent theme. Where folder name of parent theme is equivalent of template name of the child theme.
- Version: Version number of your child theme.
- License: License type of your child theme. It is recommended to use the same license as your parent theme.
- License URI: Link to your license page.
- Tags: Related tags to help others find your child theme more easily in the WordPress directory. Must be separated by a comma for multiple words.
- Text Domain: Used for internationalization purpose which makes your child theme translatable into other languages.
Now, let's copy and paste the above lines and make your own adjustment. Once you finish, save and upload this style.css into your child theme folder.
In the future, this is the file that you will place all your customization for your child theme. Simply add all your future styling below the above lines and save it.
Create A functions.php
After that, let's create a new file and name it as functions.php. If you have been using WordPress for a while, you may already know about this file. This is the file you will use to add all your code snippets in the future. In which will allow you to add, change or remove features from your WordPress site.
Next, add the following lines into your functions.php and save it. This code is added to your child theme so that it inherits all styles from a parent theme.
While there's another old way which using @import to inherit styles from the parent theme, yet, I wouldn't recommend it.
This is because using @import will cause performance issue on your server as explained by Steve Souders on his article. He was Head Performance Engineer at Google, Chief Performance at Yahoo! and currently Chief Performance Officer at Fastly.com.
Add A Theme Image
In this step, we will add an image using the PNG format for our child theme. Usually, this image is a screenshot of your website front page. But of course, you can use any image you prefer. Simply use any PNG image you like, preferably with size at least 880 × 660 pixels and rename it as screenshot.png.
For this tutorial, I will use our featured image for theme image. This is how it looks after we upload it as screenshot.png in the child theme folder.
At this moment, you should already have style.css, functions.php, and screenshot.png inside your theme folder. All you have to do now is go to Appearance » Theme and activate your child theme. And congratulation, you have now successfully created a child theme.
Let's say, for example, you want to change the footer template on your theme. Simply copy your footer.php from the parent theme and paste it into your child theme folder to modify it.
This will result in your child theme footer.php modification implemented in website front page instead of original footer.php from the parent theme.
Create A Child Theme Using A Plugin
Beside the manual method above, you can also create a child theme using a WordPress plugin. With more than 200,000 active installations, Child Theme Configurator obviously is the most popular child theme plugin.
This plugin comes not only with the ability to create a child theme but also can configure your child theme further. You can do all this directly from the plugin settings page without having to log in to cPanel or using FTP.
Furthermore, you can copy any of parent templates, add additional stylesheets, web fonts or export your child theme as a zip archive. Not to mention, you also can copy and configure any CSS selectors directly from parent theme into a child theme.
In short, creating a child theme is extremely easy. Whether you create a child theme manually or by using a plugin, it definitely gives you many advantages. I'm sure by now you already made your first child theme. Feel free to share about your first experience or any of your issue in the comment section.
He is a web developer, a programmer, and a computer technician. He obsessed with coding and enjoy learning new things. In his spare time, he likes to play online games, musical instruments or watching anime and movies.