Adding Sidebars to WordPress Themes

written by BlogEx on March 19, 2008 in WordPress Wednesdays with 18 comments

Sorry I missed last week folks but my bad back (the curse of walking upright) struck and, even with a laptop, it’s hard to write when you’re horizontal. This week I’m back among the (mostly) vertical and thought I’d jump in to a topic suggested by Rebecca Laffar-Smith:

Is it possible to add additional sidebars to an existing theme?

The simple answer is yes. The more complex answer is that it depends upon what you mean by sidebar.

According to the WordPress Codex and in terms of design, a sidebar is:

“… a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.”

Unfortunately, as the term is actually used within WordPress, that definition is woefully inadequate (not to mention a bit misleading). In addition to the narrow definition above, “sidebar” in WordPress also refers to:

• The sidebar.php file
• Any “widgetized” area of your theme (whether it is in a sidebar or not)

First we’ll look at the sidebar.php file and the related WP function, get_sidebar().

Since most themes incorporate some sort of sidebar into their design, WordPress incorporates support for a sidebar.php file in the same way it incorporates support for the header.php and footer.php files. This means we can include the entire contents of our sidebar.php files into one of our theme’s pages with one line of code:

<?php get_sidebar(); ?>

In practical terms, the result of the code above is the same as if we had copied the entire contents of sidebar.php and pasted it into the theme document. So why use get_sidebar()?

It’s really just a matter of convenience. Since it’s likely you’ll want to add your sidebar to several (but not necessarily all) of your theme pages (index.php, page.php, etc.), being able to add the sidebar with one line of code is a great timesaver. It also makes updating easier, since you only have to modify the code in one place (the sidebar.php file) to update the content wherever the function is called.

As I mentioned, WordPress also uses the get_header and get_footer() functions the same way, which explains why the basic structure of the Main Index Page for the default theme in WordPress is:

<?php get_header(); ?>
-- Post information inserted here --
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now suppose your theme already uses sidebar.php, does WordPress have a get_sidebar2() or similar function built in?

No, but fortunately you can easily accomplish the same thing using the php include function as follows:

<?php include ('sidebar2.php'); ?>

The php include function works just like WP’s built-in sidebar function with one important exception, rather than automatically locating and including a file (as the get_sidebar() function does with the sidebar.php file), the include function requires you to name the file to be included. This actually gives you quite a bit of flexiblilty:

• There is no limit (other than practicality) on the number of files you can insert into your theme’s pages.
• You aren’t limited to using the term sidebar in your file name.

In fact this is how the horizontal menu (menu.php) and the two tri-section content areas (header2.php and footer2.php) are inserted into the Blogging Experiment theme. So the basic structure of our Main Index Page is something like:

<?php get_header(); ?>
<?php include (menu.php'); ?>
<?php include (header2.php'); ?>
-- Post information inserted here --
<?php get_sidebar(); ?>
<?php include (footer2.php'); ?>
<?php get_footer(); ?>

Notice that in addition to the advantages we noted earlier it’s easy to change our layout by simply moving or deleting lines of code. For instance we could place the menu below the top tri-section and delete the bottom trisection by moving one line of code and deleting another:

<?php get_header(); ?>
<?php include (header2.php'); ?>
<?php include (menu.php'); ?>
-- Post information inserted here --
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Note: If you try to include a file that doesn’t exist, an error message will be inserted into your page but the page will continue to process. This potentially cause problems with your layout.

OK, now what about “widgeted” sidebars?

I’m afraid that will have to wait until next week. And in the mean time, if you don’t know about WordPress Widgets (and by now you really ought to) do your homework…

Follow Up: Serena Casey is still having trouble with the issue I discussed two weeks ago. The WordPress editor is deleting her paragraph returns when she edits a post. She’s using Firefox so if anybody has any additional suggestions for her, please let us know.

tags: Wordpress WordPress Themes

---

Related Articles