Twenty Twelve Child Theme Step By Step

The newer theme of WordPress 3.5 (at the moment still beta, when this post is written) is already available to download, both in themes directory, and inside the beta version.

As usual, before modifying or customizing anything in this parent theme, it’s best to create a child theme.

You can see my old tutorial about creating Twenty Eleven child theme, because the steps are actually 98% almost the same.

However, if you’re a new to WordPress and haven’t used Twenty Eleven ever, Twenty Twelve theme would be your first theme for your blog or website.

You might also read this post where I already reviewed Twenty Twelve many months ago.

And to be always up to date with WordPress, I write this short post about creating Twenty Twelve WordPress Child Theme.

What you will need, FTP program such as FileZilla, etc (see this tutorial on how to use it), or cPanel info to login to your webserver directly.

I use the last method, which is logging into my CPanel, and create child theme from there.

Video Step By Step

Steps:

1. Navigate to your wordpress directory, and look for wp-content/themes directory.

themes folder

“themes” folder

2. Inside “Themes” directory, create a folder which will be your child theme folder. In this tutorial, I use, MyTwentyTwelve folder.

Twenty Twelve child theme folder

Twenty Twelve Child Theme Folder

3. Inside this MyTwentyTwelve new folder, you need to create a new file, called, style.css. It has to be with this exact same file name.

style css

style.css file

4. Open style.css file, and add this code;

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

See this page for reference.

You can modify anything you like above, except the “Template”. It has to be twentytwelve.

5. Add this code to import parent theme’s style file.

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

Conclusion

That’s it, not so much different with creating other child themes, and now you can change the look of it, in this tutorial, I have just used simple css customization on post title, by adding this following code.
h1.entry-title a{color:#FFFFFF; background-color:#0E3547;}

Result:

Twenty Twelve Child Theme Result

Twenty Twelve Child Theme Result

You can do many style or other customization without editing the parent theme. Have fun!

Share the knowledge
Share on Google+2Tweet about this on Twitter3Share on Facebook1Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. scott says

    Thanks for this helpful post. Just thought you’d like to know about a small typo in your Conclusion section:
    h1.entry-title (not h1.entry.title)

    • says

      Hi Scott,

      Thank you so much for the correction, really appreciate it.

      Already update it :)

      Thanks once again, Scott :)

  2. says

    Hi

    I really like the way you describe how to create a twenty twelve child theme. It’s easy to understand. But, how to add some jquery effect?

    Thank you :)

  3. Steve says

    Thank you – I finally learned to make a child theme!
    I now have a dilemma.
    First – I learned how to put the header on top (in twentytwelve). Then I learned about the importance of child themes.

    So I started with a fresh twentytwelve parent, and have now created a child theme. But now I don’t know what to do to put the header on top. With the parent, there was all the css so I could go in and change the header around. But now, in the child theme, I don’t have all the css available?

    • says

      Hello Steve,

      If you have a child theme of Twenty Twelve theme, you can also modify the css, which will be the style.css inside the Twenty Twelve child theme folder.

      In this tutorial, I gave a simple example to change the color with the child theme. And for the header, you will need to inspact the element of the header itself.

      I hope this helps, thanks for coming across.

      Kimi.

  4. says

    Hello, very nice and to-the-point post.

    I would like to ask for a favour. All I want to do with the child theme of twentytwelve is have the post publish date appear right after the post title, in the form “This post was published on xxx”.

    Any pointers as to where I should look in order to do that?

  5. Stany says

    Kimi, forget my previous post, the blinking is gone, i had forgotten some php command in the image code … sorry for disturbing. I found the solution while watching your video again !! Many thanks for your videos !

    Stany

  6. says

    Thanks for the tutorial,
    I tried to follow every step, though I can’t seem to be able to import the parent theme in my child theme. The child theme does work, though without any style. I have tried to include the code @import url(“../twentytwelve/style.css”); at the bottom, but it does not work. Can you help me?
    Thanks

    • says

      Hello Marc,

      Did you copy the code or add it manually? I suggest you to add it manually.

      I hope this will work

      Kimi.

      • says

        I have just tried to add it manually and I still get no style. Anything else you think that I could try? Could it be due to a plug-in that I am using?

        • says

          Hello,

          It can be caused by many things, does your new child theme name has number or space? it shouldn’t have a number in the beginning.

          If you don’t have a number or space in the name, I’d check the line “Template: twentytwelve” on the top?

          Can you please let me know where did you upload the style.css?

  7. Margaret says

    Nope… Can’t make it work. It shows up in themes but when I activate it it doesn’t look right. I already edited twenty twelve, but when I read it could all be for nothing in the next update, I wanted to try to make a child theme… I’m totally new to this, so probably did something wrong ;) Used textpad for the style.css put it in a file called My twenty twelve theme and put it under themes with filezilla. I tryed to write it by hand and remove the spaces in the name in the code and the template line looks the way your does :)

    • says

      Hi Marta,

      It’s cPanel of HostGator, you can read it in this post if you like.

      It’s a webserver where you can install wordpress or other CMS software or static sites.

      Cheers

      Kimi.

  8. says

    Hi Kim! I must be doing something wrong, because even though I have the @import url part in there, it doesn’t give me any style at all. It’s all a grey background and absolutely no styling anywhere. This is the code I have:

    /*
    Theme Name: 2012 BeYouthful
    Theme URI: http://beyouthfulnfit.com
    Description: A fresh, clean daisy theme, made especially for you by your daughter one night when I also made chocolate chip oatmeal cookies, and also another day when everyone was jabbering and I couldn’t concentrate ;)
    Author: Jessica
    Author URI: http://sevenfarmgirlsisters.com
    Template: twentytwelve
    Version: 1.0.0
    Text Domain: twenty-twelve-child
    */
    @import url(“../twentytwelve/style.css”);

    /* =Theme customization starts here
    ————————————————————– */

    Did I do something wrong? Thank you for any help! :)

    • says

      Aha! I found out what I did wrong :) I had spaces in my theme name folder, and when I took those out, it worked. I didn’t realize that would cause problems! Sorry for bothering you! I love your tutorials! Keep them coming ;)

      • says

        Hi Jessica!

        Terribly sorry that I’ve just logged in to my dashboard and saw your comments.

        Glad you figured it out yourself though, also good job!

        Thank you for stopping by and the nice words

        Kind regards

        Kimi.