UPDATE December 2016: Please see the post Child Themes: Enqueuing the parent theme stylesheet instead of using @import
On a previous post I stated that it was very easy to create a WordPress child theme from an existing theme.
We also saw on that post that a child theme is a perfect solution to ensure that your modifications to the theme will never get lost after a parent theme update, no matter how heavy your customizations are.
On that post we didn´t get into the details of creating a child theme. As I said, there are lots of great posts explaining how to create a child theme. Just in case you´ve missed any of them so far, I´ve decided to write my own tutorial. And I´ll do it insisting on how easy it is.
That said, if you already know how to create a WordPress child theme, I don´t think you will learn anything new here. On the other hand, if you are not familiar with child themes, I hope this post will clarify concepts for you and will leave you itching to create your first child theme right now.
Don´t be afraid (1) – It´s much easier than you thought!
At the beginner level this subject is surrounded by an inexplicable mystery halo. I don´t really know what the reason for this is, but for somebody who doesn´t know the basics of child themes or how to create one, the whole thing usually appears like something to be done by an expert. Oh well, if that is so, you will become an expert after reading this basic tutorial!
So the first thing I would like to point out is how really easy is to create a WordPress child theme, and I want you to never forget that.
Don´t be afraid (2) – You can´t break it!
Just one more thing before we get into the details: no matter what you do, you can´t break anything. I mean, some methods can be easy (and believe me that creating a child theme is) and at the same time they can be dangerous, but that´s not the case when creating a child theme. I promise.
The simple explanation for it is this: since you will not be interfering with the original theme´s files, there is nothing to be afraid of. As a matter of fact, directly tweaking your theme would always be riskier. And that´s the second thing I want you to remember.
So, let´s go!
Now that we have lost our fears about creating a child theme, let´s get our hands on it. There are just a few steps involved, only three of which are really necessary:
- Create a new folder for your child theme.
- Create a new style.css file inside that folder.
- Edit the style.css file filling it up with your information and a couple of things which are needed for the child theme to work.
I am aware that, after reading this short list of steps, some less experienced WordPress users might say something like: “wait, wait, Luis, you´re cheating us! you just said that I couldn´t break anything and now you tell me to create folders and files, and that means accessing my server which scares me to death because I could screw something up, besides I don´t want to mess with ftp and all that stuff”. Or maybe somebody would not be afraid of those things but just wouldn´t know how to do them.
If that is your case, I´ve got good news: there is an even easier way for you to handle those tasks, directly from your WordPress admin area. So if you don´t feel like dealing with ftp or are just afraid of doing something wrong, you can jump directly to “The easier way”, where the number of steps involved in creating a WordPress child theme is even lower.
Once you had completed those steps, you would have technically created a child theme. You could go ahead and activate it, and it would work. It wouldn´t do or show anything different from its parent theme though, so if you want to customize your theme you will need to do some other things, like:
- (Optional) Add whatever CSS rules you want – this is optional in theory but otherwise, why would you want a child theme?
- (Optional) Add new functions
- (Optional) Add new templates
- (Optional) You can also add a screenshot so your child theme can be easily recognized
Now let´s get started with the regular (and easy) way of doing it (remember that you can always jump to the easier way):
Step #1: Create a new folder for your child theme
The first thing you need to do is to create a new folder inside the themes directory of your WordPress installation (“/wp-content/themes/”). You´ll need a FTP client such as Filezilla to access your site via FTP. Once you are connected and logged in, get into the themes directory and create a new folder, right at that level inside the themes directory. Note that your new folder will be side by side with whatever other themes you may have installed, including the one you are going to use as the parent theme for your new child.
For this tutorial I´m going to use a site called “Tutorial Test Site” and I´m going to create a child theme for the brand new Twenty Twelve theme. I´ll call it “New 2012 Child Theme”, so the name I´m giving the new folder is “new-2012-child-theme”.
You can use whatever name you want for that folder, but make sure to choose one that makes sense. The logical way to go is to use the name you will be giving your child theme, so that is what you should do. It is also a good idea to always use the word “child” within the name of any new child theme folder, and including the name of the parent theme as well would make everything clearer.
Step #2: Create a new style.css file
You will only need one single file to create a child theme, and that is its stylesheet. You may have more files as we´ll see later, but a style.css is the only one that is really required.
At the top of that file an information header must be present. The information header consists of some commented lines, some of them being absolutely necessary while others are optional.
There are two lines that should be in the information header for your child theme to work. Both are used to tell WordPress decisive things:
- The name of your new theme
- The theme that your child theme will be using as its parent
We´ll be dealing with those lines in the next step. So now open up any text editor such as Notepad++, create a new file, and save it as style.css inside the folder you have just created.
Step #3: Fill the stylesheet with the required information
On the top of your new style.css file, write a few commented lines which will form the information header:
The two lines that I´m calling out by means if the red arrows are the ones which must be there necessarily. On the “Theme Name:” line you can write whatever name you decided to give your child theme. As for the “Template:” line, it has to exactly match the directory name of the parent theme. Be aware that it is case sensitive.
The lines in between are optional, but it is a good practice to include them, filling them up with the URI to the site homepage, the author´s name, the author´s site URL and a brief description for the child theme. It is good to include a version number, which can be updated every time the theme is modified.
Remember that the the information header should be right at the top of your style.css.
Everything below the header will work as a regular stylesheet file, so there will be where you should put any new styling rules you want WordPress to apply.
And now comes a very important point. You may have noticed that I´ve already added one rule. Let´s see what it means and why it should be there:
A child theme’s stylesheet replaces the stylesheet of the parent completely, which means that WordPress won´t even load the parent’s stylesheet. So if you want to use the parent theme as a base and just make some modifications to its styling or layout, you will need to first import the stylesheet of the parent, and then make your modifications by adding the corresponding rules to your child´s style.css file.
That is why you need to include a line like the one you see under the information header. In this case, since I´m creating a child for the Twenty Twelve theme, I need to call the stylesheet for that theme, so the line should read:
This @import rule should be put inmediately below the information header. If you put other rules above it, it will be invalidated and the stylesheet of the parent theme will not be imported. So always remember that there must be no other CSS rules above the @import rule.
Go activate your new child theme!
Once you have completed the previous 3 steps, you end up having created a valid child theme, so let´s activate it. Go to “Appearance – Themes” on your site´s admin area and you will see your brand new child theme as one of the available themes to choose from:
You´ll notice that there is no preview image for the child theme. It doesn´t mean it is a blank theme (it is not, unless you forgot to add the @import rule), it just means that there isn´t any screenshot image available for that theme.
Now go ahead, select and activate your child theme. I´ve already activated my new child, and added a nice picture for the header. Here it is:
By now my child theme looks exactly like its parent Twenty Twelve, but is a new and separate theme. I could start tweaking it as much as I want and, if at any future moment I update the Twenty Twelve theme, I will not lose any of the modifications I made or the functions or templates I added, because all those things will belong to my child theme only and will be in its own folder, not in the parent´s folder where the update will take effect.
That was easy, wasn´t it? I told you.
Now, let´s see the even easier way to create a child theme that I mentioned before:
The easier way: One-Click Child Theme
When I first started writing this post I suddenly realized that some people might find parts of the process either scary or out of their reach, while I was insisting on how easy it is to create a child theme.
Right away the creative part of my brain began flashing with an idea: Why don´t I make a plugin to automatically create a child theme?
Well, as usually happens in this our WordPress world, somebody had that very same idea before me. I checked the WordPress Plugin Directory and, sure enough, there it was. The plugin is called One-Click Child Theme, by Terry Chay.
Once you install and activate this plugin, a new “Child Theme” element will be visible on your “Appearance” menu:
The plugin is very easy to use. First you have to activate the theme you want to use as parent. Then simply fill out the name you want to use for your child theme, write a short description and your name, and you´re ready to go by clicking the “Create Child” button.
The plugin will automatically create a folder for your child theme based on the name you gave it, and a basic style.css file with a short information header and the needed @import rule already included in it. It will even automatically activate your new child theme.
The plugin also puts a copy of the parent´s screenshot image into the child theme folder, so when you select the “Themes” option of your “Appearance” you are going to see this:
I don´t think it is a good idea that about the screenshot, though. Since you are creating a child theme with the intention of tweaking the original theme, the screenshot of your child theme should look different from the parent´s screenshot. But of course, you´ll need to add the modifications to your new theme before you can make a different screenshot of it.
You can view the content of the newly created stylesheet directly from your WordPress admin area, through the “Editor” option of the “Appearance” menu:
You can now use the editor to add your own CSS rules. Just remember to place them after the @import rule. Click the “Update File ” button when you are done and go see your changes working. By using this editor you´ll avoid having to upload your style.css file to your server via FTP.
For example, I have modified my child theme just a little bit. I changed the blog title to a larger font size, made it normal instead of bold and changed its color to a navy blue. Then I used a light blue color for the navigation menu, adding also a little padding to it, and finally I also used a bluish color for the widget area background, where I had to add some padding too to make it look nicer. So this is how my stylesheet looks like:
So finally, this is how my Tutorial Test Site looks like after those changes (not a great design at all, but illustrative enough for the purpose of this post):
What do you think? That was even easier, wasn´t it? I promised you.
Conclusion
We have just seen how easy it is to create a WordPress child theme, and also that there is an even easier method. In many places you´ll find that all the tools you need to create a child theme are an FTP client (like Filezilla) and a text editor (like Notepad++). But if you don´t even want to mess up with those things, you´ve learned now that all you´ll need is just your WordPress and a plugin!
How about you? Have this post make you want to try and create your first child theme immediately? If so, what method would you choose?
Please let me know about your feelings and your progress through the comments!
Picture used for header of Tutorial Test Site courtesy of a great photographer, my brother Tete Alejandre
- Brave Browser – Will the new player be able to change the game rules? - 31 May, 2019
- All Top Ten WordPress themes are premium now - 18 December, 2017
- Child Theme Detection Just Got Better - 17 January, 2017
You write about “eworries it might be complicated … and, how easy it is using the one-click .. plugin – but!
There are 2 main questions that i can’t et grasp but need to before i start with this child theme learning curve operation: (starting with the fact that the one-click .. plugin gives me a “not tested with my latest version of WP..”, so i am not going to use that).
1. while creating the new child themes css file is straight forward (and reminds me a lot of a “custom css” plugin, why not simply use such a plugin instead?) and should pose no trouble, what about the core php files??
Do i simply copy the complete php file over from the main theme file to the child theme file and than start hacking (editing) the file (like footer.php or index, php etc.) or do i first need to become totally PHP savvy and take each files code apart and just use the sections i want to hack / change in the child theme??
Hi Rudolf
There is also another plugin that you can use to create a child theme: Child Themify. I talked about it on this post. That plugin was released after WordPress 3.5 and I´m pretty sure it´ll work well with WordPress 3.5.1 too.
About the custom CSS, maybe that´s all you´ll probably need for one particular site, just adding some CSS rules. But the scope of a child theme goes much further than that. Since you may not know in advance how much customization you´ll end up needing when you start tweaking a theme, I find it a good practise to always make use of a child theme, even when you´re only planning to just do some minor CSS changes. That way, if later on you feel like your theme needs deeper customization, you will have an appropriate “framework” to do it easily and safely.
As for the other question, if for example you want to customize your footer.php template file, copy that file from your parent theme, paste it in your child theme folder and do the changes on that new one. It will override the parent footer.php while you keep the original one. Please note that you won´t need to copy every php file to your child theme, just the ones which you want to modify.
If what you need is to add a new function instead of changing a template file, create an empty functions.php in your child theme folder and then add the new functions in that file. In this case, your child theme´s functions.php will not override the parent´s functions.php, but the new functions will be added instead. Cool, isn´t it?
I hope this answers your questions. If not, please feel free to reformulate whatever question I didn´t get right.
Thanks Luis,
indeed, my main worry was the uncertainty whether i have to take the php files apart and just use tid bits in the theme files -apparently NOT, so this shouldn’t be the most difficult task ever for me.
I read some negative side effects of child themes, like slower loading times especially because of the increased cluster of scripts, but, i think i have to call myself a “front end designer” and have been in the footer, header, index PHP files, so i’ll just have to transfer them over as they are to the child theme.
Do mostly not understand the functions.php stuff, probably a number to deep into scripting for me so will leave that rather untouched.
The other question i ask myself about child themes is what happens after main theme updates.
Say the main theme gets various new features and improvements added in, exactly in such files as index or single page or header, can’t these new segments cause conflicts with the scripts in the child theme (since the browser obviously has to make selections on what to use from which file s and what not or both files have the same command line but one has added stuff the other does not have etc.??
If you haven´t found a need for a new function to be included in your functions.php file, it means you don´t have to care about that file at all, you just don´t need to. But don´t feel afraid of it, you may need to add new functions in the future. I guess a post about “adding new functions to your child theme” with some example function is due on my blog at this stage, so we´ll take care of that soon.
About the updates, as I said in my previous reply, your child theme templates will override their parent theme´s counterparts, so there will never be any such conflict after a parent theme update. The only possible problem you might find is this: if the update comes with a new feature which you find interesting, you may need to copy that part of code to your child theme in order to make it available to it.
For example, if you modified footer.php and the updated parent theme comes with a new widgetized footer you would like to have now, that will not be available for your child theme since the new parent theme´s footer.php will be overriden by your child´s footer.php. In that case, depending of the amount of code lines that you changed and that were changed in the parent theme, you can either copy the new lines to your footer.php or else, copy the entire new footer.php to your child theme folder and make the same changes you made to it before the update.
I hope this helped to answer your questions.
Well I’m going to dive in to child themes here very soon and your post is a good start. Take a look at cheerupemokid.com…… Isn’t it a great theme? Since he made a custom theme, I want to emulate his theme layout. I don’t want his graphics, just his layout. I’m thinking of using the galaxy theme as my starting point. I looked at paying someone to recreate this theme for me, but they all want way too much $$. I’m not an expert at coding, so wish me luck.
That site you mentioned reminds me a bit of the OnTheGo theme by Elegant Themes. Check it out to see if it fits your needs. It also uses handmade graphics for the layouts. You could tweak it by means of a child theme and change the illustrations using your own graphics to accomplish what you´re looking for.
Hi Luis, I created a child theme as per your instructions but using “Child Temify” (very easy) 😉 My issue is: I use a theme called “Modest” by Elegant Themes. I have missed several updates due to the fact I have made many changes to the original theme and never documented my changes. Its now time to upgrade. After creating the child theme all works well BUT the procedure for updating the ET theme means deleting the original and uploading the new version which I did (just renamed old version rather than deleting). Now my child theme does not work and activating the new updated theme has lost most of my formatting. Can you help please?
If you saved your modified theme by renaming it, you´re safe.
However, none of your customizations will be available in your updated Modest theme (which is now your parent theme), nor in your new child theme.
The only thing you can do now to recover all your tweaks (supposing they only affect CSS) is this: Copy the content of your old style.css file and paste in your child theme´s style.css file, below the import rule line. Now the process will be quite boring but it will be worth it in the end: open the stylesheet of your parent theme (the updated Modest theme) and, by comparing it with your child theme´s stylesheet line by line, try to identify what lines you had tweaked so far; keep those lines in your child´s style.css and remove the rest of the lines.
That way it will work as if you had created a child theme from the beginning (which is what you should have done instead of directly modifying Modest), and you will be able to update your parent theme as many times as you want in the future without worries about losing your modifications.
In case you also made php changes (for instance modifications to template files), you´ll need to copy your modified files from your old theme to your new child theme (beware to place them inside the right folders in these case).
I hope this helped you. Let me know about your progress.
Thank you so much for your help. I will do as you suggested and get back to you at some stage (maybe a while).
Thanks for this, I tried the plugin, (why bother doing it manually) I had already made some mods to my site before making the child. So a useful addition to the plugin would be for it to ask you if you want to copy existing css file. But ultimately it’s my fault for not making the child first. Ta
Luis,
I did what you said in the details above and I am getting this error:
Warning: require_once(/home/content/25/10837825/html/wp-content/themes/kingsize-child theme/admin/index.php) [function.require-once]: failed to open stream: No such file or directory in /home/content/25/10837825/html/wp-content/themes/kingsize/functions.php on line 193
Fatal error: require_once() [function.require]: Failed opening required ‘/home/content/25/10837825/html/wp-content/themes/kingsize-child theme/admin/index.php’ (include_path=’.:/usr/local/php5_3/lib/php’) in /home/content/25/10837825/html/wp-content/themes/kingsize/functions.php on line 193
My whole wordpress site (anytime I click on anything in the dashboard) goes to this page. Can you offer any suggestions or help?
Thanks,
JC
I´m sorry to know that you had problems, JC.
When I read “the details above” I´m assuming that you´ve used the One-Click Child Theme plugin. Am I right?
It looks like your theme is not correctly coded to support child themes. In such cases problems may appear as I said in the warning box right before the conclusions of my post. Please check the link I included over there: http://wordpress.org/support/topic/plugin-one-click-child-theme-weird-errors-after-creating-child.
Initially, I tried to add the child theme based on your instructions at the top of the post and that is when I received the above error. After I restored the site to the KingSize theme, I then tried the child-themify plug in and then I received the same error. It appears there is a PHP issue, I’m just not 100% where or how to fix it.
Just curious, but based on your reply, if my theme does have issues with the child theme, what should I do? Not create or use a child with this theme
?
I guess the problem might be caused by your parent theme using the get_stylesheet_directory() function instead of the get_template_directory() function, so that WordPress is trying to use a required file that is in your parent theme folder but that is being called as if it were in your child theme folder. Check the functions.php included in your theme (specially that line 193 referenced in your error message) to see if it has anything to do with this. If that is the case, modifying it in your parent theme should make it suitable to support child themes.
In any case, if the theme you´re using as parent is a premium theme, I would suggest to contact the theme provider or author for support in the first place.
Luis,
Thanks for the suggestions and the help. I appreciate it.
JC
YOU ARE THE BEST!
Thanks for this. I was almost bald due to pulling out my hair, trying to figure out how to create a child theme!
As an inexperienced user and total non-techhie, I tried really hard to work with the back-end, but to no avail.
This made it so much easier 🙂
I have been so nervous about adding a child theme, but after following your instructions,(I click child theme) I was able to creat a child theme in minutes. You are a Star. Thank you so much
I used Child Themify, I appreciate your information so much! I followed it to the tee.. Even placed a new snapshot in the “child” theme’s folder all worked fine, until I tried to use it.. I am using an older version of Magazine Basic and not wanting to upgrade to his latest because I will have to totally re-design all the changes I had made in the past. I activated the new “Child” theme and all basically looked ALMOST right except the Header Banner was not there and the fonts I had changed were not there, so I returned to the master Theme and went to view the site and all was ok. (Whew!) But when I went to see the Header choices to check on the banner set up I got this message: “You do not have sufficient permissions to access this page.”
***I am the original administrator for the site and was logged in when getting this message “You do not have sufficient permissions to access this page.”
Understand I only returned to the original Magazine Basic Theme, then I found out that the same message shows up anywhere I want to go within the Magazine Basic Settings. I had just upgraded my WordPress back-end to the most recent as well, and wondered if that has something to do with how the “Customize” or “Settings” work. So I am still wondering how to proceed.
(BTW I did try placing all the css code in the local new “Child” style sheet as well and tried that and still have missing styles. (not including the old header info just leaving my newest info in there before the css code settings). Most of the problems show up are settings which were previously chosen through the Customize setting functions that came with the original Magazine Basic).
The new Magazine Basic is great but I have to go through all the choices and then change out the css as well, takes way too long to go and upgrade all of my clients sites and re-style them as well!
I guess the plugin won’t work as well when the original Theme is not upgraded and if it had a lot of customizable options built in. I think the upgraded WP back-end had something to do with this problem as well. Any input and suggestions are welcomed. I have more than 7 sites with this problem. Thank you for your tutorial.
I´m sorry you ran into that trouble, but don´t blame the plugin for it. I´m sure that the same things would have happened to you if you manually created a child theme. Child Themify just helps you create the child theme.
I wasn´t familiar with Magazine Basic, so I couldn´t answer you before. Now I´ve installed that theme on a test site and created a child theme based on it, but everything worked ok. I tried to reproduce your problems somehow, so before creating the child I set up a header image for the original theme. When I activated the child theme, that header image wasn´t there (because it was an option I set for Magazine Basic, and the child uses the parent as if it was a fresh installation with the options still unset) but anyway I didn´t have any problems to set that same image for the child.
I guess your problems have to do with some incompatibility issue since you have not updated your theme, but I can´t be sure about it since I wasn´t able to reproduce those problems.
Anyway, your settings should be registered in your database. For example, in my case the wp_options table has some rows related to Magazine Basic and its child theme with such values for the option_name column as “theme_mods_magazine-basic”, “mb_theme_options” or “theme_mods_magazine-basic-child”. I hope this can be of any help.
I know it is too late for you now, but a couple of things should always be considered:
– Always use a child theme to make modifications, create the child before the first mod.
– Always backup your site before doing some changes to it
Thank you so much! Yes I think that is the problem — back when the site was first created — to my knowledge there was no such info about creating a Child Theme…. Now of course I do what you suggest. and I always backup! This plugin helped out a lot on some of my other sites! Thank you!
Always glad to help.
Now that you are using child themes on some sites, you´ll see the advantages of it. And you will never be worried again about updating!
Hi, thanks for this. Where can I find the parent style.css file? I think it’s kind of messy at present, though I’d love to know where it “lives” so once I create this child and import the parent’s style.css, I can one day clean this file up. Thanks again.
Hi Jennifer,
The parent style.css “lives” inside the folder of your parent theme. So, if for instance you are using Twenty Twelve as the parent for your child theme, the parent theme´s stylesheet is the style.css file you will find in “/wp-content/themes/twentytwelve”, right at that level (its url would be something like “http://www.yourdomain.com/wp-content/themes/twentytwelve/style.css”).
Now, I don´t know if I´m getting right what you mentioned about “cleaning up” the parent´s stylesheet. If you mean deleting that file, don´t you ever do it! Otherwise it could never be imported and your theme wouldn´t work. If you mean tweaking it, you don´t need to do that either (that is what your child theme´s style.css is for). In fact, you should never touch the parent´s style.css. Just leave it there and work on your child theme´s style.css.
I hope this helped to clarify some ideas. I´m sorry if I didn´t make it clear enough on my post .
Hi Luis
I am a newbie with no programming knowledge. Is creating and customizing a child theme needs this knowledge? Normally before creating a child theme, I need to have a selected theme (free or paid) that I want, that is a parent theme. So in future for updating, I only have to update the parent theme as for the child theme, it will remain the same, is it correct?
Thanks.
Wendy
Hi Wendy,
Yes, first select the theme you will use as parent, then create your child theme. Any changes you want to make from now on should be made on the child theme, without touching the parent theme. That way, whenever you update the parent theme your modifications will still be there since they will be in the child theme.
Hi Luis,
Thank you for your reply.
I am able to create child theme at last. However, creating website is really a bid deal to me as I totally do not know where to go for the next step. May I know the Theme URI is the same as Author URI in style.css file?
Have you use “one click child theme plugin” before? I have searched around and noticed that this plugin sometimes give users problem during activating. So I’m thinking whether to give it a try. The problem is, I have already created and activated my child theme, so is it still available to use this plugin?
Thanks
Wendy
Hi again Wendy,
You don´t have to necessarily fill the Theme URI and the Author URI lines in the style.css file. In fact there is another plugin, Child Themify, which doesn´t even add those lines to the child theme stylesheet.
Please read also my post A new plugin for WordPress child theme creation.
As for your last question, you can create as many child themes as you like for the same parent theme (just give them different names) since you can have only one of them activated at a time, so there won´t be any conflict at all.
Hi Luis,
Thank you so much for your great advise.
Hi Luis,
your advise is great, I managed to create the child theme for twenty twelfe. However, when I made the changes to the child, they didn’t show up in the site. Could you please let me know where I went wrong? Please talk to me like I’m a 5 year old because I have no idea about programming and such. I’m in marketing so doing this is already a big deal for me:)
so what I wanted to achieve: delete the subheading under each menu item in my new blog as it was the repetition of the menu name itself.
this is what I did:
– created child theme for twenty twelfe (didn’t yet activate it)
– went into the twenty twelve theme (the original theme), went to the editor mode and crtl+c-d the content page.php
– activated child theme, went into editor mode
– copied the whole content page.php stuff from the original theme into the child version below this: @import url(“../twentytwelve/style.css”);
– deleted this line:
– updated the theme
aaaaaaaand nothing changed…:( Can you please help???
Thanks so much!
Genna.
Hi Genna,
It will never work that way. If I understood you right, you are trying to include a PHP script in a CSS file, and they are different languages.
If you want to modify any .php template what you should do is copy the entire .php file from the parent theme folder, creating a new one inside your child theme folder with the very same name (and of course with the same .php extension), and then make whatever changes you want by editing that new file. WordPress will load and use the modified .php template file from your child theme, instead of the original one from the parent.
I hope this helped.
Hi Luis,
thank you for your reply! Yes, that’s what I did actually. I finally figured it out, after so many hours of trial and error. 🙂
Hi, is it possible to use the ‘easier’ road for a wordpress.com simple blog? Thanks!
Hi Emiko
I´m afraid you can´t, the reason being that on those blogs you´re not allowed to install plugins. At least it used to be that way, I´m not too familiar with current wordpress.com terms since I only use self-hosted sites.
Ok, thanks a lot for your prompt reply!
self-hosted WordPress gives you so much control over the things if you are just starting out free WordPress is good for learning but once you move ahead in serious direction you should consider WordPress self-hosted
I just want to say thank you for this article. I was about to throw my computer out the window trying to figure out ftp before reading this. It was by far the best explanation I’ve been able to find. You were a very big help!!
Thank you Ashley for your kind words. But please never throw your computer out the window if you´re not able to figure something out. It might fall over someone´s head! 😉
Haha, agreed.
Thank You Good Article ♥
Luis,
Thank you, this info was helpful as the creation of Child Themes has been hurdle I wish to get beyond.
Curious, after creating the Child Theme, why would it not make sense to copy>paste all the content (rules) under the @import url…from Parent Theme’s style.css into new Child Theme’s style.css, so as to identically mirror the Parent Theme’s style.css and edit/customize off of that since it already has the stylesheet rules hierarchy(outline) in place?
This seems more user friendly for someone who is not very familiar with css and creating new rules and how to apply them to a given theme.
Thank you,
Chris
Hi Chris,
To preserve that user friendliness you´re talking about, you can copy from the parent stylesheet just the rules you want to modify with the very same indentation they already have in the original style.css.
But if you copied everything from the parent style.css, you would get the following situations:
a) The @import rule would not make any sense at all, since it is there to load the css rules from the parent stylesheet for you
b) The rules you modified for the child theme would be cluttered amid the rest, which is much less user friendly that being able to see at a glance just what you have changed or added
c) What would you do when updating your parent theme? would you copy everything again and then go manually modifying or adding your specific child theme rules?
thanks luis for the insight. this tells me i need to become more fluent in css. thank you.
Luis,
Thank you for your tutorial. 🙂
I have read other tutorials on child themes; often, the writers seem to assume the reader inherently ‘knows’ certain things. As a result, certain steps do not get explained, or explained enough.
I had actually gone the notepad/css route, and had most of what One-Click Child Theme produces.- but the ‘@’ part of the code wasn’t correct and in the wrong place.
I also believed I had to import the parent theme’s folder contents into the child’s (Why? So the child theme’s style.css to ‘over-write’ the parent theme’s style.css).
The author probably meant to say the child css would OVERRIDE the parent’s css. That would make sense. But when I read over-write, I thought the parent files needed to be in the folder (to over-write, of course)!
Needless to say, the resultant child theme looked really odd when activated! Live and learn 🙂
Have a great day!
Cheryl
Hi
My child theme does not look exactly the same as the parent theme twentythirteen?
Menus are different and header pic is different?
Please help
Warren
Hi Warren,
Don´t worry, there´s nothing wrong with your child theme. Since it is a fresh installation (of a child theme, but of a new theme in any case), you´ll need to configure your menu and to choose your header image. Just activate your parent theme back and take note of how you have your menu configured and what is your header picture, then activate your child theme again and configure both things as you had them for the parent theme.
I hope this helped you.
Great article Luis. A few years back I would edit themes without creating a child theme (big mistake) I was new to WordPress and had to start customizing from scratch.
The moral of this story to anyone that reads this. Get a child theme in place before you edit anything!
Yes, like I said on the post: I don´t know why at the beginner level child themes are surrounded by that mystery halo. You now know how easy it is to create a child theme. And the benefits are great!
In my particular case, every time I set up a new WorpPress site I create a child theme. Even If I don´t plan to customize the theme I´m using! Just in case. It is very easy to do, so I just consider it one of the tasks needed to create a new site. That way if I decide that I want to modify anything later on, I´ll go ahead and do it over the child theme that is already there waiting for me.
Luis —
Your tutorial was the only tutorial on child themes that answered all my questions. Your step-by-step approach is just what I needed to take me through the process.
Thank you!
Thank you for your kind words, John.
I´m very glad this tutorial was helpful to you.
very good tutorial to make a new child theme step by step and very helpful for me. Thanx Luis Alejandre
Hey- I stumbled upon your post here and have a question for you. I am using a new theme (hostmarks) and this method of using @import to create a child theme does not work because the styles are “enqueued.” It appears there is a way to add a function with wp_enqueue_style and I’ve messed around with it but with no success yet. Some folks seem to suggest this is a better method than using @import. Just wondering if you know anything about this and what you think. Cheers.
Hi J.,
You´re right, there´s quite a discussion going on on this topic. Both methods work, but I still prefer the @import method, as it is easier to deal with and IMHO more straightforward. I second the opinions of Esmi and Chip Bennett on this thread..
If you have trouble with your parent theme enqueueing styles, you may find the solution you´re looking for in this link.
I have a question (I’m sorry if it has already been answered and I missed it!)
If I want to make changes in functions o header files… how do I have that implemented in a child theme? THanks!!
Hi Heather,
If you want to modify, say, the header.php file, just copy the parent´s header.php and place it (with the same name) in your child theme´s root folder, then change what you need on that child version of header.php.
You may like to read other posts of our Our Child Themes Tutorial Series.
Hello,
Awesome article, i had a client open a ticket on this issue and this solved my problem and his .
I also love the new design you have put up recently 😉
excellent tutor. i just wasted money paying someone to create a child theme for me. i wished i read this post before that
Hello Luis,
Thank you for sharing this plug-in. It is really useful as I wasn’t able to create a child theme on my own.
Unfortunately I’m stuck again, as I don’t know how to add an image folder to the child theme…
I want to change the background image from the original theme and I have no clue where to put the new image and how to “activate” it.
Is this option inextistent with this plugin or is there a way to create folders in the child theme, and I’m just not grasping it?
Thank you for the kind attention
This plugin just creates a child theme in its simplest way, so there is no option to create folders.
A theme (or a child theme in this case) gets better organized when there are different folders used for different kinds of files, but that is not mandatory anyway. What I mean is that there is no reason why you could not put your new background image directly inside your child theme folder, instead of inside a subfolder of it.
Creating a theme with a plugin? if anyone had told me about this, i would have argued that it’s not worth a pinch of salt, but here’s a picture with proof. Thanks for this, maybe it’s time i create a child theme, upload it on wordpress and get some visitors from people installing the themes. thanks
I’ve “inherited” a wordpress-driven site, with customised theme, which I am further altering for a client. I created a child theme based on your instructions and similar instructions on other sites. The first confusing thing for me was that the current theme has a “style.css” file in the theme’s folder, and another file with the same name in the theme’s css folder, both of which load. It is the first one I needed to replicate and upload to correctly create a child theme. The second one will also be copied and changed as needed, since that is where many of the styles I actually need to alter live. So far so good. When I previewed my new child theme, however, I got a number of additional menu items in the main navigation area.
In addition to following your instructions, I needed to check the few options shown in the left-hand-side panel when using the live-preview feature, before activating my child theme. I needed to choose the already existing, custom main menu from the drop-down list, instead of leaving this field blank. The unwanted menu items disappeared when I did this.
Perhaps the additional menu items may have been automatically included from a wordpress default menu. It is interesting that the wordpress instructions on the main admin area tell me “your theme only allows one menu” when leaving the field blank meant I effectively got both, but I don’t mind just now as long as it works. I can now continue to add new styles to certain content areas on the client’s site, and keep it separate from other people’s work.
It’s true as you say there are lots of instructions like page this elsewhere on the web, but you have a particularly good way of communicating and inspiring confidence, so keep up the good work. Thanks 🙂
thank you very much for your very easy to follow guide to creating a child theme. Worked first time so takes away the stress of installing updates to themes.
You are welcome, Lisa.
I keep seeing articles like this that just start out with saving a file in wp-content/themes and yet, I am such a beginner that I don’t even know where the heck to find that! Please direct me to basic instructions (video would help me greatly if you have it!)
But Hilary, that´s exactly why I provided the “easier” way on this post. If you use a child theme creation plugin you won´t need to go through all that hassle, and now there are several to choose from. You can find more information in our Child Theme Tutorial Series.
This site is very helpful for me because from this site i track many plugins which i was required.Really amazing site and here is one of my contributionthrough this site in wordpress development:
http://www.themesrefinery.com/
I have tried every tutorial available to try and create a child page for my twentyfourteen theme. None of the advice-tips on any worked and I still don’t know what the problem was. Huge frustration and anxiety. Your plugin did it in one click as promised- a million thank you’s
Gracias, Luis, for this tutorial.
I was hesitant to do a child theme, mainly because I didn’t understand it. But after much searching, I found this tutorial and, as you said, it was very easy. I saw your plugin for Divi, and have seen others, but I hate adding plugins for stuff that I should be able to do (even when I don’t know how). Part of it is putting the “puzzle” together.
Just to let you know, I found your site (and your divi children plugin) from one of your support responses on elegant themes.
Thanks again.
You are welcome, Sean
I´m glad you managed to create your child theme by yourself. But please do not hate using plugins, it all depends on what you want to do.
For instance, take my Divi Children plugin you´ve mentioned: If you read my post about its future features, you will realize that the plugin will do a lot of things for you to help you customize your site through your child theme. Besides, these kind of plugins have one advantage: You can deactivate them (or even delete them) after they did their job.
Can separate background images be added to child pages? I am using Twenty Fourteen. By the way, great article. I really did not want to go this far into coding. My mission was to get a single landing page with a background image and a form that redirects.
First of all I would like to say that your blog is very informative.
My query is that I am working on a project and i need to customize the look of an existing wordpress website which is currently live. What will be the procedure to that is the child theme is helpful for doing this? I have a PSD for the existing file and I need to made the changes in the website exactly like the PSD file. Please, help me about this. Waiting for your response and guidance. Thanks
Thanks for your guideline.
This site is very helpful for me because from this site i track many plugins which i was required.Really amazing site and here is one of my contributionthrough this site in wordpress development:
I keep seeing articles like this that just start out with saving a file in wp-content/themes and yet, I am such a beginner that I don’t even know where the heck to find that! Please direct me to basic instructions (video would help me greatly if you have it!)
We run child themes on our site as well and i love it. we use genesis as the framework and it works great
thanks for sharing
really helpful to edit child theme
I created a WordPress website several years ago without using a child theme. I am unsure of which files were modified. Is there any way to systematically go through the main files that could have been modified? I want to update to the newest version of my theme, but dread the thought of totally messing up current site which has been running great for several years.
Hi, Kim.
Maybe comparing files with a tool such as WinDiff will be of help.
Thanks for replying. I will check out Windiff.
Nice tuts dude.. i am using genesis framework and i really love to play with it…i like editing themes and this guide will help me thanks Luis Alejandre.. …
regards,
suresh
@Luis,
Thanks for sharing such great useful info. with us,
I think creating a child theme is very important skill to know as it will save you a lot of money buying themes, if you can build and edit child-themes you can do any thing with a great framework like genesis. And you will not have to buy a new theme or pay for technical support.
Looks easy, the issue is that I do not see the menus that you describe (Appearance>manage theme / install theme…) but Appearance>theme (only). How do you get there?
i am newbie and after reading your post, first i used child theme and its very easy to install & use
Great post. It helped me make my first child theme back then. And this is an excellent blog with lots of useful content.
I understand that since the date of your article, using the @import rule is no longer considered best practice as it can impact on site loading speed. When I do a site speed test, I get a message to fix this.
Instead it is recommended to link to the style sheet as a relative URL. Can you give any guidance or point me to another source on how best to change from using the @import rule to using a relative link to the style.css on an existing child theme.
Much appreciated. ~Jude
Hi, Jude, and thank you for your kind words.
You´re absolutely right, and it is my fault not to have updated this. Actually it has been a lot of time since I´m not using the @import rule for child themes as it is no longer considered best practice as you said, but I failed to post about it and to update my existing posts as I meant to do some time ago. I promise I´ll do it in a few days.
The tips and tricks you share are easy to understand. I have tried some of them to modify some parts of my blog.
Whis there will be progressive post discussing how to develop child theme for genesis framework. I think I need to try this one. Thanks
Nicely explained post to create a child theme. Let me give it a try. Thank you
Thanks Luis ,for this good tutorial over wordpress child themes i really wanted to get knowledge about the wordpress child themes as i am a new to wordpress and learning things slowly now with this i have got the good idea about how to create child themes and what are they
Thanks a lot. I recently started learning about WordPress child themes creation. Earlier, I was a little bit skeptical about it but now I have already got basic idea about Child Themes creation and it’s not that much complex.
thanks for the tips and step by step very complete
Ther is any visual editor for child themes? I have on my own and I wiant to start editing.
well i try to edit child theme, but at the end theme is not working on mobile.
I have using child theme for quite a long time. It is simply amazing.
Hi Luis,
Great article, and while I knew most of these tips there are a still a few I didn’t know about. One thing I see on some new (and maybe even older) WordPress site is people don’t disable/remove the meta admin widget from their sidebar. No reader/viewer/client/customer, etc needs to see a link for you to log into your WordPress dashboard when they got to your site. That tab is completely useless (just go to yoursite.com/wp-admin) and should be removed as soon as your site is active.
well i try to edit child theme, but at the end theme is not working on mobile
wow you have been completed this tutorial step by step clearly thanks
Hi, Thanks for sharing information about child theme.
many site i am using child theme
I’m looking for a perfect tutorial about child themes. It’s a perfect post for me. Thanks