Let the Child Rule the Parent

by Tony Gamble

One of the beautiful aspects of powering your site with WordPress is the ability to change the look and feel using Themes.

'Twentyfourteen' is one of the default themes installed with WordPress. It's a great Child Theme starting point.

‘Twentyfourteen’ is one of the default themes installed with WordPress. It’s a great Child Theme starting point.

There are certainly plenty of themes to choose from. In fact, at the time I’m writing this, there are over 2,700 themes available just through the WordPress.org Themes Directory. Selecting a theme is more than just making your site look pretty, it’s also about functionality and the layout of the information most important to your visitors. So even with so many themes to choose from, there’s always the chance that there’s just that one little thing you need to change about it to make it ideal for your needs. Enter Child Themes.

First, a prerequisite: creating your own child theme means you must know something of the code behind it. At the very least, CSS (the language used to stylize the theme) and preferably PHP (the language of the working functionality in the theme’s parts). If you also know Javascript, so much the better, but if you know none of these it’s best to stick with the theme’s built-in customizations.

A Child Theme is basically a way creating your own custom theme without having to write one from scratch. You set a reference to a Parent Theme which already has all of the parts in place. Then, in the Child Theme’s directory, you only include the parts you want to change. For example, say I want to change the width of my chosen template and add a background image, but the theme author didn’t offer these as customizable options through the WordPress Appearance menu? Well, begin by creating a blank folder in the Themes directory on your WordPress install (yes, you’ll need access to the files on your server). In that folder, place a text document that is saved as ‘style.css’ and include the following lines with your own customizations:

/*
Theme Name:   Twenty Fourteen Child
Theme URI:    http://example.com/twenty-fourteen-child/
Description:  Twenty Fourteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     twentyfourteen
Version:      1.0.0
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-fourteen-child
*/
/* =Theme customization starts here
-------------------------------------------------------------- */

The first line is the name of your Child Theme. This can be whatever you like, but it’s helpful to reference your chosen Parent Theme. You also need to reference the parent with the “Template:” line. This is the name of the folder containing the Parent Theme’s files. Those are the only two required lines in the child’s stylesheet. We also need to reference the parent’s stylesheet by creating a text document named ‘functions.php’, which includes the following lines:

php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

Now, any styles you add to the Child Theme’s ‘style.css’ file will override the Parent Theme’s styles. If you want to override another part of the parent, just copy the Parent Theme’s part (for example, ‘page.php’) to the child’s theme directory. Any changes you make to this file will now override the original.

As I said before, this line of customization is not for everyone. The majority of site owners tend to slip into a catatonic state at the sight of the lines of code that make up their home on the web. But if you have an interest in learning more about the underpinnings of your WordPress website, experimenting with Child Themes can be an incredibly liberating experience. Learn more at http://codex.wordpress.org/Child_Themes.

Not running on WordPress yet? Get help building your own self-hosted WordPress website with this easy 1-day course!

Newsletter Signup

Subscribe to our Monthly Newsletter

* indicates required

Email Format


×
×

jester-logo(613) 667-1616
(647) 477-4335
info@jestercreative.com

Request a Free Estimate

Have a project in mind? We'd love to hear about it. Please provide us with a few details and we'll get in touch with you shortly.

Yeah, we know, we ask a lot of questions, but we really do appreciate you providing us as much information as you can. This will help us to work with you to find the best solutions possible for your project and ensure that we're helping you meet your objectives within your timeline and budget. Thanks and we will be in touch shortly!

Your Name*

Your Email*

What services are you interested in?*
Video ProductionWeb Site DesignMarketing ServicesTrainingOther

If Other, please specify:

Briefly describe your project :*

What is your timeframe for completion?*

What is your estimated price range?*

Please type the text below into the text field:
captcha

*required field

×
Coming Soon!

This fresh new feature is still under development.

Return to this page soon to find out more!

×
Sign Up for KickStart Services

Online application for KickStart services







×