Sanjip ShahMany of us want to customize something in theme. Are you also looking to add or edit something in the theme that you are using? If yes, then you have come to the right place, my friend. This post is a simple and comprehensive tutorial on creating a WordPress child theme.
If the theme has lots of customization options then this might help fulfill your needs. But regardless of how many options may be available, there can still be something that the current theme you have is unable to do or is not the way you like. So, if you are comfortable with codes and WordPress then you may dive into the theme files and start editing it spending some minutes, hours to add the changes that you like into the theme, only to discover you have lost those changes when your theme’s next update rolls around.
So to avoid this comes our hero called the Child Theme. Creating a child theme allows you to make changes to your site without changing anything in the original theme’s code. Even if you’re only making a few minor tweaks, it pays to spend a few minutes creating a child theme.
Note: To make simple CSS changes in your website, you can use Additional CSS box added in WordPress 4.7 instead of creating a child Theme. These changes made via Additional CSS box will still remain there even if you update the theme. But if you are looking for other additional changes like editing PHP files, a child theme must be created.
So, I think this will cover the ‘Why Create a Child Theme?’ question. So, let’s move ahead and create a child theme.
How to create a WordPress Child Theme?
In this tutorial, we’re going to show how to create a child theme for our own popular theme Spacious.
Step One:
Create a new folder in your themes directory. You can do so using the cPanel or via FTP. The themes directory is the wp-content/themes. So, let’s name the folder as spacious-child. You can name it whatever you like but remember there should not be any space in the folder name. It is a common approach to name child theme as the parent theme plus -child added on the end.
Step Two:
Inside the spacious-child folder create a file called style.css and fill in the information as shown below.
/* Theme Name: Spacious Child Theme Theme URI: http://themegrill.com/themes/spacious/ Description: Spacious Child Theme Author: ThemeGrill Author URI: http://themegrill.com Template: spacious Version: 1.0 */ /* =Theme customization starts here ------------------------------------------------------- */
Add this and save the file.
Points to remember:
- Template name (here in this case spacious) should match the folder name of the parent theme and also make sure there is no blank space after the name.
- Other details can be added or changed as you like.
Step Three:
Create a file called functions.php as you created ‘style.css’ in Step Two. And fill in the information as shown below.
<?php
/**
* Child theme functions file.
*/
function spacious_child_enqueue_styles() {
// Parent theme style handle 'spacious_style'.
$parent_style = 'spacious_style';
// Enqueue parent and child theme style.css.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );
In creating a child theme, style.css and functions.php files are mandatory while template files, and other files are optional and can be created if required.
Lastly, to activate the child theme, in the dashboard go to Appearance->Themes. Look for the child theme you created and activate it. That’s it. Also, make sure the parent theme is also present in the installed themes for the child theme to work. If you now visit your site, it should look all same just like when the parent theme was activated. However, you may need to reset some of the settings in the Customizer.
Note:
Only for ThemeGrill Theme Users, below we have provided child theme zip file for all our free and premium themes. You can download it and take it as the starting point to make your child theme.
Child Themes for our FREE WordPress Themes
- Flash Child Theme ZIP
- ColorMag Child Theme ZIP
- Spacious Child Theme ZIP
- Zakra Child Theme ZIP
- Radiate Child Theme ZIP
- eStore Child Theme ZIP
- Himalayas Child Theme ZIP
- Accelerate Child Theme ZIP
- FoodHunt Child Theme ZIP
- Ample Child Theme ZIP
- FitClub Child Theme ZIP
- Esteem Child Theme ZIP
- ColorNews Child Theme ZIP
- Envince Child Theme ZIP
- Explore Child Theme ZIP
- Masonic Child Theme ZIP
Child Themes for our Premium WordPress Themes
- Flash Pro Child Theme ZIP
- ColorMag Pro Child Theme ZIP
- Spacious Pro Child Theme ZIP
- Radiate Pro Child Theme zip
- eStore Pro Child Theme ZIP
- Himalayas Pro Child Theme ZIP
- Accelerate Pro Child Theme ZIP
- FoodHunt Pro Child Theme ZIP
- Ample Pro Child Theme ZIP
- FitClub Pro Child Theme ZIP
- Esteem Pro Child Theme ZIP
- ColorNews Pro Child Theme ZIP
- Envince Pro Child Theme ZIP
View all of our FREE and Premium WordPress Themes.You may also like to see this: The Best FREE WordPress Themes you must watch in 2017 .
Modifying Your Theme’s CSS
If you want to modify the theme’s CSS, you can add CSS in the end of the style.css file and save it. These CSS lines will overwrite the parent theme CSS.
For example, say we want to change the font size of the site title for the spacious theme for 36px default value to 42px and also change its color from #444444 default to blue (#0000FF). Then you can just add the below CSS lines.
/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/
/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
color: #0000FF;
font-size: 42px;
}
Making Further Changes
Editing other theme files
You can also make structural changes to the theme files by adjusting template files. Say, you want some changes or want to add some extra code in the header. Then you can copy the header.php file of the parent theme, paste inside the child theme and make/add changes there and save the file. This header.php file will load instead of the header.php file of the parent theme.
Wrapping Up
Hopefully, now you are able to create a child theme and make the customization that you like. Want to say something? Add it in the comments and I will get back to you. Enjoy!
Is it possible edit JavaScript permanently through Child-theme? How?
Hello, Marcus. We tried to help but we are not support representatives. If you have further queries, please use this page https://themegrill.com/contact/ to ask your query and our support team will get back to you.
I am a newbie, knowing very little techs. How do I make use of the download “ColorMag Pro Child Theme ZIP” to set up the child theme?
Hello Loh. All the processes are explained in the article. However, if you’re confused then here’s a brief explanation – After downloading the ‘ColorMag Pro Child Theme Zip’, install and activate it on your WordPress dashboard. Once you activate you’ll see a pop-up, click on the ‘Continue Subscription’ button. Now go ahead and copy the necessary files from the ColorMag Pro theme to the ColorMag Pro child theme.
I have been using the Colormag pro theme for a year and the experience is very positive. The design is very nice and navigable, and the options to optimize and order the blocks are very easy to configure.
Greetings.
hi, with Spacious, slider is not showing with child. I just downloaded the child template from your website. Its activated under customize. Also, there is no HTML for the slider in view-source. Im stumped.
Hello Derek,
Could you please put forward it on our Support Page please? 🙂
Hi Sanjip,
Could you help me understand how the dashboard settings work? Why the stylings changed via dashboard aren’t lost when a theme is updated? I am guessing that it means, those are not saved into the database. Where are those saved?
I made some stylings in my site from my dashboard and now it seems like I need to create a child theme so that I can add a page template. I was wondering if those stylings I made through the dashboard will be gone once I activate my child theme.
Thanks so much for your help!
Hello Sabina,
If you are referring to the Additional CSS box, it gets stored within the database and hence the theme update will not wipe out those. And if you want to use the child theme then, you need to copy the CSS added over there to the `style.css` file of the child theme.
The CSS Header text on eStore child theme is not showing awesome fonts icons.
This is what appears on the website header
[email protected] +1236574902 242 West Main street, Ohio Shop opens: 06:00-22:00 (weekdays)
Please advise
Hello Davido,
You can put your queries about our themes on the ThemeGrill Support Page.
Hi,
I have the Cenote team, the free version and I would love to edit the footer part “All Right Reserved. Theme By ThemeGrill. Proudly powered by WordPress”. I would like to remove the powered by WordPress bit. Is there anyway I could do that without changing the theme to a Child Theme?
Thank you.
Hello Eliza,
Glad to hear that you are using the theme Cenote. However, the free version does not provide the option to remove the Powered By text. The option will be available on the premium version. We are currently working on it and it will soon be available.
Hope this helps!
Hello,
I just downloaded the files to create a Flash child theme, but when I activate the child theme, the logo, the social menu and the principal image do not appear in the child theme.
Any idea on how to solve this?
Thanks in advance and best regards!!!
Carlos
Hello Carlos,
You will probably need to set the customize options again for your site since WordPress will recognize child theme as a new theme and hence, the customize options will be set as new without the modification done on parent theme.
Hopefully, this will solve the issue 🙂
Thank you. That solved the problem.
Now I have another problem. I have put the following CSS in the styles.css file of the child theme to show the instagram icon on the SOCIAL bar, but it does not work:
.transparent.header-sticky .header-top {
display: block;
}
.social-menu li a[href*=”instagram.com”]::before {
content: “\f16d”;
}
.social-menu li a[href*=”instagram.com”]:hover {
color: #333333 ;
}
If I put it on the “Additional CSS” section of the Customizer it works, but I would like to have in the file instead of the Customizer.
Can you help me with this?
Thanks in advance!!
Hi Carlos,
So glad we could help you.
Can you please post your theme issues on our ThemeGrill support forum
That way our support team can provide you with the solutions in a more convenient way. Thank you!
I need help ..Can you please help me???
Sure. Please contact our support team.
If you don’t know how to contact support, please have a read here: https://themegrill.com/blog/wordpress-support-help-for-beginners/
Thanks!
hi, great post and thank you … I’m just wondering if you have a child theme for Flash Pro? When I use the Flash child it doesn’t allow the pro options? thanks in advance .. Jane
Hi Jane,
We have just updated the post with Flash Pro child theme. Please check it.\
Thanks!
Hi Jane,
We have just updated the post with Flash Pro child theme. Please check it.
Thanks!
I have already started building my website, will this affect my ability to make a child theme?
Hi Tanner,
Not really. You can create a child theme or use an existing child theme if you want some customization done with your theme. 🙂
Wow, piece of cake! Thanks for the instructions, much easier than those on the WP site.
Very brilliantly explained. I hope it will help me to get blog of my desire. Thanks
Hi
This is prabhu. I’m a web developer. i love working with wordpress. your article about how to create wordpress childtheme will be really helpful for the beginners. your article is very simple and neat. its easy to understand.
Thanku
HI, This post appears to be a good post. I have a basic managed wordpress hosting via godaddy. All I have access to is the wordpress admin. There is nothing in the WP admin that allows me to access the theme folder . How can i access the theme folder to create the child theme?
Hi Prakash,
Please contact your hosting company’s support team for this issue.
Thanks!
Why don’t you provide a child theme in .zip format so that we can just download it right away?
Hi Mohammed,
Thanks for dropping your comment. If you are looking for child theme zip for any of ThemeGrill themes, then we have added those in the list. If we have missed any then please let us know and we will add it as well.
Now, if you are just referring to a general child theme, then what you can do is just download any of our child theme zip file from above say Flash child theme zip file. Then you can just edit the details with your own details to make the child theme according to your requirements.
Hope this information helps.
Sanjip
I am trying to create a child for Flash Pro. I started with the flash child zip as there isn’t a Flash Pro version but tweaking the details in the child style.css I am still seeing an error message ‘The parent theme is missing. Please install the “Flash Pro” parent theme.” .. any suggestions?
Please contact our support team here: https://themegrill.com/support/.
Thanks!
I made a flash child theme and now the social menu won’t appear. How do I fix it?
fixed. sorry
For the Spacious child theme, I lost the ability to customize the logo under the Site Identity section. I can attach a logo, but it does not appear on the page.
Hi Scott,
Sorry for the inconvenience. May I ask you to submit your query in the support forum? Besides, we do have live chat support as well.
Thanks!
Hi Scott, I have the same issue. Did you get a fix for it?
hi ,
I am using flash theme. I have created a child theme but the customizing options are not dispalying. Any solution???
Hi vish,
Sorry for the inconvenience. We have now updated this article with Child theme file for Flash theme as well.
Please download the Flash Child Theme ZIP and customize.
I think there will be no problem now.
Thanks!
Hi Sanjip
I have already modified my theme before realised i need to create a child theme. How do i go about it?
And i noticed you have given us the child theme zip file.
How do i activate it?
Sorry abit confusing
Hi Adel,
In this case, you will need to redo the changes, this time via a child theme. Either you do it again via child theme or you will have to stick with current modified theme without updating in future which I personally don’t recommend as you will be missing the bug fixes, new features, WordPress latest version compatibility enhancement that comes with version updates.
So, if you are able you will need to redo those via child themes, else you will have to hire professional to make the child theme.
Thanks.
Sanjip
Sanjip, I can’t for the life of me get the Spacious Child theme to work. I am absolutely NOT a programmer, which is probably why I’m having such problems, but I’ve read that @import no longer works all the time and something about enqueue instead?
I’ve tried to make my own with enqueue but without success. It is so cool that you’ve provided all these children above.
Is there any way you could make a Spacious Child with that enqueue function? This is driving me crazy!
Love the theme. Thank you!
HELLO WHAT OF COLORMAGFREE THE CHILD THEME?
Hi,
I have updated the article, it now contains the ColorMag Free theme child theme zip file as well. 🙂
Have a nice day!
Sanjip
Thank you for your suggestion, Sanjip.
I started from scratch and re-installed Wampserver and WP, so far so good.
I have not yet added slider images and plugins…
Could you help me again with removing Post Author and Date?
I couldn’t find which php file or Dashboard section to make the modification I need.
Thank you very much for your help.
Hi Jopi,
This can sometime be due to plugin conflicts. So, try deactivating your active plugins one by one and see if this solves the issue.
Thanks.
After watching a lot of Youtube videos I chose Spacious Theme vs Vantage, etc.
I have installed it in a Wamp64 local server for my trial website.
Unfortunately, I customized Spacious first instead of Spacious Child theme.
I should have checked here before I started…
This is what I get now when I try to upload (choose) any slider image for Spacious Child:
———————————————————————-
“Uploading
health-cures-s25.jpg An error occurred in the upload.
Please try again later.”
———————————————————————-
What is causing this error and how can I fix it?
Thank you for your time.
I notice that what bugs me the whole saying my template is missing? Its only in the template. It must have all small letters. I did the wrong ColorMag. The correct should have been colormag.
Hi,
Just a quick note to help anyone having problems with child themes after upgrading from Spacious Pro V 1.0.2 (or thereabouts) to V 2.0.1
In my child theme, I had modified header.php, but after parent theme upgrade, found that my site broke.
I found that header.php used to call a function ‘of_get_option’ in the old version of theme whereas the new version uses (an almost identical function) called ‘spacious_options’ – simply replacing all instamces of ‘of_get_option’ with ‘spacious_options’ in chlld theme’s header.php, solved the problem.
Hope this helps someone.