Child Themes Basics and Creating Child Themes in WordPress

A WordPress theme is a collection of template files which lets you change the user interface, design, look, and feel of the site. A WordPress theme can either just have some bare minimum design changes implemented or might even have some advanced logic showing the most recent post differently than the others or showing the posts from a particular category in a different section on the home page etc. WordPress themes can range from a simple set of files to a complete complex framework so that other themes can be built on top of that. In this article we are going to see how one can create child themes for other themes to leverage on the code provided by the parent theme.

Step 1 Understanding Child Theme Fundamentals

To create a child theme, first we have to create a folder in the wp-content/themesfolder for our child theme. Then we create a style.css file in our child theme folder as shown below:

/*

Theme Name:     My Twenty Eleven Child

Theme URI:

Description:    My Child theme

Author:         Abbas Suterwala

Author URI:

Template:       twentyeleven

Version:        1

*/

Once we have done this we should be able to see our theme in the wp-admin as seen below.

Now we can activate our child theme. Once we activate our child theme and see our blog we will see it all distorted as we have not provided any CSS in our style sheet. Here we are going to leverage and reuse the style from the parent theme and we will just include it in our child theme. Then just change the parts which we want to change. In this case we want to make the background grey. We should add the following lines to the style.css:

// This @import line loads the stylesheet from the parent theme

@import url("../twentyeleven/style.css");

// Now we can override styles from the parent theme...

body {

    background: #eeeeee;

}

Now if we see our blog we will see it as seen below

The child theme has to contain a style.css file. Then the child theme could optionally override other template files like author.php, category.php etc. The WordPress framework first looks for a template file in the child theme directory and then if not found will pick it up from the parent directory. The child theme can also add its own functions.php to add its own functions and functionality in addition to that given from the parent theme.

Step 2 Understanding Advantages & Disadvantages of Using Child Themes

Using a child theme has many advantages some of which are as follows:

If we create a child theme we will not need to create a new theme from scratch which will have faster development time.
There are a lot of free and commercial theme frameworks available which give us a wide range of functionality will not need too much customization in our child themes.
If we use child themes as opposed to directly modifying the parent theme to suit our needs, we will easily be able to upgrade to a newer version of the parent theme without losing any of our customization.
A lot of times parent themes not only provide the design but also include widgets and plugins which can be directly used if we create a child theme of that parent theme.
If it's a popular parent theme you are using, either free or commercial, it's more likely to have fewer bugs and be more stable as it has been used and tested on multiple sites.

Some of the disadvantages of child themes are:

When we make child themes WordPress has to look into two places to find template files, this has some performance cost and hence using child themes might have some performance impacts on you site. Though in reality, these are very minimal.
A lot of the theme frameworks are very extensive and provide a lot of features which might not be useful to you. This makes frameworks complex and it would increase the time taken to learn and master the framework.

Step 3 Knowing Some Famous WordPress Theme Frameworks

There are a lot of free as well as commercial theme frameworks for WordPress than can be used as a parent theme. Some of them are generic and add a wide variety of functionality. There are also theme frameworks available for specific kinds of needs like creating a real estate site or creating a product catalog site etc.

Some of the free popular theme frameworks are:

Twenty Eleven - Though this is a complete theme, it is a very good starting point to create a child theme as it has all the functionalities to create a good web site. The style of this theme can be easily customized. This is a free theme and comes with the default WordPress installation. So it's a great framework to look at if you want to create a simple and cool web site.
Thematic - This is a very popular theme framework for WordPress. This is a free theme. This also has many child themes made on top of it which are also freely available. This theme framework has a lot of hooks which the child theme can use to customize. It also has multiple styles like 2-column and 3-column which can be used. It also has good documentation available which would make it easier to get started with this framework.
WhiteBoard - This is also a very good and useful framework. This comes with bare minimum functionality and good structure which can be customized for your needs. It's a very useful framework.

For a more comprehensive list of WordPress frameworks you can visit an interesting article The Wordpress Theme Frameworks Starter Guide

Step 4 Creating the Child Theme to TwentyEleven as an Example

Now we will change the design of the TwentyEleven parent theme in our child theme. Currently supposing we want a 2-column lay out with the sidebar at the right. In that case the layout we need is the same as that of the parent theme. So we will get that directly from the parent theme and we will not make any changes in the child theme.

For my child theme I do not want a header image. In TwentyEleven I can change or remove the header image from the theme options as shown below.

Following is the changes in the style.css of the child theme:

/*

Theme Name:     My Twenty Eleven Child

Theme URI:

Description:    My Child theme

Author:         Abbas Suterwala

Author URI:

Template:       twentyeleven

Version:        1

*/

@import url("../twentyeleven/style.css");

body, input {

    line-height: 1.75em;

    background: #A9D0D6;

    font-size: 11.5pt;

    color: #5A6466;

    font-family: Kreon, serif;

}

a {

    color: #2A3436;

}

