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.

In this post, I will show you one 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.

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

Then, we will style the section in your child theme’s folder style.css (if there is no .css file like this, create one).

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.

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

Limit the floating element to only some pages

Sometimes you might want to show different messages based on the page where users are. Simply add a condition to the function in functions.php using WordPress’s built in such as is_page(), is_single(), is_singular() or is_front_page().

Thanks for following along and if you have any question, please feel free to contact us anytime for help. Thanks and stay safe.