How To Add A Floating Sidebar To A WordPress Site

Floating sidebars come in handy when you want to keep a particular facet or part of your website accessible to the reader at all times. So the idea behind ensuring maximum accessibility is that the user almost always sees whatever content is presented in a floating sidebar.

It is for this very reason that many websites employ a floating share bar. These sidebars are always visible and easily accessible to the visitor. It increases the likelihood of a visitor sharing your content.

Similarly webmasters tend put up their best content in the most accessible part of the website. This keeps what you want in your visitors' range of vision at all times.

[success icon=”exclaimation-sign”]

Need Help Tweaking Your WordPress Site?
WHSR is now partner with to assist users who need professional WP development / customization services.

To get a free quotation, please fill up this request form.



A fine example of something that can be added to a floating sidebar, check out WHSR's post on Social Media Safety.



In this particular case, Jerry is offering to provide a visitor with an eBook about how to start and run a blog successfully. We believe that this one of the most valuable guides WHSR can provide. And, we'd like every visitor to take notice.

Access to the eBook is granted on providing your email address. So not only do we provide you with the eBook but we also subscribe you to our blog. In other words, it is a floating subscription form.

The floating subscription form on WHSR is pretty difficult for a WP newbie to replicate.

So, let me show you how you can harness the power of a floating sidebar with a nifty little plugin, Q2W3 Fixed Widget.

Q2W3 Fixed Widget




Once you've installed and activated the plugin, getting it in place is actually quite easy.

1. Open Appearances > Widgets.

2. You'll see sidebar options, the number of sidebars depends on your choice of theme.

3. Select the fixed widget option and you are done. The particular widget will stay in place. Take a look at the screenshot below, I've fixed the recent posts and categories on my sidebar.




And the result:



You also can do a couple of customizations with the plugin.

  • The margins can be adjusted
  • The refresh interval and the max width can be given a specific value
  •  Plugin options can help ensure compatibility with your theme. An example would be the ability to inherit width from a parent container – this may change in a responsive theme depending on screen size.



Create Sticky Subscription Forms & Floating Share Bars

If you want to create any other type of floating sidebar, there are plugins that allow for that, too. For example, you if you want to add a floating share bar or a subscription form to your sidebar, find a subscription form plugin or a social sharing plugin.

1. Add a text widget to the sidebar.

2. Add the appropriate short code (provided by plugin) to the text widget and you'll have a sticky share bar.

The effect would be similar to the video below, where they've created a floating share bar.



With any other plugin you can add functionalities to your site and make them highly accessible by adding their shortcodes to a Text Widget that you've added to the sidebar. In addition, you can add custom HTML or JavaScript to the Text Widget.

Final Thoughts

Use floating sidebars wisely and maximize the number or social shares/number of subscribers or any other function you choose to use the plugin for.

Now, look to the right side of this article. We have our subscription form and a guide that can help with your blogging endeavors, please do subscribe and all our posts will reach your mailbox.

If you use another plugin, hacks or codes to create a floating sidebar, I'd love to hear about it in the comments section.

Photo of author

Article by Vishnu