I set my kids up with their own blog for the summer to help encourage them to keep their writing skills sharp (since all previous motivational attempts failed). For their new site I selected the WordPress theme Pride created by Small Potato and available for download at WpDesigner.com.

I thought the theme was fantastic! My kids, however, thought otherwise. They wanted a different color scheme, which I managed to pull off with my limited Photoshop skills. They also, however, didn’t like the double sidebars on the right side of the page. They wanted me to split the sidebars and flank both sides of the main content with a single sidebar. I said no problem, and here’s how I did it.

Note: In order to follow along with my explanation, I suggest you download the Pride theme from WpDesigner.com and open the various php files in a text editor.

Start With the Original Pride Theme

The original theme contains both sidebars in a single sidebar.php theme file; however, notice how both of these sidebars are off to the right side of the page:

If you examine the contents of the sidebar.php file, you can see where the first sidebar begins and ends, and where the second sidebar follows. The sidebar gets inserted into the index.php, page.php, single.php, archive.php, and search.php files after the closing tag of the main class:

< /div><!-- end main column -->
< ? php get_sidebar(); ?>

NOTE: In order to avoid strange behavior, I inserted into this post all example PHP code formatted incorrectly.

Move the Sidebars to the Other Side

The sidebar formatting in the style.css file has the sidebar set to “float left.” Since the sidebars are inserted after the “main” section, their float setting causes them to push flush to the margin settings of the “main” section. In order to split the sidebar I moved the get_sidebar PHP call from its original location to before the “main” section:

< ? php get_sidebar(); ?>
< div class ="main">

When I checked the results, the sidebars were now on the left side of the page but still together. Now I needed to split them apart.

Duplicate the Sidebar Format Settings and Split the Sidebars

There are 15 format settings specifically named “.sidebar” in the style.css file. I copied all of these settings and pasted them a second time into the style.css file. Then, on the newly inserted batch of format settings, I renamed them all to “.sidebarright”. Then, in order to avoid future confusion, I renamed all of the original “.sidebar” format settings to “.sidebarleft” and saved my changes.

I left the top level format setting for “.sidebarleft” unchanged:

.sidebarleft{ float: left; width: 200px; margin: 0 0 0 20px; display: inline;}

In the “.sidebarright” top level format setting, however, I changed the float setting from left to right:

.sidebarright{ float: right; width: 200px; margin: 0 0 0 20px; display: inline;}

Next, I edited the sidebar.php file and inserted these new classes where “sidebar” was originally called. For the first sidebar class setting, I made the following change:

< div class=”sidebarleft”>

Then, in the second sidebar section I changed the class name to the following new class:

<div class=”sidebarright”>

I saved my settings and previewed my changes. The sidebars were split, but my margins weren’t exactly the way I wanted:

Update the Margin Formatting to Get the Correct Spacing

The left sidebar has 20px in the left margin which was the original format setting. The right sidebar looked fine because the 20px left margin works correctly on the right side of the page. To correct the problem I only needed to change the margin settings for the “.sidebarleft” top level format setting and give it a 20px right margin:

.sidebarleft{ float: left; width: 200px; margin: 0 20px 0 0; display: inline;}

I saved my changes and reloaded the page, and like magic the sidebars flanked the left and right sides of the main page content with proper spacing.

Sidebar Comments Caused Problems with Internet Explorer

When I originally did the sidebar split work, I had comments all over the place in the sidebar.php file. I wanted to keep track of what everything was in the sidebar so future edits would be easy. With FireFox these comments caused no problem whatsoever; however, with Microsoft Internet Explorer version 6.x, the comments caused strange background colors in the sidebar:

After much frustration I gave in and removed the comments which resolved the problem.

Moral of the story — Sidebar splitting is easy and more about CSS settings than specialized WordPress function calls and template tags. And, always test your design changes with as many browsers as possible, and watch out for comments in your PHP files, Internet Explorer doesn’t seem to like them.

Share, Bookmark, or Email this post

If you liked this post, subscribe to TechTraction's RSS feed or TechTraction's email feed

Filed under: How-To & Tech Tips