Get fresh WordPress Content delivered in your inbox with warpspeed!

learn wordpress wplift wordpress rocket

On most blogs, the sidebar is there on every page. But, it can often be overlooked or relegated to simply housing a recent post widget. Yet, with just a few simple steps, this overlooked area can be lifted up to be one of the core elements of your site.

Here are some interesting ways that you can get the most out of your sidebars.

Give your sidebar a clear purpose

Before you spice up your sidebar, it’s worth taking the time to decide why it’s there in the first place. Giving it a purpose or purposes will help you decide when it needs to be shown and what should go in it. Successful sidebars tend to only have a couple of purposes, be it as navigation and a single call to action or two simple but not conflicting calls to action.

Common purposes:

  • Vertical Navigation – many sites primary navigation is in the sidebar. Without it, a visitor won’t be able to find their way around the site. Alternatively, many sites use the sidebar to provide secondary navigation as well as having a main horizontal menu at the top of the page. While the main navigation may link to your blog and key pages, the sidebar navigation might be used to provide specific content such as recent posts or to highlight content such as popular posts.
  • Calls to action – these might include promoting social media sharing or signing up to email newsletter. Sites monetized by adverts or which are promoting products often display adverts within their sidebars.
  • Information – not everyone is going to be arriving on a site from the homepage, so the sidebar can provide a great location to let people know who or what the site is about and what they can expect from it.

What not to do with a sidebar

  • Don’t overcrowd it – sidebars which are significantly longer than the post content tend to distract from the design. Content in the sidebar which is below the post content is unlikely to be read, and it also makes the content itself appear short, leaving a bad impression for the visitor. If your sidebar is very long then consider stripping it down. Think about whether all the content is really necessary. If it is, perhaps introducing a second sidebar might be a better option than squeezing everything into one.
  • Don’t distract from the content – as Bill Gates himself said, “content is king,” and the content is what your visitor has come to see – not your sidebar. If the sidebar is overly animated, taking up a lot of space, or just getting in the way of accessing your main content, people aren’t going to pay much attention to your content.

Getting creative

Once you have your purpose defined, it’s time to get creative.

Sliding Sidebars

sliding-sidebar-example

Example: http://marcbarros.com/when-i-got-fired-from-my-own-company

Having sidebars which are permanently visible is not always necessary and one of the recent trends, which might be in part inspired by the Windows 8 interface, is the sliding in panel menu. This effect is perfect for when you only want the visitor to interact with the sidebar once they have finished with the content. As such, this technique works well for navigation-based sidebars which don’t carry large calls to action.

Implementing Sliding Sidebars

While there are numerous plugins for WordPress that provide panel menu style interfaces, it’s simple to add the effect to existing themes through the jQuery plugin called Sidr. The jQuery Sidr plugin lets you set up slide-in menus that look great on any screen size.

