Child Themes
I probably shouldn’t admit this, but here I go. When I first encountered the term ‘WordPress child themes’ I took it very literally and thought it had to do with themes for a children’s blog. I was expecting polka dots, bunnies and elephants. Stop laughing. Fortunately I’ve learned a great deal since my first encounter with child themes.
WordPress Always Has Your Best Interests in Mind
What I’ve learned to really love about working in WordPress is the folks behind the curtain make every effort to make things as straightforward and easy to follow as possible. They also create an environment that encourages experimentation and play and mucking about. The bonus here is the environment they allow you to create is also a safe place to play. You can create duel environments. Parallel universes. All so you can try things and yet not lose your original content just in case things go sideways and disappear.
Child Theme – What is it really?
A WordPress child theme gives you the space where you can create a customized and unique layout on top of an existing theme.
In technical terms a WordPress child theme inherits the functionality of another theme referred to as the parent theme. This situation enables you to modify or add to the functionality of that parent theme. The child theme allows you to make changes to the parent theme because the child theme code overwrites code in the parent theme. This creates the perfect environment for someone who wants to start futzing around and creating their own themes.
You can use the child theme to make a couple of minor changes or do a complete overhaul. You create a child theme in lieu of making the changes to the original theme.
Why?
After learning more about the whole child theme concept I wondered why go to all the trouble? Why not just make changes to the original theme. It just seemed like an extra lot of work. As you know I have a tendency to be a bit lazy and take the easy way out.
As I mentioned earlier WordPress is obsessed with providing safe development environments. WordPress is very customer focused and don’t want their users spending hours working on something only to lose it all because of a minor glitch.
The child theme is yet another safety net that you will be very glad you implemented at some point of the development of your blog.
Using a child theme…
- Speeds up development time
- Is an excellent way to get started if you’re new to WordPress
- Saves your core theme from being overwritten should there be an update
- Enables you to update the parent theme (which may be important for security or functionality) and still keep your changes
Totally necessary and it will make your life so much easier in the end.
What do I need to do?
Not to scare you off, but this process is a bit more involved, but definitely doable.
The following is how to change the styles sheet. There are a number of other elements that can be changed using the child theme but I’ll focus on this for now.
Create a directory in your themes directory to hold the child theme.
The themes directory is wp-content/themes.
It is common practice to use the name of the parent theme folder with “-child” appended to it.
For example, if you were making a child of the twentytwelve theme, your folder name would be twentytwelve-child.
In the child theme directory, create a file called style.css.
This is the only file required to make a child theme. The style sheet must start with the following lines:
/* Theme Name: Twenty Twelve Child Theme URI: http://example.com/ Description: Child theme for the Twenty Twelve theme Author: Your name here Author URI: http://example.com/about/ Template: twentytwelve Version: 0.1.0 */
Details
- You can change each of these lines to suit your theme.
- Only the Theme Name, and the Template are required
- The Template is the directory name of the parent theme.
- In this case, the parent theme is the TwentyTwelve theme, so the Template is twentytwelve, which is the name of the directory where the TwentyTwelve theme resides.
- If you want to make a child of a theme with the directory name some-crazy-directory-name, then you would use Template: some-crazy-directory-name.
More Details
The child theme’s stylesheet will overwrite the parent theme’s stylesheet
Just to keep things in order you want to include the parent theme’s stylesheet.
To do this, you need to start the stylesheet with the following line:
@import url("../twentytwelve/style.css");
Replace twentytwelve with the directory name of your parent theme
This line must go after the header code and before any other CSS rules
If you put other CSS rules before the @import, it won’t work
Activation of the Child Theme
To activate the child theme:
- Log in to your site’s dashboard, and go to Administration Panels > Appearance > Themes
- You will see your child theme listed there. Click Activate
Now it’s time to either make some changes or get your creative on and developing your own theme.
