Floating Button Tutorial for WordPress

Add an always-on-top floating button to your WordPress site that displays a fully customisable pop-up panel when clicked. The button will work like the WooCommerce floating cart button plugin over at Power Plugins, but we’ll attach an animated pop-up panel to it that you can use for whatever you want. The whole thing will be mobile-first responsive.

How It’s Going to Work

importantMake sure you’re using a WordPress child theme so you can edit functions.php.

Scaffold the Code

Let’s start by scaffolding the project.

In your custom child theme, create a file called “wpt-floating-popup.php” and a folder called “wpt-floating-popup”.

Go into the wpt-floating-popup folder and create empty text files called “panel-one.php”, “wptflp-public.css” and “wptflp-public.js”.

Head back into your child theme’s main folder, edit wpt-floating-popup.php and paste the following into it.

<?php

/**
 * WP Tutorials Floating Button and Popup (WPTFLP)
 *
 * https://wp-tutorials.tech/add-functionality/floating-button-tutorial-for-wordpress/
 *
 */

// Block direct access.
defined('WPINC') || die();

/**
 * Hook the wptflp_enable_button filter and return "false" if you want to
 * disable the floating button and panel.
 */
function is_floating_popup_button_enabled() {
	return apply_filters('wptflp_enable_button', true);
}

/**
 * By default, this will return "panel-one.php" but you can hook the
 * wptflp_panel_file_name filter to change the file name of the panel on a
 * per-content basis.
 */
function get_floating_panel_name() {
	return apply_filters('wptflp_panel_file_name', 'panel-one.php');
}

/**
 * Enqueue the front-end assets.
 */
function wptflp_enqueue_scripts() {
	// Enqueue stylesheets and scripts...
	// ...
	// ...
}
add_action('wp_enqueue_scripts', 'wptflp_enqueue_scripts');

/**
 * Render the always on-top floating button and the popup box (hidden) at the
 * end of the page's HTML, before the body tag is closed.
 */
function wptflp_render_button_and_popup() {
	// Render the button and popup panel (hidden)...
	// ...
	// ...
}
add_action('wp_footer', 'wptflp_render_button_and_popup');

To join it all together, open your child theme’s functions.php and add the following couple of lines to it:

// WPT Floating button and popup.
require_once dirname(__FILE__) . '/wpt-floating-popup.php';

Save everything and reload some content on your site to make sure nothing’s broken.

The Back-end PHP Code

There’s not much to the PHP code so we’ll just replace the whole lot in one go. Open wpt-floating-popup.php and paste the following in it, replacing what was already in there:

<?php

/**
 * WP Tutorials Floating Button and Popup (WPTFLP)
 *
 * https://wp-tutorials.tech/add-functionality/floating-button-tutorial-for-wordpress/
 *
 */

// Block direct access.
defined('WPINC') || die();

/**
 * Hook the wptflp_enable_button filter and return "false" if you want to
 * disable the floating button and panel.
 */
function is_floating_popup_button_enabled() {
	return apply_filters('wptflp_enable_button', true);
}

/**
 * By default, this will return "panel-one.php" but you can hook the
 * wptflp_panel_file_name filter to change the file name of the panel on a
 * per-content basis.
 */
function get_floating_panel_name() {
	return apply_filters('wptflp_panel_file_name', 'panel-one.php');
}

/**
 * Enqueue the front-end assets.
 */
function wptflp_enqueue_scripts() {
	if (is_floating_popup_button_enabled()) {
		$theme_version = wp_get_theme()->get('Version');
		$base_uri = get_stylesheet_directory_uri();
		$handle = 'wptflp';

		wp_enqueue_style($handle,
			$base_uri . '/wpt-floating-popup/wptflp-public.css',
			null,
			$theme_version
		);

		wp_enqueue_script(
			$handle,
			$base_uri . '/wpt-floating-popup/wptflp-public.js',
			null,
			$theme_version
		);
	}
}
add_action('wp_enqueue_scripts', 'wptflp_enqueue_scripts');

/**
 * Render the always on-top floating button and the popup box (hidden) at the
 * end of the page's HTML, before the body tag is closed.
 */
function wptflp_render_button_and_popup() {
	if (!is_floating_popup_button_enabled()) {
		// The floating button is not enabled here.
	} elseif (empty($panel_file_name = get_floating_panel_name())) {
		// The panel file name is not specified.
	} else {
		// The floating button is actually a div.
		echo '<div class="wptflp-floating-button">';

		// If you want to customise the content of the floating button, change
		// this to whatever you want.
		echo '<i class="fas fa-info"></i>';

		echo '</div>'; // .wptflp-floating-button

		// This is the popup panel.
		echo '<div class="wptflp-floating-panel">';
		include dirname(__FILE__) . '/wpt-floating-popup/' . $panel_file_name;
		echo '</div>'; // .wptflp-floating-panel
	}
}
add_action('wp_footer', 'wptflp_render_button_and_popup');

<?php

// Block direct access.
defined('WPINC') || die();

