How to Create a Sticky Floating Sidebar Widget in WordPress

Today, I thought to create an experiment with a banner ad in the sidebar. I wanted to make it sticky so that it is on top while scrolling to the bottom. I have seen this kind of banner in few websites, and I know it can boost sales if used properly. I did it and you can see it live on this blog. You can see the Bluehost banner at the right sidebar. I know many newbie people who do not have enough knowledge in WordPress, search for this kind of answers.  So, I thought to share the whole process with readers too. Creating Sticky Floating Sidebar Widget in WordPress is easy. Just read this guide and know how to do this

Also Read:

Create a Sticky Floating Sidebar Widget in WordPress

If you are the developer and know CSS, you can do this manually. You can manually add something which you want to be there. Then you can modify CSS to keep it always on top. But why to do so much effort if you have the easier option.Creating sticky sidebar is bit easy with WordPress plugin. Q2W3 Fixed Widget (Sticky Widget) is the WordPress plugin which easily makes the widget sticky. Just install this plugin in your WordPress blog.

This plugin also has few theme requirements to work. These requirements are:

Theme requirements:

  • jQuery 1.7 required. jQuery 1.8.3 (or later) is recommended.
  • No JavaScript errors, caused by other plugins and scripts.
  • wp_head() and wp_footer() functions in header.php and footer.php files.

If you look closely, no requirement is typical. This is the reason it is compatible with most of the themes available.

After the installation, Q2W3 Fixed Widget (Sticky Widget) plugin adds an options page in WordPress admin section. You can access it from Appearance -> Fixed Widget Options. You can customize the position and HTML id of the widget in this options page.

Q2W3 Fixed Widget (Sticky Widget)

Now, go to widgets page. Open any widget and you will see a new checkbox saying “Fixed Widget” in it. Select this new checkbox to make any widget sticky. You can also do this in multiple widgets, but I recommend to do this only in the single widget to see better results.

Sticky Widget WordPressNow check your website. Your fixed widget will now be a sticky floating widget. Scroll the website down to see it live to work.

Good thing is that the plugin was coded in very simple manner and does not conflict with any CSS of JS element of any theme. So, you can easily use this plugin with thinking twice. I still recommend you to properly check your website to see if this plugin does not cause bad effects. Although this plugin was last updated long time back, it still works fine and you can enjoy it without any issue.

If you need more options in the plugin along with just having a sticky sidebar. You can buy Theia Sticky Sidebar for WordPress. It comes with various features. It is compatible with responsive themes, works fine. I don’t think you will go with this premium plugin when you have a free option available wich works fine.

Final words

Now sticky sidebar has also become a trendy feature. This is the reason few themes developers have started adding this feature within the themes. if you theme supports this, you do not need any kind of extra plugin for this.

This can be used to show sticky subscribe form, banner add to boost CTR and highlight the thing which you want users to see. You can use it as per your need. But this is really helpful. I recommend you to use this with ads. It really works.

I hope this tutorial helped you. Do you know any other simple method for this? Share it with us via comments. You can also ask your questions in the comments below.

advertisement

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

  • ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!