what are sticky sidebar widgets in WordPress and How to create them

A sticky, floating, or fixed, sidebar widget in WordPress is a widget that’s locked into place, so when a user scrolls down the page, it doesn’t disappear.

In other words, the information found in the sticky sidebar is accessible at any time. And it’s something all site owners should strongly consider using if they want to direct users to other content, build a bigger email list, and so much more.

The sidebar is an important part of any WordPress website. It’s a place for displaying extra information for site visitors, without overwhelming them or disrupting the user experience.

example of sidebar in WordPress

Plus, the sidebar gives people an easy way to navigate your site, which boosts engagement and helps increase conversion rates.

The problem is, many people don’t take advantage of their WordPress site’s sidebars, especially when it comes to sticky sidebar widgets.

That’s why today I’m going to share with you what a sticky sidebar widget is, why it’s beneficial, and how to add one to your WordPress website.

So, let’s get started.

Why Use a Sticky Sidebar Widget?

A sticky sidebar widget is a great way to grab and keep people’s attention once they land on your website.
Here are just some of the reasons why sticky sidebar widgets are so helpful:

  • Increased Visibility: since sticky sidebar widgets never disappear, they are always visible. This is great for times you want to ensure site visitors see certain content.
  • Higher Conversions: since floating sidebars are so visible, the chances of people converting are higher. Create calls to action asking people to sign up or make a purchase, and watch your conversion rates increase.
  • More Subscribers: adding a sticky sidebar widget to your WordPress site that lets people subscribe to your email list is a great strategy. After all, email campaigning is the most cost-effective way to market your brand, and is just one of the reasons you should build a bigger email list.
  • Improved User Experience: sticky sidebars give your users a chance to navigate your site with ease.
  • Additional Revenue Streams: whether you sell ad space on your site or are an affiliate marketer, a sticky sidebar used correctly can increase the chances people will see your ad and click on it.

According to Smashing Magazine, sticky menus are 22% easier to navigate and 100% of people preferred sticky menus without even knowing why.

It’s because of stats like this, as well as the benefits mentioned-above, you should learn how to add a sticky sidebar widget to your site.

But first, let’s take a look at some good examples before you get started.

Sticky Sidebar Examples

Knowing why a sticky sidebar is a good idea and seeing one in action are two totally different things. That’s why we’ve rounded up some of the best sticky sidebar examples around.

1. “Sticky” opt-in form example

example of sticky opt-in form

If you’re looking for a sticky sidebar in action that offers site visitors a simple way to subscribe to a newsletter, hop on over to Young Digital Lab’s guide to starting a blog. Not only does the email opt-in form follow users as they scroll through the post, there’s some very convincing social proof, and a content upgrade up for grabs for anyone that subscribes.

2. “Sticky” navigation example

example of sticky navigation

Quora does a great job of improving the usability of their website by adding a sticky sidebar with related questions to their website. Sometimes people need to dig deeper into an issue after seeing some of the answers Quora presents. So, rather than have rephrase their question and hope for better results, Quora provides a list of sticky questions that are sure to relate to the present topic.

3. “Sticky” call-to-action example

example of "sticky" call-to-action

Website Hosting Rating knows the power a sticky sidebar has on users looking for a great deal. That’s why on the web hosting review pages there is a sticky sidebar that includes a clear CTA button that invites users to click and sign up for hosting. Making the CTA sticky increases the chances people will see the button and click on it.

Now, let’s see how to create a sticky sidebar in WordPress using the free Q2W3 Fixed Widget plugin.

How to Create a Sticky Sidebar in WordPress

Step 1: Install and Activate Q2W3 Fixed Widget Plugin

The first thing you’ll need to do is install and activate the free Q2W3 Fixed Widget plugin on your WordPress website.

You can do this by going to Plugins > Add New in your WordPress dashboard and searching for “Q2W3 Fixed Widget.”

Q2W3 Fixed Widget Plugin

Click Install Now and then Activate.

Step 2: Configure Plugin Settings

To configure the sticky sidebar widget plugins, go to Appearance > Fixed Widget Options in your WordPress dashboard.

Here, you’ll see 3 sections: General Options, Compatibility, and Custom IDs.

Q2W3 Fixed Widget Settings

In these sections, you can configure setting such as:

  • Margins
  • Stop ID
  • Refresh interval
  • Disable width/height

You’ll also be able to enable/disable things like:

  • Auto fix widget ID
  • MutationObserver
  • Sticky widget for logged in users only
  • Widget width inheritance
  • jQuery(window).load() hook

You can leave the default settings as-is. After you save your changes, be sure to clear your site’s cache, especially if you use a caching plugin (which you should!).

Step 3: Turn a Widget Sticky

To turn any of your current sidebar widgets sticky, start by going to Appearance > Widgets in your WordPress dashboard.

Find the widgets you currently have in your site’s sidebars and check the box labeled Fixed Widget on widgets you want to turn sticky.

In our example, we’ll turn the search bar and recent posts widgets sticky so people can easily navigate our site without having to scroll away.

settings to turn a widget into sticky widget

Click Save Changes and check out a preview of your website.

Summary

Remember, the easier it is to navigate your website, the bigger your email list, and the more action you can convince people to take on your site, the better.

So, leverage the power a sticky sidebar offers and reap the benefits so many website owners are after.

Author bio photo Matt Ahlgren

Matt Ahlgren is a web developer and online marketer with nearly 15 years of experience in the online marketing space. He blogs about WordPress, web development and web hosting over at www.websitehostingrating.com