You are here: Computer Video TutorialWordpress TutorialTwenty Eleven Child Theme Simple WP 3.2 Video Tutorial
Due to regular updates on WP, if you look for Twenty Eleven theme modification or customization tutorial, first of all, first check this post. Thanks.

Twenty Eleven Child Theme Simple WP 3.2 Video Tutorial

by Kimi on July 6, 2011

It is time for Twenty Eleven Child Theme

Twenty Eleven child theme is now should be made when you want to modify Twenty Eleven, the default theme or WP 3.2 which is already available for everyone who use wordpress, and find wordpress updates is necessary to do.

I have upgrade this blog successfully without any issues, but like usual, there are a lot of users who have problems after wordpress upgrades which may be caused by alot of things, can be plugins or even themes.

I hope your blog stays cool and runs as usual if you have upgrade yours. If not, if you have just installed wordpress 3.2 in your webserver, then I hope you will have fun with Wp 3.2 +

I remember about a year ago, I wanted to create a video tutorial about Twenty Ten child theme.

However, I already found so many tutorials about it, and I thought the newest wp version will be released very soon, and soon, that tutorial would be less needed, so I guess it is a good time to create this Twenty Eleven child theme.

This tutorial is very simple actually, which works on mostly on the css style. (related: how to edit css file in wordpress). Apart of on the CSS file, I would use this Twenty Ten child theme to modify header a bit.

Twenty Eleven Child Theme – Why do we need it?

Just like Twenty Ten theme, the previous default theme or template, when we make modifications or customizations on the structure or layout, we would be happy what we can do.

blog seo

But the problem would be when wordpress is updating some of its theme files, those custom layout modification would be just overrided with the newest files, and our customization would be just useless.

Therefore, it is best to use Twenty Eleven child theme to customize TwentyEleven theme safely, and we can modify anything we want, without being afraid that in the next update, our own style will be gone.

There are many customization you can make, depends on the coding language you have. People like me, who has very very limited PHP coding language, will only modify some of the CSS style, and so forth.

This Twenty Eleven child theme tutorial is included, I only can show you small examples modifying some CSS style, but not PHP file.

Twenty Eleven Child Theme simple video tutorial

The purpose of creating this tutorial is because I guess it will be the simplest tutorial for newbie.

I have read Twenty Ten child theme tutorial from Aaron Jorbin, it is really great tutorial, but I have realized most of the codes are not for me. I am confused to see those codes!

If you are really newbie and want uncomplicated way to create a Twenty Eleven child theme, this post might help.

Video tutorial

blog seo

Steps:

1. Basically, creating a child theme will best begin with creating a blank style.css file, and import the “original” theme’s style.css file.

So to begin, we will have to create a new folder in wp-content/themes/ folder.

In this demo, I name that folder “MyTwentyEleven”. So it will look like, wp-content/themes/MyTwentyEleven

2. Inside this new made folder, we will create a new file, and name it, “style.css”.

3. In this blank style.css file, we can add these lines:

/*
Theme Name: MyTwentyEleven
Theme URI: Your URL
Description: My own Twenty Eleven copy
Author: Your name
Template: twentyeleven
*/

4. And then, hit enter once, and add this line of code:
@import url('../twentyeleven/style.css');

Screenshot:

twenty eleven child theme

The new style.css of the child theme

5. Save file, and you can start to modify the style, color, etc.

Creating Twenty Eleven child theme is an important step when we want to modify this default theme.

Subscribe new tips via Email:

Was the post helpful? Share it to help others with:

{ 31 comments… read them below or add one }

Uwe July 9, 2011 at 7:03 pm

thanks a lot for your video. I just switched to twentyeleven and needed to create a child theme because I did not like the header size of the new twentyeleven and wanted to create a child with only a smaller header.
With your video that was a task of 5 minutes. Before your video I did not even know what child themes were :)
Thanks a lot!

ciao, Uwe

Reply

Andrew July 9, 2011 at 8:35 pm

Thank you. You got the ball rolling with my design.

Reply

James Steidl July 10, 2011 at 4:56 am

Hi Kimi:

I followed your instructions exactly, but the new child theme was not recognized in the dashboard. Not your fault I’m sure, but it’s a mystery. I used the code below.

Jamie

/*

Theme Name: 2011child

Theme URI: http://www.smiapm.com

Description: 2011child

Author: James Group Studios

Template: twentyeleven

*/

@import url(‘../twentyeleven/style.css’);

Reply

Kimi July 12, 2011 at 7:32 pm

Hi James,

This is very stange that it is not recognized in the dashboard.

Unfortunately I don’t know what cause that either :(

Kimi.

Reply

PK February 27, 2012 at 2:36 pm

Hi, the reason it does not show in the dashboard, is that you are using numbers in the Theme Name. Try only letters, it will show up. :)

Reply

Kimi February 27, 2012 at 6:59 pm

Hi PK,

Thanks for the catch! Really appreciate it

Kind regards

Kimi

Reply

geraldine July 13, 2011 at 1:33 am

i’m just wondering why after i updated to the wp 3.2.1 and newest version of twenty eleven, the sidebar didnt show up in pages and post. i created a child theme for this. strange

Reply

geraldine July 13, 2011 at 1:46 am

this is a follow up. i solved it by adding get_sidebar to single.php file

Reply

Amy August 2, 2011 at 12:59 am

Hi, Thank you for this very useful tutorial. I have two questions.
1. I started modifying the TwentyEleven theme right away before creating a child. Should I create a child now based on my modifications?

2. How do I apply my child theme if I do run into a problem down the road?

Reply

Kimi August 4, 2011 at 7:11 am

Hi Amy,

