Dos and Don’ts for WordPress Sidebars

Back to basics.

There are 4 website sections that can help out with the navigation structure:

• Primary navigation menu (usually placed above the website header)
• Footer
• Left sidebar
• Right sidebar

Sidebars are column sections on a website, placed on the left or right-hand side of the web page, that contain links to other pages, and other useful information.

Sadly, sidebars are often overlooked or misunderstood.

Let’s solve this once and for all!

First, we’ll talk about sidebars in general, and their purpose, then we’ll go into some technical WordPress aspects.

 

What’s the purpose of a sidebar?

Let’s settle two things before we begin:

1. One shouldn’t place a sidebar on a homepage (unless you have some online newspaper), portfolio, or product page (because it will distract users from the purpose of that page).
2. Use meaningful information in your sidebars. Ask yourself: “Is this going to be helpful and relevant for my reader?”

Why would you have a sidebar on your website?

• To help people find specific sections of a website and help them navigate
• To get leads 
• To bring in a new revenue stream through ads

When you start building your sidebar you should have a functionality-first approach, then the style. Just don’t mess up your user experience.

What can you include in your WordPress sidebars?

• Newsletter subscription:

Source

• Social sharing icons
• Social proof: showing off subscribers and followers
• Social engagement items (like recent Facebook comments)
• Events promotion

Source

• Various announcements

Source

Tip: make sure you place these announcements wisely, try to match them in a specific context. 

• Your own promotions and offers:

Source

• Ads, if you think of them as an important revenue source

Source

 

• E-commerce filters

Source

 

In the case of blogs, the sidebar can include:

• Search bar

Source

• Authors presentation

Source: Yoast SEO

• Other blog posts (latest, most popular, contextually relevant to the current article) recommendations

Source

• Long-form content promotions

Source

 

• Table of contents for blog articles

Source

Left Sidebars versus Right Sidebars

This is a never-ending debate…

Because we read from left to right does this mean we should all place the most important subject to the left? This means we should all have right-hand sidebars because they are second-tier importance elements.

Except for e-commerce, of course, where filtering is vital, and we’re used to having it on the left (if there are too many options, or centered-up if fewer options).

In the blogging use case, where the content is news-related, the right-hand convention is very common. 

Now, I feel this is a chicken and egg debate, which was first? The left or the right sidebar? Are “conventions” born as “conventions” or are they the effect of testing?

We, humans, learn a lot, and we are being educated about our online experience. Like we’ve been educated on mobile to identify the hamburger icon when looking for a website menu.

Does it all relate to education or to innate pattern models hidden in our brains?

I’m guessing we haven’t figured this out yet.

In the end, if the user is really looking for something, he will find it on the left as well as on the right…you might need only the proper visual cues.

Like here…where the menu is not on top like we got used to. But our minds are already educated to look for the hamburger symbol that will eventually lead to the menu…which is on the left in the Papelito case.

There’s only one way to find out which one is better for you and your user: AB testing (I’m going to expand a bit on this in the next chapter).

 

The Case Against Sidebars

Many UX designers say sidebars are becoming irrelevant, especially in a mobile-first world.

I would argue that a bit, just because the mobile devices are forcing us to cut them off, it doesn’t mean that they’re becoming obsolete.

Now, let’s take a look at some other arguments.

• Minimalism

With the era of flat design, “less is more”. A minimal design will highlight the sole purpose of a page, a unique call to action which will focus on what’s important.

• The rise of AdBlocks coupled with banner blindness call for a need to give up on ads sidebars

• Sidebars distract users from your content

• Sidebar clutter can affect conversion rates

An experiment ran by Videofruit in 2015 revealed that 0.3% of the time people were clicking on the sidebar. In the sidebar, they had a CTA with a newsletter subscription. VideoFruit saw a 26% increase in newsletter conversion rates by removing the sidebar and placing the CTA elsewhere.

Now, which side are you on?

If you don’t know what to do about sidebars, there’s one way of finding out: measurement.

The first question to answer before building an experiment: would this be something relevant for both my business and my users?

If so, A/B test this.

Prepare a control page, with no sidebar and experiment page with a sidebar. 

Start with a change. 

Let’s say, place a subscribe banner to the right. In the control page, have the subscribe banner in the header, or below the content.

