[HTML, CSS] Add a floating button to WordPress website 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.

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).

The most important styling is:

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”.

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.

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().

Add a floating button to any website with HTML and CSS

For non-WordPress users, you don’t need to add function. Just simply add the HTML and CSS to where it applies for your website.