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

How to create a child theme for WordPress Twenty Twelve theme



Whenever a new version of WordPress is launched, it also comes with a set of default themes. So previously you might have used the TwentyTen and TwentyEleven themes for WordPress. The latest version is TwentyTwelve, which is basically a framework for building more child themes using it.

If you use the default theme in the twentytwelve folder you get a very minimalistic layout. It’s perhaps the first theme from WordPress that uses not even a single image (on this link you can see an image, but actually when you download the entire theme folder and activate it, it doesn’t show any image).

Although for those who are were looking for a minimalistic layout just to publish lots of text, it might be a perfect theme, but there are many people out there who would like to make certain changes to the way the fonts appear, their sizes and colors, their types, and even other changes here and there.

Altering the core Twenty Twelve files might be a bit difficult for most people, and besides, it is not advisable to change them because then your entire framework may collapse. But there is a solution. Since this thing pretty much acts as a framework, you can build a complete child theme based on it.

Creating a child theme for Twenty Twelve

Building a child theme for Twenty Twelve might be as simple as creating a single style.css file or as complex as creating an entire new file structure. Anyway, once it’s clear how to create a child theme you can go all the way to creating an entirely new theme and the new layout.

In order to create a child theme you will need to create a separate folder inside the themes folder (you can use your preferred FTP program to create the new folder)

/blogroot/wp-content/themes/twentytwelve

As you can see, the child folder is also in the same folder where twentytwelve lives (mind you, not inside it). You can name it anything you want. Inside this folder you have to create the style.css file and it should begin like this:

/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.0
*/

The CSS definitions may seem like commented out, but they actually provide useful information to the CSS file. Here are some quick descriptions of the variables used inside the file (you don’t have to use all)

  • Theme Name: This is required, but as already mentioned above, you can name it anything
  • Theme URI: This is optional and this should ideally be the link to your blog
  • Description: This is optional
  • Author: If multiple people create multiple CSS files at your workplace it would be nice to assign your name to the stylesheet, otherwise it is optional.
  • Author URI: Optional
  • Template: Required. It should be the exact name of the folder that contains the parent theme files, in this case it is normally twentytwelve
  • Version: This is optional. You can create various versions of your child theme.

In case you switched to the child theme before making any changes, you may have to switch to another theme and then switch back to this child theme in order to let the “Template” variable make a difference. If you don’t do this switching, your child theme won’t work.

Since this is a child theme, you will have to import the styles of the parent theme. The following CSS command helps you achieve that

@import url(“../twentytwelve/style.

After this is the usual CSS stuff. Suppose you want to change the font of your blog title, you can easily add this line to your child theme CSS file:

#site-title{
        font-family: Droid, Serif;
        font-size: 50px;<

In the same manner, if you want to change the font of the blog post title you can use the following definition:

h1.entry-title{
        font-family: Droid, Serif;
        font-weight: none;<

Wondering where you get the names of these div IDs and classes? Just open your website, preferably a single blog post (so that you don’t have to load a bigger page), right-click on it (preferably somewhere there is just text) and open the source code. In the source code you will be able to view the divs, the IDs and the classes.

So far we have just discussed the stylesheet file. You can also make structural changes with the help of your child theme. For example, you can add your own functions.php, single.php, page.php and other files just the usual way.