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.
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.
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:
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.





























{ 31 comments… read them below or add one }
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
Thank you. You got the ball rolling with my design.
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’);
Hi James,
This is very stange that it is not recognized in the dashboard.
Unfortunately I don’t know what cause that either :(
Kimi.
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. :)
Hi PK,
Thanks for the catch! Really appreciate it
Kind regards
Kimi
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
this is a follow up. i solved it by adding get_sidebar to single.php file
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?
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.
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. :)
Most Welcome, Amy!
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. :)
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. :)
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.
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! :)
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.
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.
A brilliant tutorial, especially the part where you used developer tools as a shortcut to access the style paths! Thank you very much!
Perfect, thank you! Saved me a lot of trouble
Benedict
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 :)
Thanks so much Kimi. I’m a newbie too and it really helped. Keep it up!
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?
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.
Yes, thank you Kimi. I am embarrassed.
Most welcome Beverly, no need to be embarrassed!
Best wishes
Kimi
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
I don’t understand the question :-(
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
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?
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)