I will try to keep up with documenting the changes I make to Twenty Eleven by using a child theme to do so. If you’d like to learn how to make a child theme, follow along. Or visit WordPress Codex here.
A note about why you’re doing this – Twenty Eleven is a framework that you can build off of with your own themes. But instead of messing with the original files, you create your own. Most of Twenty Eleven’s files will be read by your child theme. All you want to be able to do is style it and customize it to what you like.
What you’ll need:
ftp access OR
access to the file manager on your hosting area. These instructions are for a self-hosted blog through a hosting company such as Host Gator or TMDHosting, etc. You can use either ftp or the file manager on your hosting account to do this.
You’ll need to navigate to your wp-content/themes folder.
Inside the themes folder, create a new folder and give it the name of your child theme. I shall call mine squishy (don’t you just love “Finding Nemo?”). Hence, I made a folder called squishy.
Click continue reading to learn more.
Now, open whatever html editor you like (I like Dreamweaver). Or you can go to the file manager on your hosting account. Create a new file called style.css. This is the file that you will use to make changes to the styling of your site.
You will add to the top of your style.css the following code:
/* Theme Name: Twenty Eleven Child Theme URI: http://example.com/ Description: Child theme for the Twenty Eleven theme Author: Your name here Author URI: http://example.com/about/ Template: twentyeleven Version: 0.1.0 */
Keep in mind that template has to have twentyeleven so that your style.css knows it’s a child of that theme. (Look at the file name to see that Twenty Eleven is spelled twentyeleven and that’s why you type that in as the template. So, my header begins:
/* Theme Name: Squishy Theme URI: http://example.com/ Description: Child theme for the Twenty Eleven theme Author: Your name here Author URI: http://example.com/about/ Template: twentyeleven Version: 0.1.0 */
The next step is to change Theme URI to your URL. Here’s mine:
/* Theme Name: Squishy Theme URI: http://www.hillarymeister.com/ Description: Child theme for the Twenty Eleven theme Author: Your name here Author URI: http://example.com/about/ Template: twentyeleven Version: 0.1.0 */
Next step completes the Author, Author URI, Template and Version portions:
/* Theme Name: Squishy Theme URI: http://www.hillarymeister.com/ Description: Squishy is a child theme for Twenty Eleven Author: Hillary Meister Author URI: http://www.hillarymeister.com/about/ Template: twentyeleven Version: 0.1.0 */
After the */ add the following:
@import url("../twentyeleven/style.css");This imports the parent theme’s style.css. You can still make your own – whatever styles you create in your child theme will override the parent.
Voila! It’s that easy.
Be sure to save the file or upload it through ftp into your child theme’s folder.
Now, to activate the file, go to themes in the backend of your WordPress install and you’ll see your child theme there. Just click activate. If you want a screenshot simply make one in a graphics editor and create a graphic that’s 300 pixels in width by 225 pixels in height. Save this graphic as screenshot.png and upload it to your new theme folder.
So, you’ll have two files in your child theme folder – screenshot.png and style.css.
The Codex will explain what all of these areas are much better. But if you have questions about this, leave a comment below.
