Ready For Child Themes?
Imagine two friends, Tim and Kim.
Both are boys and share same apartment. And both are students too.
Now, there’s a problem!
They both have some important event coming up and need formal clothes. Fortunately, the events are on different dates.
They have two choices:
- Purchase two suites.
- Purchase only one suit and share it.
Which one should they go for?
Obviously, second one.
Now, think as a WordPress Developer.
You have to develop a theme.
Will you prefer to start from ground up or customize an existing one?
Customize an existing one, right?
And that is exactly where child themes come in.
What Is A Child Theme?
A child theme is a normal WordPress theme that, well, just like a child, is small. And to make up for some missing functionality, it borrows features from its parent theme.
At the very least, the child theme can change some styles and at most, it can turn whole theme upside down and add or subtract features.
What You Need
Here are the tools and resources you need to develop a child theme for WordPress:
- WordPress Installation: You can either develop on a live server or install WordPress locally.
- Filezilla: In case you are making changes on a live server, Filezilla is a good FTP client to use.
- Text Editor: Notepad for Windows will do but I’d recommend Notepad++. Linux users, look no further than gedit!
- PHP, CSS and HTML Knowledge: PHP is not essential as you can simply use CSS to alter the look. However, if you are serious about WordPress Development, you should start learning PHP Basics.
Why A Child Theme…..
When you can customize a WP theme?
That’s a question that many of you will ask.
Here’s why child themes are needed:
- Easy Updates: If you customize a theme and forget to update its info in style.css, it may get overwritten during upgrades. And that won’t be good at all because your updates will be lost. Child theme allows you to be safe from these changes!
- Easy Customization: What do programmers hate the most? Editing someone else’s code! I hate that. Making a child theme allows you to keep existing features and styles and build on top of them.
How To Make A Child Theme
Making a child theme in WordPress is very easy. You only need one file to get started, style.css.
Step 1: Create Directory For Theme
The directory structure for the theme is like this:
Once you create a directory for your theme (I named my child theme Shadow Child and placed it inside directory “shadowchild”).
Step 2: Creating Child Themes
Create style.css and paste this code in it:
/*
Theme Name: Child Theme Name
Theme URI: http://ditio.net
Description: A child theme for Twenty Eleven by Ishan Sharma
Author: Ishan Sharma
Author URI: http://ditio.net
Template: twentyeleven
Version: 0.1
*/
@import url("../twentyeleven/style.css");
The important part here not to forget is “Template” information. I missed it when I was creating the theme and spent some time figuring out why WordPress did not even recognize the theme.
@import is just to copy the Twenty Eleven’s stylesheet to child theme so that those styles still apply. If you want to completely change things, you can leave this.
Step 3: Other templates
style.css is the only required file here. You can include other files as well. Here’s how this works:
- style.css of child completely overrides the style.css of parent theme.
- functions.php for child is loaded before functions.php of parent theme so that you can edit things easily.
- Other page templates like single.php and index.php completely override the corresponding pages of parent.
These were just the basics of child theme creation. In upcoming tutorials, we will see some examples of child themes.
Make sure to subscribe to get latest updates.
Image Credit: epsos on flickr.
