Making a basic child theme is a lot easier than you think. But why would you need your own child theme?
If you don’t save your custom changes then they will be lost when you update your 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.
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
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.