Want to know how to create a simple sticky floating sidebar widget in WordPress? Some visitors find floating elements annoying, while others find them useful. The secret is to have a subtle yet noticeable floating sidebar that gently draws in the visitors’ eyes. But why bother? Because sticky elements that stay visible as the user scrolls do pay off.
Uses for Sticky Website Elements
Floating objects help to improve click-throughs, reduce bounce, and yield higher conversion rates than static elements. In this guide, we focus on the sticky floating sidebar widget. It’s the perfect place to offer free downloads or to encourage visitors to sign up to newsletters.
Other uses for sticky web elements may include:
- Adding sticky menus help users navigate the website or blog
- Product promotions
- Sticky ads and affiliate banners
- Google calendar
- Add email newsletter sign-ups
- Links to the most recent posts or the most popular
- Add a sticky fixed sidebar for Flickr photos
- Others (limited only by imagination)
You can see the potential here. It’s a winning tactic as long as it’s not annoying.
Sticky Widget Plugins
The best way to integrate a sticky floating sidebar in WordPress is to use a plugin. Plugins are flexible and give plenty of options to customize the floating element. That means you can create a floating sidebar that matches your theme. The one we use for this tutorial is the Q2W3 Fixed Widget for WordPress. It’s a popular, easy tool to use, created by Thomas Maier and Max Bond.
This is a 100% free plugin. There is no pro (premium) version at the time of writing.
Please read ‘How to Install New Plugins’ first if you’re an inexperienced WP administrator.
Install and Activate the Q2W3 Fixed Widget Plugin for WordPress.
We’ll go back and customize the plugin’s floating sidebar settings shortly.
First, go to Appearance => Widgets from the Dashboard side menu.
Drag a Pages Widget into your Primary Sidebar from the Available Widgets area.
Click the Pages Widget to open its property fields (see next image).
Type a name into the Title field. We’ll call this test the Floating Menu Sidebar.
Fill in the Sort by and Exclude fields or leave the defaults.
Place a tick (check) into the Fixed Widget box, then click Save.
Now hover the mouse over the Welcome link in Dashboard (top-left) to reveal the Visit Site link. Right-click on Visit Site, then left-click on Open link in new tab from the pop-up menu.
Tip: Keep this tab open so you can see how new settings affect your site as you make them.
See how your sticky floating sidebar menu now stays above the fold as you scroll down the page.
How your floating sidebar looks depends on the theme, custom settings, and the included items.
Every widget that goes into your Primary Sidebar now has the Fixed Widget checkbox option.
Try a few out. Remember to refresh the live site using CTRL + F5 to view the changes.
Now let’s go over the plugin’s settings options.
Go to Appearance => Fixed Widget Options from the Dashboard side menu.
You’re now at the Fixed Widget Options screen.
The General Options box lets you set the top and bottom margins. Margin Top is useful if your sidebar is too tight to the top of the page. A gap of 100–150px should give plenty of breathing space and prevent the elements from looking cramped. Set the Margin Bottom to around 100+ pixels if the bottom of your sidebar gets hidden at the end of a page.
Click Save Changes and refresh the live page to view the adjustments.
Advanced general options
There are two advanced settings in the General Options screen. Stop ID determines the margin-bottom value. Use this to stop the floating sidebar from sticking past a specified point in the post or page. Refresh Interval (in milliseconds) is only for browsers with no MutationObserver API support. Leave these at their defaults for now if you don’t understand them.
Last is the advanced Compatibility and Custom IDs options. Use these settings for Disabling MutationObserver, jQuery issues, responsive (mobile-friendly) sidebars, logged in users, and custom HTML IDs. Again, skip these options for now if you’re unsure about any of them.
Click Save Changes and refresh the live page to view any adjustments.
Tip: Clear the cache after changing options if you use a caching plugin.
Other Sticky Plugins to Consider
- Ad Inserter Ad Manager and AdSense Ads | by Igor Funa
- Sticky Menu, Sticky Header on Scroll | by WebFactory Ltd.
- WP Sticky Sidebar Widget Plugin | by Premio
Whatever option you go for, all subtle sticky floating sidebars attract eyeballs. Done well, it’s a highly effective way to market and promote content, products, and services.
