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

1. A web site or access to a web server (How to Setup a Web Server in 3 Easy Steps)
2. A basic understanding of CSS (Cascading Style Sheets)
3. A text editor (Windows Notepad, NotedPad++ or similar)
4. FTP Access to your Web Site
5. An FTP program (Here is a list of 5 FTP Clients to help you out)
6. 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:

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.

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:

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:

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.

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!