Easily Customize WordPress with a Child Theme

Many of us run our own WordPress blogs but still want to customize the look of our WordPress web site. However, getting into WordPress customization seems a daunting and scary task.
In this tutorial, I will show you how you can easily customize WordPress using a method known as “creating a Child Theme“.
What You Will Need
- A web site or access to a web server (How to Setup a Web Server in 3 Easy Steps)
- A basic understanding of CSS (Cascading Style Sheets)
- A text editor (Windows Notepad, NotedPad++ or similar)
- FTP Access to your Web Site
- An FTP program (Here is a list of 5 FTP Clients to help you out)
- A Parent theme that you want to use as your starting template
I will be using the WordPress Twenty Eleven theme as my starting template in this tutorial.
Step 1 – Create a Theme Directory
By default, WordPress installs all themes in a sub-directory of wp-content called “themes”. So, an example would be http://www.mydomain.com/wp-content/themes/. It is here in this “themes” directory that we will create our directory.
I will call it “my-child” so that I have a directory like this – http://www.mydoman.com/wp-content/themes/my-child/
Also notice the name of the directory for my parent, the Twenty Eleven theme. It is called “twentyeleven”. Make a note of this because we will use this in the next step.
Step 2 – Create the StyleSheet
This is one of the most important parts. WordPress uses the style sheet to identify some key attributes of our new theme.
Create a file named “style.css” with the following content:
1 2 3 4 5 6 7 8 9 10 | /* Theme Name: My Child Theme URI: https://www.siamcomm.com/ Description: Child Theme based on the Twenty Eleven Theme Author: Eric Author URI: https://www.siamcomm.com/ Template: twentyeleven Version: 0.1 */ @import url("../twentyeleven/style.css"); |
Let me walk you through each line of code here. I started out my file with a comment. This tells WordPress that the elements that follow will provide it with the details of the theme.
1 2 3 | /* ... my Child Theme settings here */ |
Because it is a comment, a web browser will not do anything with the information between the starting and ending comment tags. I added in my settings and then closed out the comment field.
Each of my settings goes on its own line. It is started with a setting, followed by a colon and then the value of that particular setting. So the first line after starting the comment was:
1 | Theme Name: My Child |
This is an important setting because it tells WordPress the name of our theme.
The lines that follow also provide some information to be displayed in the Dashboard when a user views the themes available. But the most important line that follows the Theme name is the Template setting.
This tells WordPress the name of the Theme that will be used as the parent. This value needs to exactly match the directory name of the Theme as we noted in the previous step.
After we closed out the comment, the next line is the import tag. This line is required and should be located as the first line after the closing comment. It imports the style sheet from the parent to be used as a base.
Now let’s get on with the fun stuff!
Step 3 – Customize the Theme
I don’t like the large alternating image that shows up with Twenty Eleven. So the first thing I want to do is remove it. But if I am not a programmer, I don’t want to delete a bunch of code in case I want it later. So, I will just hide the picture.
Immediately following the import line in my CSS file, I will add this line:
1 | header#branding a img { display:none; } |
I am using this because I had a look at the HTML that was generated by Twenty Eleven by viewing the page’s source code. The web page source code looks like this when using Twenty Eleven.
1 2 3 4 5 6 7 8 | <header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="http://www.mydomain.com/" title="WordPress Sandbox" rel="home">WordPress Sandbox</a></span></h1> <h2 id="site-description">Just another WordPress site</h2> </hgroup> <a href="https://www.siamcomm.com/"> <img src="https://www.siamcomm.com/wp-content/themes/twentyeleven/images/headers/hanoi.jpg" width="1000" height="288" alt="" /> </a> |
I can see that there is a section called “header with an id of branding. so the correct CSS code to reference this section is header#branding
. I then want to reference the link and the image that is wrapped with in the “a”, or link tag. So I reference their HTML tags in the same line at my header#branding
tag. So this is how I came up with my new line in the CSS file.
As you know in CSS, the styling command is then written between the curly brackets “{” and “}”. And the style attribute and value to hide an element is display:none;
Now I can save my style.css file and upload it to my new child theme directory.
Now lets go into the dashboard and have a look at the themes:
WordPress has automatically added some additional information to my theme’s description. It says it is based on Twenty Eleven. It also provides links to the directories where the files are located. Very smart!
Now let’s activate my new child theme and view the site.
Step 4 – Activate the New Theme
Click on “activate” under the description of the child theme. Then click on the name of your blog at the very top of the page.
Horns please!
No more rotating image.
Now you can add all of the styling you want to the “style.css” file in the my-child directory to continue to customize it more.
Try it yourself. Change the font style on the body tag, or the color of all the links on the web site.
Your theme will maintain all of the functionality of Twenty Eleven (minus the rotating banner) but with all of the style and flare you can add to it.
Have fun!
8 Comments on “Easily Customize WordPress with a Child Theme”
Leave a Reply
You must be logged in to post a comment.
Evan Pralle
31 July 2011 at 06:37Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across. It extremely helps make reading your blog significantly easier.
admin
27 July 2011 at 10:33Thanks everyone for the comments! I really appreciate the interaction. @Martin and thanks for the link to the article as well.
How to Customise WordPress Appearance | WealthyDragon
27 July 2011 at 08:44[…] a template but enables you to change styling elements (like font size).There’s a step-by-step tutorial on creating child themes here.If you’re using a premium theme, or one with site design controls, use those. The way your […]
Martin Malden
27 July 2011 at 08:33Nice one, Dude,
I just linked to this from one of my articles on customising WordPress.
Cheers,
M.
Sherice Landenberger
27 July 2011 at 08:19You have a few useful pointers on this page.
Wendi
27 July 2011 at 05:35Simple, easy tutorial. Makes it really easy!! Thanks!! :)
Carmen
26 July 2011 at 22:09Thanks for this! Very useful! :-)
Carl - Web Courses Bangkok
26 July 2011 at 21:35I`ll be passing this onto our trainees. Thanks.