Introduction
Sooner or later you will want to customize a theme that you are using. You have up to 4 possibilities. They range from easy to complex.
First, many themes and the WordPress customizer provide many options for customizing a theme. This is one of the easiest ways to customize a theme.
Second, look for a plugin. This is also an easy solution. The challenge, find a plugin. It may take several plugins to get what you want.
Third, create a child theme. This is a big step compared to the first two choices. You will need to be familiar with HTML, CSS and PHP.
Forth, create your own theme. The most complex choice of the four. If you don’t have the skills needed for web development then this isn’t the choice for you.
In this tutorial I’m going to focus on option three. I’m using the Twenty Eleven theme. Its an older theme but does what I want. I started with the customizer. I finally needed a change that a child theme could easily handle.
The example below will start with the Twenty Eleven theme. So lets get started.
Creating a basic child theme
We are going to create a feature packed child them. The theme won’t do a thing. This will be the easiest child theme for you to create.
- Create a directory named “MyChildTheme”.
- Create an empty text file named “functions.php”.
- Create a text file named “style.css” with the following text.
/*
Theme Name: MyChildTheme
Author: You
Description: 2011 child theme for WordPress
Author URI: yourdomain.tld/
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);
That’s it. You now have a fully functional child theme that does nothing.
Adding your custom CSS
I also over rode some of the CSS in the parent theme. Since my CSS is simple, I added it to my theme’s style.css file. Add the following CSS to the end of the file.
pre {
border: solid 1px #111111;
font-size: 1.3 em;
color: #001100;
margin: 10px;
padding:10px;
background: #D3D3FF;
}
#main {
font-family: arial;
font-size: 1.1em;
}
body {
background-color: red;
}
The style.css file should look like the following.
/*
Theme Name: MyChildTheme
Author: You
Description: 2011 child theme for WordPress
Author URI: yourdomain.tld/
Template: twentyeleven
*/
@import url(../twentyeleven/style.css);
pre {
border: solid 1px #111111;
font-size: 1.3 em;
color: #001100;
margin: 10px;
padding:10px;
background: #D3D3FF;
}
#main {
font-family: arial;
font-size: 1.1em;
}
body {
background-color: red;
}
Adding the side bar to single posts
When you are reading a post like this one the twenty eleven theme doesn’t have a sidebar. In my child theme I put them back.
- Copy page.php and single.php from the twenty eleven theme to your child theme folder.
- Open the functions.php file and paste the following.
<?php
add_filter('body_class', 'fix_body_class_for_sidebar', 20, 2);
function fix_body_class_for_sidebar($wp_classes, $extra_classes) {
if( is_single() || is_page() ){
if (in_array('singular',$wp_classes)){
foreach($wp_classes as $key => $value) {
if ($value == 'singular')
unset($wp_classes[$key]);
}
}
}
return array_merge($wp_classes, (array) $extra_classes);
}
?>
- Open single.php and place the following
<?php get_sidebar(); ?>
on the line before
<?php get_footer(); ?>
- Open page.php and place the following
<?php get_sidebar(); ?>
on the line before
<?php get_footer(); ?>
Conclusion
A child theme can be basic or complex. Best part is it provides a nice way to customize a theme.
