• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

[HTML, CSS] Add a floating button to WordPress website without plugins

Modified on: September 19, 2020

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.

Table of contents

  1. Add floating element by editing your child theme’s code
    1. What if you don’t have access to the File Editor or FTP?
    2. Limit the floating element to only some pages
      1. Add a floating button to any website with 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.

        PHP

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

        CSS

        The most important styling is:

        CSS

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

        Using additional css tool to add css code to wordpress website
        Using Additional CSS tool to add CSS code to wordpress website

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

        PHP

        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.

        HTML
        CSS

        Filed Under: Front-end, Wordpress, WordPress Themes Tagged With: add_action, css, html, php, wordpress hooks

        Recent posts

        WordPress: Create custom post type programmatically

        [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

        Mangools Review: A Productive SEO tool for The Affiliates

        Reader Interactions

        You are here: Home / Front-end / [HTML, CSS] Add a floating button to WordPress website without plugins

        Leave a Reply Cancel reply

        Your email address will not be published. Required fields are marked *

        Primary Sidebar

        Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

        FOLLOW MY BLOG

        Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.