Making a basic child theme is a lot easier than you think. But why would you need your own child theme?
If you have made any design changes using CSS code or created functions in your themes functions.php file then you may want to save this work in a separate folder.
If you don’t save your custom changes then they will be lost when you update your theme!
This is called a child theme and over rides your parent theme which could be Thesis, Canvas, Twenty Eleven or any other parent theme.
Child Theme Example
This child theme will only work if you have the Twenty Eleven parent theme installed. If you are using another theme, you need to modify the style.css in this child theme to import your parent themes file.
Download Twenty Eleven Child Theme
What is a Child Theme
A child theme is a folder (directory) with a css file in it which you create from notepad and name it style.css
The contents of the style.css file will include the custom CSS code you have added to make changes to your original parent themes styling. Plus a few lines which all child themes include. Here’s how to do it:
1) Login to cPanel
2) Using File Manager, navigate to wp-c0ntent/themes which is where your current parent theme is located
3) Click on New Folder and name the folder the same as your parent theme but also include – child at the end
Example: thesis-child or twentyeleven-child. I’ve named mine canvas-child
4) Create a new file using notepad and name it style
5) Add this information to the top of the file
/* Theme Name: parenttheme-child Author: Your name here Template: parenttheme Version: 0.1.0 */
The 2 most important and compulsory details are:
- Theme Name – The name you have given your child theme i.e canvas-child or twentyeleven-child
- Template – Directory name of your parent theme (case sensitive) i.e canvas or twentyeleven or thesis
6) Add this line of code as well below the above detail
@import url("../twentyeleven/style.css");
Make sure you name the blue part the same as your parent theme i.e twentyeleven or canvas or thesis (Not the name of your child-theme).
This will import your parent themes style.css file
You can now add any custom CSS code changes you want to make into your child themes style.css file rather than use your parent themes style.css or custom.css file.
Tip: A great way to customize your site is to copy and paste code from your parent themes style.css file into your new child themes style.css file and make custom changes to it there.
7) Now go to Appearance > Themes and activate your new child theme. It will only work if the parent theme is currently activated.
You can also create a functions.php file and add all your custom php code as well. Make sure you start the functions.php file with
<?php Insert Your Custom Php Code Between These Tags ?> These are the opening and closing php tags.
Whenever you update your parent theme, all your CSS changes will not be overwritten as they are in your new child theme directory which you have just created.
You could also add a screen shot 300 x 250 and simply name it screenshot. Import the screen shot into the child theme folder and it will show up in the backend of your WordPress admin panel like your parent theme’s image does.
Here’s what the inside of your child theme directory will look like. Pretty simple but a great start to making your own theme.
Brad Dalton
@wpsitesdotnet
Latest posts by Brad Dalton (see all)
- Remove Comments From Specific Posts and Different Categories - May 24, 2013
- Add Multiple Sliders In Header On Different Pages - May 23, 2013
- How To Make Your Nav Menu Sticky - May 21, 2013
test
Thanks for this post! Just loaded my first child theme. Now to customize!
Smart move John. Let me know if you find any good articles on customization for beginners
Hi Brad,
Love your work!
Can you explain if changes in other templates (ig footer.php) will behave as a child as well?
Thanks
Han
Hey Hans
If you move the footer.php file into your child theme it will work fine and not be overwritten when you update your parent theme.
Your page templates will be ok as well.However this is not the case for all php files.
Hope that answers your question.
A great place to learn more about php is at wordpress.stackexchange.com or your themes forum if you own a premium theme like Thesis or Genesis.