Leave the experiment run until you reach enough sample size and your desired confidence. Then check if the number of subscribers differs significantly. Use this calculator for this.

 

How can you build a WordPress Sidebar?

 

Now we know what we want to include in our WordPress sidebar.

Let’s build one, shall we?

How to create WordPress sidebars using widgets

WordPress widgets are blocks of content that you can add to your site’s sidebars, footers, and other sections. They were created with the purpose of avoiding code and making it easy for the users to design and add content. 

 

A set of widgets is included with the default WordPress installation. In addition to these standard widgets, extra widgets can be included by themes or plugins. An advantage of widgets built into themes or plugins is to provide extra features and increase the number of widgets.

Source: https://developer.wordpress.org/themes/functionality/widgets/

 

The advantage of using these widgets is that they won’t affect page speed. 

Now, where are these widgets located in the WordPress dashboard? Under Appearance-> Widgets. All you’ll have to do is drag a widget on the right.

We have even prepared a short tutorial on how to build WordPress sidebars using widgets, you can watch it below.

Now, if you want to spice your sidebar up with some imagery, just drag the “Image widget” and upload your image. In here you could use your own design of an offer, let’s say. You can even add a link to it.

 

The thing that gives you superpowers is the “Custom HTML” widget.

How to create WordPress sidebars using the WordPress customizer

Now, you can also add widgets by visiting Appearance -> Customize in the WordPress dashboard.

The WordPress Customizer relies heavily on the theme’s functionalities. So, be careful with your theme choice!

For the purpose of this example Colibri Builder.

When you scroll down in the left-hand side menu you’ll see the “Widgets” section. 

Let’s see pick “Custom HTML”.

In the example below we used basic HTML code to insert an image with a link on the right-hand side of our blog.

How to create WordPress sidebars using the WordPress plugins

If you want to take your sidebars to a whole new level you can use additional plugins.

If you go to your WordPress dashboard, to Plugins -> Add New, you can install any plugin you need. Just make sure to activate it before using it.

Now, let’s take a look at 3 of our favorite sidebar plugins.

 

1. Custom Sidebars by WebFactory

 

Source

This plugin allows you to be creative. It lets you add unique elements depending on which page your users are browsing. You don’t need to have one sidebar, you can have sidebars that match a specific context.

 

2. Content Aware Sidebars

This plugin allows you to replace your theme sidebars on different conditions. 

You also get full control over the look and feel of your sidebars and widget areas (no matter the theme you use), by being able to change HTML and CSS classes.

In the premium package, there’s included a sticky sidebar feature as well.

 

3. Recent Posts Widget With Thumbnails

In the default WordPress sidebar widgets, there’s an option that displays recent posts. The thing is it will show only links.

That’s kinda dull, don’t you think?

Let’s spice it up a bit by adding an image to each post in order to draw attention.

This plugin lists the most recent posts with post titles, thumbnails, excerpts, authors, categories, dates, and more.

Now, there are tons of sidebar plugins in the WordPress ecosystem.

If you want to grow your email subscribers list, there’s a plugin for that.

If you want to want to show off your Youtube videos, there’s a plugin for that as well.

If you want a plugin with more sidebar plugins included, you got it.

 

Conclusions

There are so many pieces of information to place in a sidebar, that you can get overwhelmed.

Always ask yourself: is this information essential, does it help the reader, does this help my business? 

Now, see our Dos and Don’ts!

 

Dos

• Before deciding on your sidebar elements, you should first consider their placement and integration with the other elements of your website. Will they match the website as a whole?
• If you want to add a social media icon on every page, a best-case practice is to place them on a fixed left sidebar.
• Anything you want to appear highlighted or on multiple pages can go in a sidebar (eg: the same offer, CTA, or long-form piece of content).
• If you decide to add advertisements, make sure they’re not spammy.
• A/B test: with or without a sidebar.
• Use content-aware sidebars

 

Don’ts

• Don’t add too many widgets, your sidebar will look cluttered.
• Don’t use too many plugins, you’ll increase your chances of a plugin/plugin or plugin/theme conflict.
• Don’t allow too many ads (unless your revenue stream depends on them)

Aaaand….that’s a wrap!