Are you looking for adding sticky buttons to your WordPress website? Using sticky action buttons, the user can easily get information related to the website. This information can be your email, phone number, Google Map location, social media links, etc. In this article, I show you how to add sticky buttons on the WordPress website.

Sticky action buttons will act as a floating widget. These buttons will be fixed even if the user scrolls up or down. It will look great on the website and adds a better user experience. Adding sticky buttons helps to improve the conversions and interaction with the visitors.

Getting Started

There are 2 ways of adding sticky buttons to WordPress. One way is to build code from scratch and the second one is using a plugin. For this tutorial, I am going to use a plugin. The reason is obvious if we can get a nice plugin that can accomplish our small task then why waste time on building it from scratch.

It makes sense to build a code if you want to build a large and complex functionality. In such cases, plugins might not fulfill your goal and it is better to not depend on them as their updates can break the functionalities. But for the smaller tasks like this one(sticky buttons) you can rely on plugins.

One of the most efficient plugins for adding sticky elements on your site is WP Sticky. It’s a neat little plugin that allows you to add indefinite sticky elements, compatible with all themes, plugins, and page builders, and the entire procedure can be done in literally minutes. It emphasizes the simplicity of the process, so the whole procedure consists of:

• Naming your element
• Navigating and clicking on the “Pick Element” button
• Choosing the desired element you want to make sticky
• Clicking on “Save Changes”

And that’s pretty much it – the chosen element is now sticky on your site. There are quite a few customizations included, so you can play around with the sticky element’s opacity, select the “Fade-in” or the “Slide down” effect, set the scroll range, etc. Furthermore, you can set different preferences to suit your website ideally – you can add a restriction by a specific criterion, which means that the element won’t appear as sticky on selected:

• Pages
• Posts
• Categories
• Tags
• Or post types

Of course, you can set it to be sticky everywhere or prevent it on one of the mentioned to gain full control over the plugin. Worried about how are they going to display on different devices? That can be adjusted as well on the “Devices” tab, where you’ll be able to select the exact screen size where your elements will appear as sticky. You can pick basically any element you prefer, whether it’s a sticky header, sticky menu, widget, navigation, video…everything can be adjusted in a few minutes, and you can make as many as you need. Efficient, elegant, and as simple as it gets.

Furthermore, there are other tools as well that’ll help you in creating sticky elements on your site. That being said install and activate the Smart Floating Action Buttons – Buttonizer plugin. We will see how to use this plugin in the next section.

Add Sticky Buttons on WordPress Website

Upon plugin installation, head over to the ‘Buttonizer’ menu on the dashboard. This plugin does not have a backend settings page. Instead, it provides a front-end interface so you can see the impact of changes immediately.

The plugin provides more than 25 click actions. From the list let’s assume you want to add Email, Phone, and Google Map location to your sticky buttons on the website.

Click on the ‘Add Button’ and give a name for the button. I am giving a name as ‘Phone’ to the button. After this, you will see the button in the front-end interface as follows.

As this button is for ‘phone number’ we need to customize it. Click on the ‘Settings’ icon next to the ‘PHONE’. It will open an options panel for customizing the button.

Choose a ‘Call action(phone number)’ from the ‘Button action’ dropdown. Add the phone number to the provided text field.

Next, I want to set a phone icon for this button. We can do it from STYLE >> ICON sections. Under the ‘ICON’ click on the ‘SELECT ICON’, it will open a pop-up where you pick up an icon from the Font Awesome library.

Following the same process, we can add as many buttons to the website. For each button, choose the appropriate ‘Button action’ and you will get the different options for the button.

Finally, we want to set a position for the sticky buttons. To achieve it click on the ‘Settings’ icon next to the ‘NEW GROUP’.

Under the ‘Position’ section, you can get the options to set the position for the buttons. I want it on the right side and to the center. So, I set ‘0%’ under the ‘HORIZONTAL’ and the middle part under the ‘VERTICAL’ sections.

The Buttonizer plugins provide a lot more features that you should play with and get familiarized with it. The plugin provides options for button color, button animations, backgrounds, custom classes, device visibility, and much more.

By applying the above settings, sticky buttons will look like on the website as the screenshot below.

I hope you got to know about adding sticky buttons on the WordPress website. Please share your thoughts and suggestions in the comment section below.

Related Articles

• FooGallery – A Beautiful WordPress Image Gallery Plugin
• How to Grow Your Email Subscribers On WordPress Website
• How to Add Code After the Body Tag in WordPress

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.