[php]
<script>
$(document).ready(function() {
$(‘#my-menu’).sidr();
});
</script>
[/php]

Wrap a div with id “sidr” around your menu:

[php]
<div id="sidr">
<ul>
<li><a href="#">About me</a></li>
<li><a href="#">What I do</a></li>
<li><a href="#">Latest blog posts</a></li>
<li><a href="#">Online store</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</div>
[/php]

Create an activation link:

[php]
<a id="my-menu" href="#sidr">Slide in menu</a>
[/php]

You can see a demo of Sidr in action here: http://www.berriart.com/sidr/#usage

Using Different sidebars for different sections of a site

Sometimes, you will want to show different content in your sidebar – depending on what page your site visitor is looking at. For example, you may want to show very different content on your homepage to your post pages. Or, you may want to give individual categories their own unique sidebar that links to content within that category only.

Implementing different sidebars for WordPress is easy and chances are your theme has already registered some sidebars. You can check this by visiting the widgets page under themes in your WordPress admin. If a sidebar area is registered it will show on the right hand side. To add more sidebars we will need to register them, assuming your theme has at least one sidebar we should add our code in the same location. This is most likely to be in your functions.php file, though some more complex themes may have an init.php or similarly named file.

Within the files we are looking for the following code:

[php]
register_sidebar();
[/php]
It will be part of a more complete function with extra parameters, so may look more like:
[php]
register_sidebar(array(
‘name’ => __( ‘Right Hand Sidebar’ ),
‘id’ => ‘right-sidebar’,
‘description’ => __( ‘Widgets in this area will be shown on the right-hand side.’ ),
‘before_title’ => ‘<h1>’,
‘after_title’ => ‘</h1>’
));
[/php]

Once you have found the code, you can simply copy it and place it directly underneath changing the name and the id, for example:
[php]
register_sidebar(array(
‘name’ => __( ‘Right Hand Sidebar Posts’ ),
‘id’ => ‘right-sidebar’,
‘description’ => __( ‘Widgets in this area will be shown on the right-hand side.’ ),
‘before_title’ => ‘<h1>’,
‘after_title’ => ‘</h1>’
));
register_sidebar(array(
‘name’ => __( ‘Right Hand Sidebar Homepage’ ),
‘id’ => ‘right-home-sidebar’,
‘description’ => __( ‘Widgets in this area will be shown on the right-hand side.’ ),
‘before_title’ => ‘<h1>’,
‘after_title’ => ‘</h1>’
));
[/php]

You can see in this example, I have modified it so I have two right-hand sidebars, one to be shown next to the blog’s posts and the other to be shown on the homepage.

If you visit your WordPress admin area, both sidebars should now be showing in the widgets section. In this example, I didn’t change the first one’s id from ‘right-sidebar’ so this sidebar is still showing up throughout the site on the front end. You will need to complete an additional step for the homepage one to appear on the homepage.

To get the homepage to display, we need to tell the theme which sidebar to use. To do this, we need to find where the sidebar is being generated. In most themes, this will be in the sidebar.php file, though it may be in a file called sidebar-left.php or similar. If your theme has multiple sidebars, there may be multiple files.
You’ll know you’re in the right place when you find the following code:

[php]
<?php dynamic_sidebar( ‘right-sidebar’ ); ?>
[/php]

You’ll need to modify it slightly to declare a different sidebar for the homepage. For example:

[php]
$sidebar_name = ‘right-sidebar’;
if(is_home()) {
$sidebar_name = ‘right-home-sidebar’;
}
<?php dynamic_sidebar( $sidebar_name ); ?>
[/php]

Now, if the sidebar is on the homepage, it will show “right-home-sidebar” and everywhere else will show “right-sidebar”. We can expand this example to include almost any logic. For example the following code will generate a different sidebar on the homepage, individual posts (is_single) and “category 3”. Don’t forget, you need to have registered them before you can use them within the theme (as I explained earlier in the post).

[php]
$sidebar_name = ‘right-sidebar’;
if(is_home()) {
$sidebar_name = ‘right-home-sidebar’;
}
if(is_single()) {
$sidebar_name = ‘right-post-sidebar’;
}
if(is_cateogry(3)) {
$sidebar_name = ‘right-category3-sidebar’;
}
<?php dynamic_sidebar( $sidebar_name ); ?>
[/php]

As part of the page

So far, we have discussed the sidebar as being separate from the content. But this doesn’t have to be the case. You could use your sidebar as part of the content itself, whether it’s to provide additional information about a post or to seamlessly extend your homepage.

Post information

Example of displaying post information in sidebar

Example: http://blog.microlancer.com/elon-musks-greatest-weapon-laymans-guide-first-principles/

Most theme designs usually show information about the post, such as the author’s name, publication date and its categories at the top or bottom of a post, but there is no reason why you couldn’t display this in the sidebar.

Adding post content to a sidebar is simple and there are two main ways to achieve this. You could either add it into the theme itself or you could create your own widget and include it in a dynamic sidebar. We covered how to create dynamic sidebars earlier in this article and this post on Web Presence Partners shows you how to create your own widget.

Footnotes in your sidebar

footnotes-example

Example: http://wordpress.org/plugins/side-matter/screenshots/

If you’re anything like me, footnotes are something I write a lot of within my longer posts. Normally as the name implies, you show your footnotes at the bottom of your content. However, you could show your notes in your sidebar alongside your content for ease of reference. You can accomplish this with the Side Matter plugin.

Make use of wasted space

extend-loop-example

Example: http://www.debtfreedirect.co.uk/making-money-go-further/

All too often, blogs’ sidebars are shorter than the content on the page or post they appear on. This usually results in an area of wasted space under them which could be better utilised.

One interesting idea, if you are using a unique sidebar for your homepage and category pages, is to extend the loop to show posts in the sidebar – giving you a very metro feel.

Adding specific loop content can be done through a variety of plugins, all of which add widgets that get loop content. A couple of examples include:

Of course, there is nothing stopping you from implementing your own loops in your sidebar or as a widget. One of the nice things about creating your own loops is that you can choose to exclude or include certain post ID’s.

No Sidebar

no-sidebar-example

Example: http://blog.ghost.org/

Of course it’s not compulsory to have a sidebar. If you simply don’t have a reason to include one, then it might be better to remove the sidebar all together and give your content all of the attention.

The content that may have been in your sidebar can be put elsewhere, for example below the content or in the footer itself. Many of the up-and-coming blogging platforms like Ghost and Medium’s default themes don’t contain sidebars, considering them a distraction and it’s becoming a growing trend for WordPress themes as well.

<3 the humble sidebar

So, as we’ve seen, a sidebar can be far more than a dead space or a place where you add a Facebook widget just to fill it up. The sidebar can, instead, be a useful location on your blog, providing extra information, and extra navigation. It can be discreet to allow the content to shine or become part of the content itself. Or, it can simply not be there at all. The choice is yours.

About The Author

Speaking Spanish, French and Arabic as well as her native English, Sally can say how much she enjoys blogging to just about anyone. She’s got a strong interest in all things WordPress and is always eager to find out more. She blogs at blogology.co.uk.

Published:

Last updated on:

This post is by a guest author, if you would like to submit a guest post to WPLift, we’d love to hear from you. Please get in touch.

One thought on “Learning to Love Your WordPress Sidebar: Examples, Code & Advice to Improve it

Comments are closed.

Join 40,000 WordPress Astronauts
AND GET OUR LATEST CONTENT IN YOUR INBOX WITH WARPSPEED

We will never spam you.
close-link
siteground coupon
Get 60% Off the No. 1 WordPress Hosting!