Earlier I’d looked at various options for defining your own custom CSS on your WordPress blog in such a way that all your hard work is not overwritten by a theme upgrade. There is one additional method that deserves its own separate tutorial. It’s called a child theme. It provides a way of extending an existing theme where you can make not only your own CSS customizations, but also add functionality to the functions.php file, create your own header.php etc all without making any modifications that will be overwritten by later updates.
It’s not as easy as simply installing a plug-in to hold your custom CSS. But for those who are interested, it’s a great way to get started with the basics of theme development. If you find yourself making a lot of modifications to an existing theme, you might want to expand a bit and develop your own!
A Skeleton Child Theme for WordPress
In the “wp-content” directory of your blog, open up the themes folder and create a new subdirectory that will represent your child theme. If you’re trying to extend a parent theme that lives in a folder called “some-awesome-look”, the convention states that your child theme should be “some-awesome-look-child”. This is purely for convenience. It can be any name that you want.
To create your own custom CSS, create a “style.css” file and type in the following lines:
Theme Name: Some Awesome Look Child
The theme name can be anything you want, but the template has to reflect the name of the folder in which the parent theme resides.
Though the chances are you don’t just want to write your own CSS, but extend and partially overwrite the existing theme stylesheet. In which case, you need to include the original stylesheet into your new style.css before you do anything else. So at the very top (even before the foregoing code), add this line:
As you can see, we use a relative URL to point to the parent theme folder just one hierarchy above the one we’re in. With this simple import statement we tell WordPress that we want to use all the rules from the parent CSS before we make any modifications further below. Just to reiterate, any “@import” statement has to be the very first thing in the file if you want it to work.
At this point you’re probably thinking to yourself – how in the world does WordPress even know that a child theme exists? Even though we’ve put all of the necessary information into it referring to the parent theme, we still need to take the final step and apply these changes.
Here’s the cool part. Login to your WordPress dashboard, go to Appearance and then Themes. You should see the child theme you just created as one of the options that you can install! I must admit it’s quite a kick seeing your work appear in the list of choices. You’re a pro already!
Overwrite Any Files
The true power of a child theme however comes when it allows you to overwrite any existing file in the parent theme including the PHP ones. So if you write a new header.php and place it in your subdirectory, it will be used instead of the original.
The exception is the functions.php file. Any functions you write in a new functions.php file are loaded in addition to and before those in the original parent theme.
So when people like me tell you to modify your functions.php, simply add those functions in your child theme instead. This way you neatly abstract away your changes and keep them safe. The same goes for any CSS modification you make.
- Child Themes on Codex.Wordpress.org
- A WordPress child theme made easy… and easier on WpThemeDetector.com
- Child Themes Basics and Creating Child Themes in WordPress on WpTuts.com
Is your website slow?
Enter its URL below to find out now:
- PREVIOUS ENTRY: Easily Disable Self Pingbacks in WordPress
- NEXT ENTRY: WordPress Strategies - Signal vs Noise, Part 1 of 2