[WordPress] Add a call-to-action floating button without plugins

If you want to create a floating element (such as button) to your WordPress website but do not want to install any plugin, follow this article.

This post introduce a simple method to add a call-to-action element (buttons, or text, or anything) stay fixed on the web page no matter how far people has scroll, using HTML and CSS.

Add floating element by editing your child theme’s code

In this case, you will need to add code to your child theme‘s functions.php and style.css.

Warning

Remember to use the child theme when adding extra code. If you edit the parent theme, after next theme’s update you will lose the code.

In functions.php, we will use the wordpress hook wp_footer to add a floating element (div or button) in the footer loading process.

add_action( 'wp_footer', 'ak_add_floating_info');
function ak_add_floating_info () {
    ?>
       <div class="sticky-slider">Call now: 0123456789</div>
    <?php
}

Then, we will style the section in your child theme’s folder style.css.

.sticky-slider {
    position: fixed;
    bottom: 1rem;
    border: none;
    border-radius: 30px;
    background-color: #0b4f34;
    color: #fff;
    z-index: 10000;
    box-shadow: 0 0 50px 0 rgba(0,0,0,.4);
    padding: 1rem 2rem;
    margin: 1rem 0;
    right: 1rem;
    font-size: 1rem;
}

The most important styling is:

position: fixed;
bottom: 1rem;
z-index: 10000;
right: 1rem;

For other attributes such as margin, padding, color, font-size, box-shadow, etc you can include or remove to fit in with your style. I thought the box-shadow is quite nice because it makes your element to stand out more from other content.

*The floating section that will stay fixed no matter how far users scroll up or down*

Based on your purpose, you can change this section into a CTA button, for example “Send message”.

What if you don’t have access to the File Editor or FTP?

In this case, you need to use a plugin that allows you to add code such as Code Snippets to write the function and add_action hook.

Then, go to WP Dashboard > Appearance > Customize, add the CSS snippets to Additional CSS, and press Publish.