System Root

After several years, I’ve updated SystemRoot’s theme! Believe it or not, the old theme was from WordPress version 1.6. I picked this design from the WordPress theme search utility. It’s called “SnC Mono” and it was designed by Three Circles.

Naturally, I wanted to update the settings of it a bit more than it allowed by default so I did a little searching about an easy way to edit themes without necessarily breaking them. It turns out that WordPress supports this great feature call “Child Themes” (linked to WordPress docs). It allows you to create a separate set of files from your theme that you can use to override certain parts of it. You can override whole pages/files or just some CSS styles.

So, here’s the basic idea for setting up your own child theme.

1. You’ll want to find the theme you want to make a child of. You can do this by searching from the Appearance->Themes menu in the admin section.
2. Install the theme and find the directory name for the theme in webroot/wp-content/themes/
3. Create a new directory called: <mainthemedirectoryname>-child (Where <mainthemedirectoryname> is the name from above).
4. Create a style.css file with this basic information:
   
   C#

   /* Theme Name: Other Theme Child Theme URI: http://example.com/ Description: Child theme for the Other theme Author: Your name here Author URI: http://example.com/about/ Template: other-theme Version: 0.1.0 */ @import url("../other-theme/style.css");/*Load the parent theme's styles*/

   1 2 3 4 5 6 7 8 9 10

   /* Theme Name:     Other Theme Child Theme URI:      http://example.com/ Description:    Child theme for the Other theme Author:         Your name here Author URI:     http://example.com/about/ Template:       other-theme Version:        0.1.0 */ @import url("../other-theme/style.css");/*Load the parent theme's styles*/

   
   Note that Theme Name and Template are required.

   Template is the name of the directory you found in step 2. Everything else is fairly self explanatory.

5. Add whatever styles you want to override. Be sure to make them more (or equally) specific. I found in some cases I had to make my selectors more specific and yet, in other places, they worked with the same specificity (the same selector, in fact) as the parent template.
6. You can override whole php files as well, just add a file to the child theme’s folder with the same name as the one you want to replace. Then add whatever code from the parent theme’s file that you want and modify it to your liking. It’s that simple!

I hope this helps you out when you’re setting up your own WordPress Themes. Check out the WordPress Documentation for more information.