For most of us with WordPress websites we like to tweak a little bit of everything to make it look just so, and the beauty of WordPress is that you are able to do this. BUT, if you’re simply modifying the files that come with the theme then every time you do an upgrade you have to re-apply the changes that you have made.
Ever lame!
A super easy solution to make sure that your theme customizations aren’t overwritten is to create a child theme.
I know, I know, you’re not a developer and you don’t want to have to create a whole new theme all by yourself, right? Not to worry my friend, it’s far more simple than you’re imagining. A child theme basically borrows the files from your regular theme and acts as a holder for your customizations, so you’re not re-creating everything from scratch after all.
Here’s how you create a child theme to go along with whatever WordPress theme you’re currently using:
1. Using FTP, navigate to your themes folder and create a new folder. You can call it whatever you want.
2. Create a text file called style.css and put it in this new folder.
3. Add this header info into the css file:
/*
Theme Name: whatever name you want your child theme to have eg. SMac’s Child Theme
Description: whatever description you want here
Author: your name
Version: 1.0
Template: twentyten (or whatever the name of the theme is that you’re currently using)
*/
The Template field is particularly important, make sure to type the name of the theme folder exactly as you see it in the themes folder, it’s case sensitive. In the example above I’ve used twentyten as my main theme. The Description, Author, and Version fields are all optional.
4. Add this nifty line into your css file (after the header info) to import the css info from your main theme:
@import url(“url of the main theme css file”);
Now all you have to do is add any css changes you want to this new css file in your new theme folder and anything you put here will override the main theme’s css.
5. If you want to make changes to any other theme files, eg. Loop.php, Functions.php, you can put them here too and again, anything that is here will override the main theme files. This step isn’t necessary, the only file that a child theme absolutely must have is style.css.
6. Activate your new child theme – if all is ready you can log into your wp-admin as usual, go to the Appearance section and you’ll see your new child theme sitting there ready to be activated. Go ahead and activate your child theme and voila!
All done! Super simple really, if you know a bit of coding, and let’s be honest, you probably wouldn’t be fiddling around with the guts of your WordPress installation files unless you already know a bit of coding, right?
Now you’re all set to do your next upgrade, and joy of joys, all of your customizations will still be there when you’re done! Yay!
Thank you very much for your nice information.
I am not experienced “programmer” so your procedure have cleared to me the “Child Theme” question.
But excuse me, I have some (maybe not very clever) questions:
1. After line “…@import url(“url of the main theme css file”);…” in my new created style.css file must I put all CHANGED by me “main” style.css file?
2. “URL of the main theme css file” looks like this …public_html/seminar/wp-content/themes/twentyten/style.css ?
3. If I make changes in another files of original theme. i.e. functions.php, must I create the same functions.php file in my new Child theme and put:
– /*
Theme Name: whatever name you want your child theme to have eg. SMac’s Child Theme
Description: whatever description you want here
Author: your name
Version: 1.0
Template: twentyten (or whatever the name of the theme is that you’re currently using)
*/
– later this line
@import url(“url of the main theme functions.php file”);
where URL is …public_html/seminar/wp-content/themes/twentyten/functions.php ?
and so on… with any file, enev if I am changing font, image, color, …?
Thank you for your attention.
Best regards,
Valeri
Hi Valeri,
I’ll answer your questions as best as I can:
1. Yes, any new formatting that you want to use should be added to this new style.css file, leave the original one that came with your main theme as it is so that your changes don’t get lost when you upgrade.
2. Yep, that url looks like it would be correct, it should be the full url of wherever your original css file resides. For example, here is the URL that I’m using in my new css file: http://www.totherescue.ca/wp-content/themes/twentyten/style.css
3. If you want to add new functions yes you should create a new functions.php file in your new child theme, but no it does not need the whole header and @import url line again. Just add your new functions here, and if you want to modify a function that already exists in the main theme file just copy it to this new file and make your modifications here. Whatever you put in your child theme files will override those in the original theme files.
The most important rule to stick to is to never make additions or modifications to the original theme files or your changes will be lost whenever you upgrade. If you need to add something or modify something, do it in the files in your child theme instead.
Hope that helps!
Okay, I am feeling really stupid here. #4 above (add this nifty line into your css file), you include the following: @import url(“url of the main theme css file”);
Here is where the “stupid” comes in = } Where it currently states (“url of the main theme css file”); am I supposed to change that out and put in the http:// followed by my website name?
Thank you for your patience = )
Yes indeed Dee, you would put something like: “http://yourdomainhere.com/wp-content/themes/twentyten/style.css”