#site-title a {

    font-family: "Open Sans",sans-serif;

    font-size: 3em;

}

#access {

    background: #FFFFFF;

}

#access a {

    text-transform: uppercase;

    text-decoration: none;

    color: #1C1C1C;

    font-size: 1.2em;

}

#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {

    background: #F2EBDE;

    border: solid 1px #BFB5A4;

    box-shadow: inset 0px 0px 0px 1px #fff;

    text-shadow: 1px 1px 0px rgba(255,255,255,0.9);

}

#secondary {

    background: #EEF5F6;

    padding: 20px;

    border: solid 1px #D6E0E2;

    margin: 0 10px 0 0;

    text-shadow: 1px 1px 0px rgba(255,255,255,1);

    box-shadow: inset 0px 0px 0px 1px #fff;

}

.widget a {

    text-decoration: underline;

    color: #2A3436;

}

.widget a:hover, .widget a:focus, .widget a:active {

    text-decoration: none;

}

#site-generator {

    padding: 40px 40px 0 40px;

    color: #302F2C;

    background: #F2EBDE;

    font-family: Kreon,serif;

    border-top: solid 1px #BFB5A4;

    box-shadow: inset 0px 0px 0px 1px #fff;

    text-shadow: 1px 1px 0px rgba(255,255,255,0.9);

}

.entry-title, .entry-title a {

    font-family: "Open Sans", sans-serif;

    color: #2A3436;

    margin-bottom: 1em;

    font-size: 1.5em;

    text-transform: uppercase;

    font-weight: normal;

}

.left-sidebar #secondary {

    margin-left: 3%;

}

In the above code I have changed the background using the body tag, the menu items' design using the access, and the sidebar using the secondary tag. In similar ways you can change the design of any part of the parent to suit your needs. The theme will now look as seen below:

For more details on creating a child theme using TwentyEleven you can refer to the article Creating a Simple Child Theme Using Twenty Eleven.

Step 5 Creating a Child Theme for Thematic as an Example

Now we will create a child theme for Thematic. Once we have downloaded the Thematic theme and added it in our wp-content/themes folder we will add a new folder for our child theme called mythematicchildtheme. Inside the Thematic folder there is a folder thematicsamplechildtheme in which there are sample files to create a child theme from Thematic. We can use those files as starting point and paste them in our child theme folder.

Thematic has different layouts already defined which we can use in our child theme. For our child theme we will use a 3-coloumn layout. We will make some changes to the design of the site which are as follows:

/*

Theme Name: My Thematic Child Theme

Theme URI: 

Description: This is a child theme of thematic created by me

Author: Abbas Suterwala

Author URI: 

Template: thematic

Version: 1.0

*/

/* Reset browser defaults */

@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */

@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */

@import url('../thematic/library/layouts/3c-fixed.css');

/* Apply basic image styles */

@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */

/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */

@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */

@import url('../thematic/library/styles/plugins.css');

body {

    color: #787878;

}

#header {

    background: #339900;

}

#footer {

    background: #339900;

}

#siteinfo a:active, #siteinfo a:hover {

    color: #000000;

}

#siteinfo a {

    color: #000000;

}

#siteinfo {

    color: #000000;

}

#blog-title a {

    color: #000000;

}

#blog-description {

    color: #000000;

}

.aside a {

    color: #006600;

}

a, a:active, a:hover {

    color: #006600;

}

.aside h3 {

    color: #006600;

}

.entry-title {

    color: #006600;

}

.entry-title a {

    color: #006600;

}

.entry-title a:active, .entry-title a:hover {

    color: #006600;

}

The theme will look as follows:

Thematic also has a lot of hooks in the theme framework in which the child theme can hook into. Let's take the thematic_belowheader hook as an example and show the Hello Dolly lyrics which comes with the famous plugin Hello Dolly written by Matt Mullenweg which is in the WordPress installation by default. First let's activate the Hello Dolly plugin from the admin.

Then in the functions.php in the child theme add the following code:

<?php

function show_dolly_lyrics() {

    if ( ! is_home() )

        return;

    ?>

    <div id="featureposts">

        <center>

        <?php

            hello_dolly();

        ?>

        </center>

    </div>

    <?php

}

add_action( 'thematic_belowheader', 'show_dolly_lyrics', 10 );

?>

Now we will display, at random, one line from the Hello dolly lyrics on the home page as seen below:

Thematic gives a lot of hooks which really make it easy for the child theme to add features using these hooks. You can get a list of all hooks provided by Thematic in the

Conclusion

WordPress is a great platform to build blogs and sites. It also provides the infrastructure to create plugin frameworks or theme frameworks on top of it. The theme frameworks built on top of WordPress can help one develop a stable, good quality theme in quick time and will also let the uniqueness of your site remain intact. This helps in faster development time and lower costs. So have fun creating your WordPress child theme.

CSE-Kids

Search This Blog