Home » Internet » Blogging » WordPress » How to create a child theme for the WordPress Twenty Twelve theme

How to create a child theme for the WordPress Twenty Twelve theme



The latest Twenty Twelve theme from WordPress is basically a framework and based on it you can create multiple themes. It lays down the structural groundwork so that you just have to focus on the layout and the look of your blog post. Being a theme for WordPress doesn’t mean that you can only use it for blogging purposes; even if you want to manage a website using WordPress as your CMS backend, you can use the Twenty Twelve theme.

WordPress Twenty Twelve theme

In order to change the look and feel of this theme you will need to create a child theme and make all the CSS related changes in that theme.

The setup of WordPress stores all different themes in a folder “blog-path/wp-content/themes”

In the themes folder are stored all the different themes that you may use for your blog or website. You will also find Twenty Twelve there. If you don’t see it, it means your WordPress version needs to be upgraded; do that and this theme should appear within your themes folder.

If you haven’t changed the name of that folder, the path to your Twenty Twelve theme should be “/blog-path/wp-content/themes/twentytwelve”

For convenience sake, you can name the child theme as “/blog-path/wp-content/themes/twentytwelve-child”

This new child theme doesn’t have many files because all the necessary files are already there in the parent folder. In this folder you may like to create your own version of style.css.

In the beginning of this style.css file you can have all the introductory stuff such as the name of the child theme, the direct URI of the theme, the author, the template, etc. Since most of this stuff is commented out, it is not necessary that you have it, but it can help you if you maintain multiple versions of your themes.

Anyway, the most important line in this child theme CSS file is

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

So all the CSS definitions written in the parent stylesheet file are now available to the child stylesheet file.

Note: In case, using the Appearance option of your WordPress dashboard you had already switched to the child theme and you had not included the above-mentioned “import” line, after adding that line, in order to see the child theme in action, you will have to switch to another theme and then switch back to the child theme, otherwise, it doesn’t work. You only have to do it once after including the “import” line.

Once this is done, you can create your own definitions of the classes and DIVs being used and have a complete new look for your Twenty Twelve theme.

Suppose you want to change the look of the main page of your blog or website within the child theme, you can do it like this:

#page{
        -moz-box-shadow: 0 0 10px #000000;
        -webkit-box-shadow: 0 0 10px #000000;
        box-shadow: 0 0 10px #000000;
        margin-top:15px;
        margin-bottom:0px;        
        border-radius:7px;
}

If you want to change the font type of your body text you may need to make the following changes in your Twenty Twelve child theme:

.entry-content p, li{
        font-size:1.2rem;
        font-family:Arial, Helvetica, sans-serif !important;
        color:#000000;
}

What about using images, such as the background? You use them just the way you use them in a regular CSS file, you just saved them in the parent img folder instead of the child theme img folder. The rest remains the same. For example:

body{
        background-color:#fff;
        background-image:url(img/page-bkg.png);
        background-attachment:fixed;
}

You will store your page-bkg.png file at “/blog-path/wp-content/themes/twentytwelve/img”

A quick tip: If you are wondering how to change the associated classes and DIVs just look at the source code of one of the blog posts or pages of your WordPress blog that is using Twenty Twelve as its backend framework.