Creating a Child Theme in WordPress: The Basics

7 Flares 7 Flares ×

Creating a child theme in WordPress is as simple (but not as delicious) as pie.There are thousands of ready-made WordPress themes that can make your site look gorgeous without a lot of effort. But maybe you want to disable comments on pages, or adjust the colour of the menu. Where to begin?

Luckily, you don’t need to be a code wizard to play with your WordPress theme. All you need is a basic understanding of CSS and PHP. Over the next few weeks, we’ll show you how to become a WordPress MacGyver. You don’t need to be a total expert – you just need a few tools, a little know-how, and the willingness to experiment.

But before you can start modifying your WordPress theme, you will need to create a “child theme.” Otherwise, all of your changes will be erased next time you upgrade your theme! As well, if you make any mistakes editing your child theme, it’s easy to revert back to the regular theme.

Creating a Child Theme

Here are the essential steps to creating a very basic child theme. In no time, you’ll be tweaking colors, fonts, and functions like a pro!

1. Create a new directory in wp-content/themes. For example, if your site uses the Manhattan Theme for Genesis, you would probably want to create a folder called “manhattan-child.”

2. Open the CSS file that is in your current theme folder, and copy the header. This is everything up to and including the */ (this ends the header and starts the regular CSS markup). Here’s a basic version of what it looks like:

/*
Theme Name: Manhattan
Author: StudioPress
Author URI: http://www.studiopress.com
*/ 

3. Create a new style.css file in the new theme folder. Open it and paste your header into the file. To create your child theme, all you have to do is change the theme name and add a template reference. The template reference will point WordPress to the folder that contains the parent theme. Here’s that example again, with changes made: 

/*
Theme Name: Manhattan Child
Author: StudioPress
Template: manhattan
Author URI: http://www.studiopress.com
*/

4. You’re almost ready to start tweaking! If you only want to make a few small changes to the CSS – such as changing the color of the hyperlinks – you will want to tell WordPress to import the main theme’s CSS. Otherwise, WordPress will assume that your child CSS is everything it needs to load – which will have disastrous results for the look of your site!

To tell WordPress to import your main CSS settings, all you need to do is add an import rule. This should go directly underneath the */ at the bottom of your header:

/*
Theme Name: Manhattan Child
Author: StudioPress
Template: manhattan
Author URI: http://www.studiopress.com
*/

@import url(“../manhattan/style.css”);

From here, you’re ready to tweak your CSS! By copying rules from your main theme’s CSS, you can change theme colours, adjust text fonts, and other handy tricks. With just a few subtle changes, you can make your website stand out from the pack, and get rid of that out-of-the-box cookie-cutter look. 

NEXT WEEK: Now that you have a child theme, what do you do now? If you don’t have a lot of CSS knowledge, this post is for you. We’ll show you how to be a WordPress MacGyver, and outline some of the basic tools that you need to understand when editing CSS.

Image credit: Ezra Katz, Wikimedia Commons

Want more of this awesome content?

 

Sign up to receive our Monthly Newsletter

 
Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

0 comments
7 Flares Twitter 0 Facebook 0 Google+ 5 Pin It Share 0 LinkedIn 2 StumbleUpon 0 Buffer 0 7 Flares ×