May

23

WordPress Default Single Post View With Sidebar

Filed Under Theme Remodel | 14 Comments

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.

  1. 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.
  2. 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.
  3. 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.

  1. Step One: Find "widecolumn" template files
  2. Step Two: Change body text placement
  3. 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.

without sidebar
Before: without sidebar
with sidebar
After: with sidebar

At this point, everything should be working as expected. If not, check your work and try again.

Tags:


Comments

14 Comments so far

  1. Troy (1 comments.) on November 29, 2008 12:13 am

    Thanks for the article. It was exactly what I was looking for and saved me a ton of time. I added Google Adsense ads to my sidebar, but a lot of good it did with no sidebar on the actual posts where I need them!

  2. s0uThp4rk (1 comments.) on December 11, 2008 9:02 pm

    Thank you! I was wondering why my sidebar wasn’t showing up on the single post view. That makes it more difficult for visitors from google to find the home page or any other links on my site.

  3. Fixed an issue | s0uthp4rk.com on December 11, 2008 9:08 pm

    [...] you would like this modification as well (for the default wordpress theme) go here. Share and [...]

  4. Mark on February 5, 2009 2:24 pm

    I was looking for this exact fix – very helpful!

  5. Christian (1 comments.) on February 13, 2009 8:23 am

    I modified the default theme. My main template works fine, but when I did what you describe above, it always places my footer at the bottom of the sidebar, throwing the footer way off to the right.

    I’m have very strong HTML coding expertise and still can’t see how this is happeneing. Any help or direction of what to look for is appreciated :)

  6. Lillea Woodlyns (1 comments.) on February 28, 2009 2:31 am

    Thank you for this! You describe it so clearly, helping me to change things with ease. Whew, I was SO frustrated by that disappearing sidebar, so what a relief! :)

  7. Peter (1 comments.) on March 13, 2009 8:18 pm

    Thanks dude! Nice and easy to follow plus the info was up to date.

    Cheers

    Pete

  8. chris wallace (1 comments.) on April 2, 2009 9:42 pm

    you are awesome! this helped my new site that i am building myself. many thanks for the easy instructions!

  9. ofaragilboy (1 comments.) on April 20, 2009 11:34 pm

    wow thanx u

  10. Make Basic Website (1 comments.) on May 13, 2009 1:14 pm

    Thanks very much! I did it with your help.

  11. Vise sidebar for enkelt-innlegg? - Webforumet.no(new comment) on July 19, 2009 8:47 am

    [...] Javisst. WordPress Default Single Post View With Sidebar | AbleReach [...]

  12. Maciej(new comment) on October 22, 2009 11:07 am

    Thank you very much.
    I just edited bg images for my website and i needed sidebar in single post view.

  13. David(new comment) on January 25, 2010 5:37 pm

    Thanks. You just saved my life. :)

  14. Ronald(new comment) on April 8, 2010 1:29 pm

    wow this post just saved me, thanks so much

Name (required)

Email (required)

Website

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Speak your mind