Welcome to this blog, sorry for the late reply, I missed your comment to approve :(

1. Yes, if you modify the default Twenty Eleven theme without child theme or copying it, you will loose your customization once the theme is updated by wordpress central.

2. What kind of problem you mean? because if you modify the file, example the style a bit, it will still import the default css file from the default theme.

I hope this helps

Kimi.

Reply

Amy August 9, 2011 at 6:13 am

Thank you, Kimi. I decided to just create a copy of my modifications as a Child Theme. Now if there is an update that overwrites my styles I will activate the Child Theme. It’s kind of backwards, but at least I have a copy now. :)

Reply

Kimi August 9, 2011 at 6:31 am

Most Welcome, Amy!

vimoh August 6, 2011 at 4:00 pm

Thank you so much for this. I have never gone into the code very deeply, but I created my very first child theme using the instructions in your video. :)

Reply

ADNAN NG August 13, 2011 at 5:23 pm

Hi Kimi!

Thx for making and sharing this tutorial, it helps alot!

Anyhow I encountered a problem on the final step: I followed all your instruction throughout the tutorial, yet I failed to import the css file at the final stage.
*even i copied the code “@import url(‘../twentyeleven/style.css’);” (after I failed to do it by myself) – well, it just doesn’t work.

any idea how to fix it?

again, thx for sharing. :)

Reply

Kimi August 15, 2011 at 6:34 pm

Hi Adnan,

I have no idea why it does not work, as it worked with me perfectly.

Probably file permission thing? not sure though

Kimi.

Reply

ADNAN NG August 15, 2011 at 6:45 pm

Hi Kimi!

It’s alrite, though i hv no ideas as well. At the end I just copied the entire codes (basic code start from theme /. theme name to the end of import), it works! I just need to do the modification after all.

Your website and tutorial is very helpful to web beginner like me, thx alot! :)

Reply

Kimi August 15, 2011 at 6:50 pm

Hi Adnan!

It is really great you got it working finally!

Thanks so much for the kind words, it is really encouraging :)

Best wishes

Kimi.

Kimi August 20, 2011 at 3:03 pm

To Claudia Lo

I have read your comment, but lost it since I have restore this blog from the date, 17th August 2011, due to a plugin..

But the videos which were all disappeared, now appear again, I really appreciate your question, since I would not know it if you didn’t ask

Cheers,

Kimi.

Reply

Andrew August 26, 2011 at 1:55 pm

A brilliant tutorial, especially the part where you used developer tools as a shortcut to access the style paths! Thank you very much!

Reply

Benedict September 10, 2011 at 10:40 pm

Perfect, thank you! Saved me a lot of trouble

Benedict

Reply

JNB January 4, 2012 at 9:13 am

Thank you so much for the video! I’m new on this WordPress thing so I was very scared when I knew that I had to create a child theme, but it was easy :)

Reply

Ian April 6, 2012 at 11:25 pm

Thanks so much Kimi. I’m a newbie too and it really helped. Keep it up!

Reply

Beverly April 24, 2012 at 1:22 am

Hello There!

I just bought your wonderful 60 Videos but when I click a link, Internet Explorer comes on and not my default Firefox. I.E. does crazy things to my PC, is there any way that I can click a link and NOT have I.E. kick in?

Reply

Kimi April 25, 2012 at 4:37 am

Hey Beverly,

I guess it’s because IE is set to be your default browser in your computer?

If you are using Win 7 you’d want to change the default browser setting.

Here is the quick link: http://windows.microsoft.com/en-GB/Windows7/Change-your-default-web-browser

Let me know if this helps

Kimi.

Reply

Beverly April 25, 2012 at 7:12 pm

Yes, thank you Kimi. I am embarrassed.

Reply

Kimi May 1, 2012 at 11:53 am

Most welcome Beverly, no need to be embarrassed!

Best wishes

Kimi

FM January 13, 2013 at 6:20 pm

Hi Kimi,

Thank you so much. I succeeded in creating a child theme following your tutorial.

I do have one problem. The image doesn’t appear on the dashboard, only links.

The other question is, do I have to add the rest of the codes from the parent to the child below the import link? This I know you did not mention. But I would like to know anyway.

Thank you so much for the tutorials.

FM

Reply

Kimi January 25, 2013 at 6:29 pm

I don’t understand the question :-(

Reply

FM January 30, 2013 at 7:01 am

Regarding this question, I do have one problem. The image doesn’t appear on the dashboard, only links.

I do not see the picture of the twenty eleven child theme.

As for the second question, forget about it.

Thanks

Reply

Lotta April 17, 2013 at 4:28 pm

Hi!

I´m the worse newbie you can think of!
I´m trying to do a webpage in wordpress theme twentyeleven.
I have realised aI really need a child theme. But I don´t even get in the tutorial WHERE do I make those changes? In ftp? Somewhere in the Admin panel?? Where in that case?
I have nothing that looks like where you edit it all.
Probably a really stupid question and obvious for everybody else except me lol

And how do I use it? I mean, is it just running by itself and everything I then do after it just saves in the child theme. Or is it passive and I have to manually copy things I change there to ordinary theme?

Reply

Lotta April 17, 2013 at 4:38 pm

You say in the instruction “now go to your C-panel” and there is where I lost you and have nothing that looks like that at my pc.
I don´t have the content saved in any folders at my pc I work online (please merge this into my first question)

Reply

Leave a Comment

Please use a name instead of blog name or SEO stuff, otherwise it will be deleted right away.

About checkbox → See more my post:how to get rid of spam bots in wordpress post.

Thank you for visiting, you're always welcomed to be here again!

Previous post:

Next post: