I’ve mentioned before that more than 95% of the sites I’ve been hired to develop for the past few years have been built on WordPress. Now, while many of these require a completely customized, original theme built from scratch, most of them are built on a basic, well-crafted “framework”.
You already know about CSS framework systems, such as the Grid– but today I want to talk about WordPress child themes, which are sort of like using a framework system, but maybe even better.
If you create WordPress themes on a regular basis, this bit of text, which goes at the top of your style.css file, should be quite familiar to you:
/*
Theme Name: My Awesome Theme
Theme URI: http://devlounge.net/my-awesome-theme/
Description: An awesome, all-original theme.
Author: Mr. Awesome Author
Author URI: http://devlounge.net/mrawesomeauthor
Version: 1.0
.
My original, awesome theme.
.
*/
Now let’s say I want to create a child theme for My Awesome Theme, called “Eldest Daughter”. At the top of my child theme style.css file, I would do this:
/*
Theme Name: Eldest Daughter
Description: Child theme of My Awesome Theme
Author: Miss Eldest Daughter
Author URI: http://devlounge.net/miss-eldest-daughter
Template: my-awesome-theme
Version: 1.0
.
The eldest daughter of My Awesome Theme.
.
*/
@import url (“../my-awesome-theme/style.css”);
What you’re doing here is establishing Eldest Daughter as the child of My Awesome Theme with this line:
Template: my-awesome-theme
Then making sure to import the styles from My Awesome Theme with this line:
@import url (“../my-awesome-theme/style.css”);
And just like that, your child theme will inherit all the styles from its parent theme, and anything you put in the child theme’s style.css file will override its parents elements without making changes to the original styles.
And that’s how to get started creating WordPress child themes. You can learn more here: How to Modify Themes the Smart Way and at the WordPress Codex.
Do you create and/or use child themes?