Category: WebTeacherTips

I just changed the theme on this self-hosted WordPress blog. So – no big deal, it’s as easy as pressing a button, right? Not exactly. Not if you want to modify the theme. Not if you are in the BlogHer Ad Network and need an ad in a sidebar on both the main blog page, single blog post pages and site pages.

There’s the required ad in my sidebar.

Here’s how I got that sidebar on every page. I started with the most basic theme you can get at wordpress.org: twentyeleven. There’s a newer one called twentytwelve, too. I chose this theme for several reasons.

1. It comes from WordPress, made by WordPress, so I know I can trust it.
2. It’s free.
3. It has lots of bells and whistles, and it’s a responsive design. (See Should Your Blog Use Responsive Design?)
4. It has a very simple and clean look, which I like.

The twentytwelve theme has lots of bells and whistles, too. It is a mobile first design. (See The Mobile First Craze.) I didn’t think I needed to go that far, so I stuck with twentyeleven.

The only drawback to this theme is that the single post pages (called Single in WordPress) and the individual pages (called Pages in WordPress) did not have sidebars. No sidebar, no ad space, which means I couldn’t comply with the BlogHer Ad Network requirements for running their ads.

I had to modify single.php and page.php to add the sidebar. And I had to modify functions.php. I’ll take you step by step through the process. You can do some of this in the WordPress admin area. I also used a text editor and an FTP tool.

Step 1: Install the Theme and Create a Child Theme

Use the blog admin area where you choose a theme to get twentyeleven ready to go. Or you can download twentyeleven from WordPress and add it to your site themes directory using FTP.

Here’s the thing. You have to have twentyeleven on your server, but you are not going to switch to that theme. You are going to use a child theme.

Making a child theme is actually easier than it sounds. You add another folder to your site’s theme’s folder. I did this using FTP, but you can use your site host’s control panels to add folders, too. Just make sure it’s in the themes folder and at the same level as the twentyeleven folder.

Nothing goes into the child folder, which I named twentyeleven-child, except a style.css file and a functions.php file. I started with blank files that I made by saving text documents with those two names.

Here’s the structure you need to see on your server, according to the WordPress Codex.

• site_root (www)
  • wp-content
    • themes (directory where all themes are)
      • twentyeleven (directory of parent theme, Twenty Eleven)
      • twentyeleven-child (directory of child theme; can be named anything)
        • style.css (required file in a child theme; must be named style.css)
        • function.php (not required in a child theme, but needed to modify the pages to add the sidebars)

Once this child folder is in your themes folder, you will see the child theme as a option in the WordPress Appearance > Themes area where you choose a theme. Let’s do a couple of things to the CSS file before we choose it as the theme, though.

What Goes in the CSS File?

In the style.css file in the child theme, you start out with this:

/*
Theme Name:     Twenty Eleven Child
Description:    Child theme for the Twenty Eleven theme 
Author:         your name
Template:       twentyeleven
*/

@import url("../twentyeleven/style.css");

Upload this into the child theme folder.

When you use a child theme, the browser uses any modification you put into the style.css file, but it also looks up to the imported stylesheet for everything you don’t modify. So when you pick this child theme as your theme, the css file tells the browser what the parent theme is and where the parent style sheet is.

Okay. Now you can push the button in the WordPress theme admin area to choose the child theme. Take a minute and go look at your blog with this new theme.

You could do nothing more than this and your child theme would work. It would be exactly like the parent theme, so you probably want to create a few style rules of your own in the child theme that will overrule the rules in the parent theme.

Just as an example, I didn’t like the looks of the h3 tags in the parent theme. They were too small, there was too much white space around them, they weren’t in bold, and they were all caps. So I figured out which rule I wanted to change and added this to the child style sheet:

.entry-content h3,
.comment-content h3 {
	font-size: 16px;
	font-weight:bold;
	line-height: 1.6em;
	text-transform: none;
}

This takes precedence over the rule in the parent theme CSS file, so now I have h3 headings that I like better.

Step Two: Modify single.php and page.php

You need to add the sidebar to pages and single blog posts. You open single.php and page.php in a text editor and upload the changes by FTP. You are going to modify these pages in the parent theme folder, not add anything to the child theme folder.

Open single.php in the text editor. At the very end of the page add

<?php get_sidebar(); ?>

It should be immediately before this line:

<?php get_footer(); ?>

Do the same thing to page.php. Save them both and upload them to the server – back into the parent theme where they came from.

Step Three: Modify functions.php

Now we come to the functions.php file. I found these directions at Twenty Eleven – Sidebar on Single Posts and Pages and they worked perfectly.

Add the following code to the up-till-now blank functions.php file in the child theme folder. Don’t do anything to the functions.php file in the parent theme.

I have no idea what this php is doing, but I can copy and paste like a champ. The author of the code says it will, “Suppress the .singular body_class from the single post or page,” so the sidebar can be added.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
    else:
      foreach($wp_classes as $key => $value) {
      if ($value == $val) unset($wp_classes[$key]);
      }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

Now that you have something in your functions.php file, upload it into the child theme folder again.

Anything you put into your sidebar via widgets should now appear on every page of your blog.

An Alternative

After I had done all this, I discovered Extend WordPress Twenty Eleven Theme to Include Sidebars and More Flexible Options that uses an extension to do all this and more. Sound easier? You might give it a try first. One drawback – it won’t work using a child theme. WordPress recommends that modifications to a theme be done with a child theme.  But, if easier is better in your world, you might choose to ignore the recommendation to use a child theme and go with the extension. It gives you choices in the WordPress Admin area that let you select options to add sidebars.

[Editor’s Note: Cross posted on BlogHer in slightly different form.]

UPDATE: 1/25/2013.

Since writing this post I discovered a much simpler way of insuring that the sidebar appears on each single page you might want. The theme itself provides a sidebar template, which you can find in the page attributes section of the dashboard while you are editing the page.

Select the sidebar template for the page and you are good to go.