Adding Sidebars to WordPress Themes
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.
Great post and helpful.
I use the same method to insert the subscribe form on my sidebar–then it disappears when someone subscribes either by RSS or email.
(Try it…hint, hint.)
I just use an include inside an “if” statement looking for a chocolate chip cookie. (OK, it’s really not chocolate, it is actually a “subscribed” cookie, but you get the drift.)
@Aaron. Smart idea. What cookie are you testing for? Or is it one you created?
Thanks.
Not to get too technical for newbies–I’m almost one myself.
There are several cookies and the pages display different content depending on what actions they have completed.
No Cookie – Shows the subscribe incentive
Cookie = 1 – means the visitor has submitted an email but not visited the
confirmation page. A message encouraging them to confirm
is displayed.
Cookie = 2 – means the visitor has clicked to subscribe to our RSS feed
but has not visited the bonus download page (meaning
they may have not yet read the feed.) A message
encouraging them to check the feed for their bonus is
displayed.
Cookie = 3 – means the visitor has completed their subscription, so no
message is displayed.
I’m not sure at the moment whether the RSS cookie is set yet. If you would be willing to comment on it on your blog I would be happy to write a post and make the php pages available for your readers.
Oh, and it is a cookie I created. I never check for cross site cookies–I didn’t even know you could? It seems like an invasion of privacy or something.
Hmm…interesting tips/instructions brought up in this post. I’ll make sure to remind my self of this. Thanks!
-Mike
Hi Rebecca – This is really useful info. I’m a bit scared to mess around with my theme too much, but this sounds like something i could actually do.
Ben,
I’ve been struggling with this topic for the last three weeks. What would be great is to have some resources to learn how to edit the sidebar as this is really where blogger’s income will be coming from (adverstising).
Eric
This post was featured in today’s Daily Blog Summary–a daily summary of the top 50 Make Money Blogging blogs.
Pingback: Daily Blog Summary March 20, 2008 by Full Tilt Blogging.com
@ Cath, this post was written by studioJMC, the topic was suggested by Rebecca.
It is always easy if it is a theme you built from the ground up 😀 You could just create a sidebar widget that goes all the way down the rest of the page. Have it editeable in the widget ajax page so you can just add to it.
Pingback: The Best of the Blogosphere: March 21, 2008 | Super Blogging
Very helpful and just what I needed. Can’t wait for the widget edition!
Thanks for this great article, it was immensely helpful. I’m not that good with coding or WordPress themes – I can figure it out a little enough to customize any of mine, but someday I would LOVE to be able to make my own theme. I’ll have to work on that I suppose. Thanks again!
Excellent post, and timely, too, as I’m looking to redesign my blog. Looking forward to the widget article.
There’s actually a TON you can do with multiple widgetized sections (I prefer to call them this instead of sidebars, since they don’t have to be on the side) on a site. It adds so much flexibility to your monetization strategy. I’ll post a full detail later today with how to place multiple widget sidebars in a theme on my site.
This will be a really useful piece of advice for many people.
I would just like to add that it is crucial that your sidebars are well thought out. A cluttered and very busy page can detract from what you are doing. There is a school of thought that says that you should limit the number of options that you give a website visitor because if you give them too many then they might find it too much and just leave!
The home page of this very site is a very good example of giving people the right number of options to choose from.
Adding a sidebar can, of course, add greatly to a site’s navigation and even declutter a busy page, if done correctly. One tip is to ask someone who has never been to your site to check it out for you. Ask them if their eyes are jumping all over the place and, if so, it is too busy.
Thanks for the above information.
Kind regards,
John
Good post. Also you must include on single.php, archive.php, archives.php… on some templates