The WordPress Default theme doesn’t include a sidebar in single post views. I don’t like the way Default does this, for three reasons.
- Any page can be a landing page. A site should provide new users with whatever they may need in order to feel oriented. A few sidebar landmark links can do wonders for a bounce rate.
- All or nothing is not much of a choice. Suppose you want a sidebar that shows subcategories for the parent category of that post, or featured links for a category that is also the topic of some non-blog content “Pages,” or any number of other possibilities.
- Convenience. A centralized location for sidebar customization may provide better management. Some of this could be set up in functions.php and sidebar.php, instead of requiring separate edits on however many separate template files might have different kinds of sidebar situations. Which method is really more convenient will depend on what the blog is expected to do, and the person managing the customizations.
The following tutorial shows how to include a sidebar on the single post view of a site that uses the WordPress Default theme. The same method can be used for other sorts of single column views.
- Step One: Find “widecolumn” template files
- Step Two: Change body text placement
- Step Three: Add the sidebar
Step One: Find “widecolumn” template files
In the unedited Default theme, four kinds of views have the single column, sidebar-free presentation style. Each is created by a separate template file. I’ve chosen to add sidebars to three, but leave image.php as is. WordPress 2.5x’s image gallery is generated by image.php, and I want to get to know it before editing it.
From the WordPress dashboard, go to Design > Theme Editor and open these three files of the WordPress Default theme:
- single.php
- archives.php
- links.php
On each of those template files you’ll need to change two, short, simple bits of code – one near the top of each, and one at the bottom.
Step Two: Change body text placement
Find references to the “widecolumn” class, and change them to “narrowcolumn.” “Widecolumn” arranges content in the single, wider column of WordPress Default’s sidebar-free pages. Narrowcolumn allows room for a 190 pixel sidebar with 15 pixel margins, and a 15 pixel buffer between content and sidebar.
Look for this near the top of each of the three files listed above:
<div id="content" class="widecolumn">
After changing “widecolumn” to “narrowcolumn,” it should look like this:
<div id="content" class="narrowcolumn">
Remember to click “Update File” to save your work.
Step Three: Add the sidebar
Add a sidebar. A call to a sidebar can be added just above the call to the footer.
Look for this near the bottom of each of the same three files:
<?php get_footer(); ?>
After adding a call to the sidebar, it should look like this:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Remember to click “Update File” to save your work.
Check your work.
Open a post and click refresh.
Before: without sidebar
After: with sidebar
At this point, everything should be working as expected. If not, check your work and try again.