A beautifully customized WordPress site not only represents your brand on the web but also encourages people to visit your site and explore more about your business/products/services. There are many blogging platforms available but WordPress is without a doubt, the most used blogging platform. And the best part is that WordPress comes with a ton of ready-made themes that you can customize it, without using a single line of coding.
But with all the flexibility and customization functionality available WordPress themes, it becomes quite difficult to maintain the custom changes, especially when you are updating your existing theme. In simple words, all the changes that you have made will be overwritten if you update the customized theme.
To protect your changes from being lost while updating your original theme, you will need to create your own WordPress child theme. Here in this post, we will show you how to code your own WordPress child theme and how to modify its CSS customizations and functionality for better outcomes.
So, let’s get started!
What is a child theme and how does it work?
A child theme is a separate theme that inherits the basic functionality of an original theme, i.e. a parent theme. In other words, a child theme is an individual CSS stylesheet that lets you customize your theme without losing the changes you have made whenever you update your parent theme. Now the question is how does it work?
Well, it works pretty well. After activating the child theme, WordPress will first look for template files in the child theme folder. If it is not found, WordPress by default load the file from the parent theme folder.
Since both the versions of the child theme and parent theme loaded in the functions.php file, you’ll don’t need to worrying about any mishap. And, this will keep you custom changes in the safe mode whenever you upgrade your parent theme.
So, if you are updating your existing WordPress site, then it is better to use or create a child theme. Below are the steps that will help you create your own child theme.
How to Create a WordPress Child Theme?
Creating a child theme is not as dreadful as you think. All you need is just two different files:
style.css file
functions.php file
To create a child theme manually for your WordPress site, you will need to trail the following steps:
1. Creating a child theme directory
So, the first step is to create a new directory for your child theme, located in the wp-content/themes folder.
Make sure that the name of your child theme directory ends with ‘-child’. In case, the name of your parent theme is ‘ twentyfifteen’, you can use ‘twentyfiften-childtheme’ for your new directory.
2. Making a stylesheet for a child theme
In this step, you will need to create the stylesheet (style.css file) for your child theme on your WordPress site. Here, you just need to add the following line of coding into your style.css file:
[css]
/*
Theme Name: Twenty Fifteen Child theme
Theme URI: http://forexample.com/twenty-fifteen-child/
Description: Add a brief description about your child theme
Author: Your name
Author URI: http://forexample.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive-layout, multi-lingual, dark colors, right sidebars, user-friendly interface
Text Domain: twenty-fifteen-childtheme
*/
[/css]
The above coding may confuse you, but, you will need to keep the two important snippets in mind, which are:
- Theme Name: Tells the name of your child theme
- Template: It is the name of your parent theme’s folder
Note: So, just keep these two things in mind while coding your child theme’s stylesheet. Also, don’t forget to replace the information with your theme’s details.
3. Create a functions.php file for a child theme
Creating a style.css file can help you run a child theme on your WordPress site. But it doesn’t look pretty well as you haven’t done any styling with it. In case, you activate and reload the page, it will look very cluttered.
In order to fix it, you will need to enqueue the parent theme in the child theme. For that, you will need a functions.php file in the child theme to add the following coding:
[php]
<?php add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
[/php]
4. Customizing the child theme’s CSS file
Under this step, you will need to tweak the CSS for your child theme customization (if necessary). For instance, you can style the background element for web content to see how child theme works. Although it has been styled white in the parent theme CSS, you can customize it to any other color in your child theme on the fly.
Here, your parent styles will load first, and then WordPress loads your customizations that you made to your child theme’s CSS file. To make the changes, you just need to add the customized CSS information within your CSS file, something like this:
[css]
/*
Theme Name: Twenty Fifteen Child theme
Theme URI: http://forexample.com/twenty-fifteen-child/
Description: Add a brief description about your child theme
Author: Your name
Author URI: http://forexample.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive-layout, multi-lingual, dark colors, right sidebars, user-friendly interface
Text Domain: twenty-fifteen-childtheme
*/
@import url(“../twentyfifteen/style.css”);
/*=Add the CSS customization details here
[/css]
5. Activating the Child Theme
Once after customizing the CSS file of your child theme, you can activate it on your WordPress site. For that, you will need to zip the child theme folder that you have created and install it through Appearances → Themes right in your WordPress admin dashboard.
Or, you can also upload it the way it is to your themes directory via an FTP client.
How to modify the functionality of your new child theme?
Customizing the styling of a child theme is very simple. You don’t need to work hard to accomplish this. But, when it comes to modifying other elements of a theme, you will need to approach differently.
For instance, if you want to make some modifications in the header, just copy and paste the header from the parent theme into the child theme. Now, open the header.php file in the text editor (of your choice) and modify it as per your requirement.
And, this is how you can modify the different functionalities of your child themes in a matter of few minutes.
Conclusion
A child theme not only allows you to update your parent theme, without losing any custom changes but also save your time and money. With just these simple steps, you can easily code your own child theme and keep customizations separate from your parent theme.
Author Bio:
Tracey Jones is a proficient web developer who helps in creating custom WordPress theme and share her experience with others. In this blog post, she is making people aware about how to create a WordPress child theme for your website. To keep updated with her latest publications, follow Tracey on Twitter.
