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.

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.

Copy to Clipboard

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

Copy to Clipboard

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

Copy to Clipboard

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

Published On: October 19th, 2021 / Categories: Tips /

Subscribe To Receive The Latest News

Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus.

Thank you for your message. It has been sent.
There was an error trying to send your message. Please try again later.

Add notice about your Privacy Policy here.