WordPress Max | WordPress Guides For The Geek Impaired

Add Background Color To Single Page Sidebar On Default WordPress Theme

Wow is that title long enough for you? I searched for the answer to this for hours and what seems like second nature to the geeks actually drove me nuts! I explain how to add the sidebar to a single page in this related post, Adding The Sidebar To The WordPress Page Or Single Post Template. In that WordPress guide I explain how to add the sidebar to the single post page of the WordPress default theme. What is missing from that WordPress guide are instructions for getting the single post page to show the light gray background on the sidebar that is shown on the main index page.

So here we are going to further customize WordPress to get everything looking uniform throughout the entire blog using the WordPress default theme.

First you need to be able to either edit the themes files through the WordPress dashboard or edit them from your hosting accounts control panel. To edit the themes files in the dashboard they need the proper file permissions set, I explain how to change the file permissions in this related post: Adding The Sidebar To The WordPress Page Or Single Post Template.

From the WordPress dashboard go to Presentation, Theme Editor. Click on Header on the right side and the header.php file will be visible in the editor. Warning if you are not experienced with editing these files copy all the text in here and paste it into Wordpad or Notepad and save a copy of it on your computer.

The WordPress default theme was written to not show the sidebar on the single post page. Because of that it specifies one background image for the main index that shows the gray background in the sidebar. And another image for the single post page with no background in the sidebar area. The version of the default theme you have determines what image background to use. But don’t worry you will see what image to use right within your header.php file.

With the header.php file open scroll down and look for the code that looks like this for older versions of the theme:

#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbg.jpg“) repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbgwide.jpg“) repeat-y top; border: none; }
<?php } ?>

</style>

Or like this for newer versions:

#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbg-<?php bloginfo(’text_direction’); ?>.jpg”) repeat-y top; border:

none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }
<?php } ?>

</style>

The first instance of the red text is specifying the background image to use on the a page that has no sidebar, again it depends on what version of the theme you are using as to what you are going to see in your header.php file. Now all you need to do is copy the code from the top and replace it with the code on the bottom like this:

#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbg.jpg“) repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbg.jpg“) repeat-y top; border: none; }
<?php } ?>

</style>

Or like this for newer versions:

#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbg-<?php bloginfo(’text_direction’); ?>.jpg”) repeat-y top; border:

none; }
<?php } else { // No sidebar ?>
#page { background: url(”<?php bloginfo(’stylesheet_directory’);

?>/images/kubrickbg-<?php bloginfo(’text_direction’); ?>.jpg”) repeat-y top; border: none; }
<?php } ?>

</style>

Click Update File and check out your blog to make sure you did it correctly. If your WordPress blog is all messed up just paste the code back in from the backup file you made. And don’t blame me if you didn’t make a backup of the files, I warned you twice!

Update! After a few comments and emails from people who can’t get this to work I will close comments on this post and give you this default theme with the sidebar already added to the single.php file.  Click Here To Download Default Theme With Sidebar On Single Posts

If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.

Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!

Powered by Wordpress | WP Premium theme by WP Remix
Copyright 2007. WordPress Max | WordPress Guides For The Geek Impaired. All rights reserved

• Home
• Sitemap
• Privacy