?><div class="panel-title">My Panel</div>
<p>Lorem ipsum where no-one has gone before. Shields up, orange alert. Live
long and prosper. Resistance is futile. Set phasers to fabulous and attack.
There be whales here. Shut up, Wesley. Doctor to sick bay, report.
Beam me up, O'Brian.</p>

Save all that and reload the site. There’s no CSS/JS yet, so the HTML should just be tacked-on to the end of your site. If you view the page’s source code, you should see the HTML towards the end:

The Frontend CSS and JavaScript

Add the following into wpt-floating-popup/wptflp-public.css to get started with the layout.

/**
 * WP Tutorials Floating Button and Popup (WPTFLP)
 *
 * https://wp-tutorials.tech/add-functionality/floating-button-tutorial-for-wordpress/
 *
 */
.wptflp-floating-button {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background-color: green;
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 2010;
	font-size: 20pt;
	border: 2px solid black;
	box-shadow: 0 0 0.5em #0002;
	background-image: linear-gradient(to bottom right, #fff8, transparent 50%, #0004);
	cursor: pointer;
	transition: 0.3s filter;
}

.wptflp-floating-button:hover {
	filter: brightness(1.2);
}

.wptflp-floating-button>i {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: white;
}

.wptflp-floating-panel {
	width: 20em;
	background-color: green;
	color: white;
	position: fixed;
	right: 3.5rem;
	bottom: 2.5rem;
	z-index: 2000;
	transition: 0.5s opacity, 0.5s scale;
	transform-origin: bottom right;
	border: 2px solid #0004;
	border-radius: 0.5em;
	overflow: hidden;
	box-shadow: 0 0 1em #0004;
}

/* The popup panel when it's hidden */
.wptflp-floating-panel:not(.show-popup) {
	opacity: 0.0;
	scale: 0.0;
}

/* The popup panel when it's visible */
.wptflp-floating-panel.show-popup {
	opacity: 1.0;
	scale: 1.0;
}

/**
 * The popup panel contents.
 */
.wptflp-floating-panel .panel-title {
	padding: 0.5rem;
	background-color: #fff2;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1em;
}

.wptflp-floating-panel p {
	margin: 0 1em 1em 1em;
}

And now the code that makes it work in the browser. Edit wpt-floating-popup/wptflp-public.js and paste the following into it:

/**
 * WP Tutorials Floating Button and Popup (WPTFLP)
 *
 * https://wp-tutorials.tech/add-functionality/floating-button-tutorial-for-wordpress/
 *
 */
document.addEventListener('DOMContentLoaded', () => {
	'use strict';

	// Loop through each floating button on the page, although there should only
	// be a single instance..
	document.querySelectorAll('.wptflp-floating-button').forEach((element) => {

		// Listen for the "click" event on our floating cart button.
		element.addEventListener('click', (event) => {
			// Uncomment this to confirm that the click event is working.
			// console.log( 'Click' );

			// Get the instance of the button.
			const button = event.target.closest('.wptflp-floating-button');

			// We know that the popup panel DIV is the next element in the HTML,
			// so we can use nextSibling to get a handle ot it.
			const popup = button.nextSibling;

			toggleFloatingPanel(popup);
		});

	});

	function toggleFloatingPanel(element) {
		const isVisible = element.classList.contains('show-popup');

		if (isVisible) {
			element.classList.remove('show-popup');
		} else {
			element.classList.add('show-popup');
		}
	}
});

The JavaScript is really lightweight, and we’re going native – it’s not worth using jQuery for this little project.

Save all that and test it – you should have a functioning floating button with a pop-up box 😎.

Customising the Project

Customising the floating button itself is the easy. We’ve just used a Font Awesome icon here, but you could use an image/SVG, text, or whatever you want. Just make sure you keep the outer DIV’s CSS class as “wptflp-floating-button”, so we can reference it in the JavaScript code.

tipThe CSS is designed to work with a Font Awesome i element, so if you use an SVG (or something else) you’ll need to adjust the CSS to centre it.

By default, the pop-up button will be on every page of your site. If you just want to see it on certain pages, you could add something like this to functions.php:

/**
 * Conditionally show the floating button on specific content.
 */
function custom_wptflp_enable_button($is_enabled) {
	if (is_front_page()) {
		// Show the floating button on the front page.
		$is_enabled - true;
	} elseif (is_single()) {
		// Show the floating button on single posts.
		$is_enabled = is_single();
	} else {
		// Do not show the floating button on any other content.
		$is_enabled - false;
	}

	return $is_enabled;
}
add_filter('wptflp_enable_button', 'custom_wptflp_enable_button');

And finally, you can customise the contents of the pop-up panel itself by editing what’s in wpt-floating-popup/panel-one.php – easy peasy.

That’s all there is to it.

1. The PHP code renders the button and panel HTML.
2. The CSS places the button on-top and hides the pop-up panel.
3. The JavaScript adds and removes the “show-popup” CSS class to the popup-panel (when the floating button is clicked).

Have fun floating and popping-up 😎 👍

Like This Tutorial?

Upvote this tutorial ---

Downvote this tutorial ---

Let us know