How To Create A Child Theme of Any WordPress Theme?
September 10th, 2016 | by Ravi Chahar || 18 Comments |
Are you a blogger and want to become a developer? Do you want to create a child theme of your current WordPress theme? Do you know how to create a child theme?
In this post, I will provide the basic idea to develop a WordPress child theme. You would come to know the importance and the usage.
There is always an issue when you customize your WordPress theme and want to upgrade it to its latest version. You should know that you can update WordPress theme manually.
A Child theme can also help you in that. You can create a child theme to customize your parent theme which would let you update the parent theme easily.
How To Create A Child Theme Within A Few Minutes?
Though to start developing a WordPreess child theme of any parent theme, it would take a few minutes but the customization may take the time.
It is dependent on the choice you make to design your theme. The benefit of creating a WordPress theme is that you can easily customize the parent theme.
It would give you the freedom to update without any cPanel or FTP usage. Whenever you want to add any extra code to display something to your website, you can add that in the child theme.
You won’t need to build a WordPress theme from scratch. As this website is running on the BloggingLove Theme which was created from the scratch.
You won’t need to work so hard. You just have to connect the files of the parent theme to your child theme.
Connect The CSS File To Create A Child Theme.
It would be good if you install WordPress on Xampp server or any other local like to break your main theme.
There are some steps after that.
Step 1:- Open the WordPress folder present on the local server. If you want to create a child theme on an online server then you just have to login to the cPanel and open the [get_bloginfo]url[/get_bloginfo]/files/“public_HTML” directory.
Step 2:- Search for the [get_bloginfo]url[/get_bloginfo]/files/“wp-content” folder and then [get_bloginfo]url[/get_bloginfo]/files/“themes” folder.
Step 3:- Create a new folder with the name of your child theme.
Step 4:- After adding that folder, open it and create a new file using the Notepad or any other text editor. You have to add a few lines about this child theme.
/*Theme Name: Child Theme Name
Theme URI: http://www.yourdomain.com
Description: Child Theme of Parent Theme Name
Author: Your Name
Author URI: http://www.yourdomain.com
Template: Parent Theme Name
Version: 1.0
*/
@import url([get_bloginfo]url[/get_bloginfo]/files/“../parentthemename/style.css”);
Step 5:- After adding these details, you have to save this file as [get_bloginfo]url[/get_bloginfo]/files/“style.css[get_bloginfo]url[/get_bloginfo]/files/“. It’s because when you create a child theme of your parent theme then you import the main CSS file.
NOTE: Make sure that you don’t miswrite the name of the parent theme. It is case sensitive. If it is written as [get_bloginfo]url[/get_bloginfo]/files/“BloggingLove” then you can’t write it as [get_bloginfo]url[/get_bloginfo]/files/“blogginglove”. You have to copy and paste it as it is.
Step 6:- If you want to change the design of the parent theme then you can use the style.css file of your child theme. You can edit all the WordPress theme file structure just by adding those files in the new folder you have created for the child theme.
After that, edit the files. For example, if you want to add a few theme support options then you can copy the functions.php file of the parent theme and paste it in the child theme folder.
Edit it and add the codes in the functions.php. You can do that with any file. There would be no effect on the parent theme files.
If you are jumping in the theme development process then you should know about the syntax error and the most common errors in WordPress.
How Can You Use The Child Theme To Customize Your Parent Theme?
The main requirement is the knowledge of the HTML and CSS. If you know the CSS classes and IDs then you can easily modify every section of the theme.
For which, you can use the [get_bloginfo]url[/get_bloginfo]/files/“inspect element” option available in many browsers. If you are using Google Chrome or Opera then just right-click on the part of the theme you want to customize and choose the [get_bloginfo]url[/get_bloginfo]/files/“inspect element” option and you can easily see the HTML structure and the classes.
You can directly target any of the parts of the parent theme using the style.css file. CSS is an amazing language and you have fun with it.
Now, you can modify your website the way you want. Basically, you have added a child theme to your website. But the customization is in your mind, do it by targeting the parent theme elements.
Are You Ready To Create A Child Them For Your Website?
People dream to build the best blog ever. For which, they modify the design of the theme they use. Many people even change WordPress theme.
You don’t need to change the theme if you can modify it. If you are a beginner in the web development field then it would be a great start for you.
It’s because, you won’t need to create all the theme files, just use the original files to customize your website’s theme.
Create a child theme which can give a new look to your blog and drive traffic to your blog. If you face any problem then feel free to ask.
Related Posts
18 comments
Leave a Reply
Hi Ravi,
Good Post like non developer like me. It always feel great if you create that your own whether it is a food or wordpress theme.
However, you demonstrate how to create child theme by own but still like your website’s theme.
It is neat and clean. I wish you develop more theme like this.
Thanks for sharing this tutorial with us.
Umesh Singh
Hey Umesh,
Creating a child theme requires the CSS skills. You won’t need to deal with the PHP content because the base of the theme has already developed by the developer of the parent theme.
You just have to design that theme. I will try to provide a few more themes like BloggingLove Theme soon.
Thanks for the support.
Have a great day.
~Ravi
Ravi, one question. Say if I make a child theme and just want to make one little change in the say [get_bloginfo]url[/get_bloginfo]/files/“single.php” file – the individual blog post file in my theme.
Now I copy the individual single.php file from my main theme into the child theme folder. But I only make a simple change of one line (in code) in the single.php in my child theme.
I still want to use the parent file single.php as well as the base?
Can I do that or does it always need to be full loading of the child theme’s single.php file?
Hey Ahmad,
When you create a child theme then the files of the parent theme remains the same. Creating a child theme is like a new theme. You active the child theme on your website, not the parent theme. It means that you are using the files of the parent theme to create a new theme.
Both the parent theme and the child would be different and you can use any one of the themes. Can you use two themes at the same time on your blog? No, you can’t. The same concept is here.
Either you activate the child theme or the parent theme. Choose one.
~Ravi
Hi Ravi,
This is something every blogger, designer, or developer can use. I’ve created a child theme before and it scared me. I was so paranoid of ruining files. I’m saving this for future reference for when I decided to dabble in developing. ?
B
Hey Bren,
We all get scared for the first time. But you know that when you try to code more then it would be fun. You can easily create a child theme. The files of the parent theme are quite hard to code.
But customization won’t require much expertise. Just focus on the CSS and your design would be ready.
Thanks for the support.
Enjoy the day.
~Ravi
Hi Ravi,
Good tutorial. It is a good idea in general to create a child theme and then do whatever modification you require, as playing with the parent theme’s CSS might break your theme altogether.
For this reason I use the Genesis Framework on my blog. It’s easy to manage and you can customize the child theme by using custom edits or hooks. It is however very interesting to tweak the theme manually by modifying the CSS.
I can see that you have modified the child theme of your blog and it looks really great!
Thanks for sharing this Ravi. Have a good one!
Hey Arpit,
Maybe you are right about breaking the parent theme. But the same situation is when you customize the Genesis theme, Thesis theme or any other platform. There is a custom CSS option in most of the WordPress theme using which, you can customize the theme.
But if you want to give a new look then creating a child theme is the best idea. It’s because you are using the parent files but can build a theme with a new look. There are a few chances of theme breaking.
This blog is running on a custom WordPress theme ( BloggingLove Theme ) which was developed from the scratch. It’s not a child theme.
Thanks for sharing your thoughts.
~Ravi
Hi Ravi,
Great to hear that this is a custom theme! Good work man!
I was a little confused as it resembles the Magazine Pro theme offered by Genesis ?
~Arpit Roy
Hey Arpit,
There are many people who are running their blog on the Genesis platform. So I thought to do something my own and developed this theme for my blog. I will provide it to all the readers free.
There are many people who want to start a blog but don’t get any good theme. Maybe this theme can help theme to build a better blog.
I have just checked the theme running on your blog. The navigation menu is quite similar.
~Ravi
Anything that involves a little technical at all, it’s definitely a time-consuming task that needs to be outsourced, but this would definitely be helpful to others.
Hey Louis,
If you devote the time then only you can achieve the success. There is no shortcut for anything. You have to do the technical for developing the WordPress child theme.
Enjoy the day.
~Ravi
When I entered blogging for the first time, one thing I came across theme customization was to first create a child theme and then proceed with customization.
I assumed it important (which is correct) and then tried creating one. You know what? It was hell lot of work for me. I sweated, to be frank. I don’t know how many tutorials I have browsed to successfully create it.
Your tutorial would have been must easy to follow and cope up esp by new bloggers. I’ll refer this for my new blogger friends.
Remain blessed!
Hey Sherab,
It’s hard for every blogger to enter in the web development field. Like you, I was a kind of scared of the codes in my starting days. It was quite hard for me to learn about these things.
Creating a child theme can help you to design your blog the way you want. It just takes the use of the parent theme’s files. I hope this can help the needy people.
Thanks for passing by.
Have a great day.
~Ravi
Hey Ravi,
I’m clearly not a developer but this is something I’m interested in doing. I’ve seen a ton of WP themes that I love but couldn’t get. So this post serves as a bridge to help me at least know and learn how to do this.
Thanks.
– Andrew
Hey Andrew,
There is nothing hard to do for developing a child theme of any theme. You just have to add these lines of codes and then do the CSS work. If you want to change the structure of the elements then it can be done using PHP.
Thanks for stopping by.
Enjoy the day.
~Ravi
Hi Ravi. This is one of the many things that I love about WordPress. It is such great sandbox for learning programming and web development. There aren’t many systems that I’m aware of that make it so easy for new people to write small pieces of code and use them either as a child theme or a plugin. Once in place you can make small changes and see how the work immediately. It’s a great platform.
I have a child theme on my future to-do list. It’s great that I can put the parent theme in place then just override the individual files.
Thanks for writing this post.
Hey Ben,
WordPress platform provides many opportunities to the web developers. If someone wants to learn about this platform then the best thing is to check the Theme codes.
Creating a child theme would do perfect if you have the tight hand with the web designing languages. It’s good to know that you’re planning to create a child theme.
Thanks for stopping by.
Enjoy the day.
~Ravi