---
title: How to Add a Floating Back Button
description: Add a floating back button to WordPress that stays on screen while visitors scroll. A Pro feature, with options and styling.
url: "https://wpfactory.com/docs/add-floating-back-button/"
updated: "2026-09-27"
category: Pro Features
---

# How to Add a Floating Back Button

To pin a back button on screen so it stays reachable while visitors scroll, use the Floating Button Options section in [Back Button Anywhere Widget for WordPress](https://wpfactory.com/item/back-button-widget-wordpress-plugin/). This is a Pro feature: it adds a fixed button in one of the four corners of the page, with margins you control.

![Floating Button Options section of the Back Button Widget settings](https://wpfactory.com/wp-content/uploads/Floating-Button-Options.png)

### Before you start

- [Back Button Anywhere Widget for WordPress](https://wpfactory.com/item/back-button-widget-wordpress-plugin/) Pro, activated.
- A theme that calls `wp_footer()` (nearly all standard themes do). The floating button is printed on that hook.

### Step-by-step setup

1. Go to **WPFactory > Back Button** and open the **Floating Button Options** section.
2. Set **Enable section** to **Yes**.
3. Set the **Label** (leave empty to use "Back").
4. Pick a **Position**: bottom right, bottom left, top right, or top left.
5. Set the **Horizontal margin** and **Vertical margin** in pixels (both default to 40).
6. Save changes and view any page. The button stays fixed in the chosen corner.

### Options reference

| Label | Option ID | Default | Free/Pro |
| --- | --- | --- | --- |
| Enable section | `floating_button_enabled` | No | Pro |
| Label | `floating_button_label` | Back | Pro |
| Position | `floating_button_position` | Bottom right | Pro |
| Horizontal margin | `floating_button_h_margin` | 40 (px) | Pro |
| Vertical margin | `floating_button_v_margin` | 40 (px) | Pro |
| Set as shortcode | `floating_button_shortcode_enabled` | No | Pro |
| Shortcode | `floating_button_shortcode` | `[alg_back_button label="Back" type="button" class="alg_back_button_floating"]` | Pro |

### Advanced styling with a shortcode

By default the floating button uses the Label field. For full control, set **Set as shortcode** to **Yes** and enter your own shortcode in the **Shortcode** field. When this is on, the Label field is ignored.

**Important:** your custom shortcode **must** include the `alg_back_button_floating` class, because that class carries the fixed positioning. For example: `[alg_back_button label="Back" type="button" class="alg_back_button_floating my-style"]`.

### How the positioning works

The floating button is placed with `position: fixed` and a high `z-index`, offset from the chosen corner by your margins. Add an icon or extra styling through the custom shortcode, or target the `alg_back_button_floating` class in your own CSS.

### Troubleshooting

- **Button not visible:** confirm Enable section is Yes and that your theme calls `wp_footer()`.
- **Off screen:** reduce the horizontal or vertical margin.
- **Custom shortcode not floating:** it is missing the `alg_back_button_floating` class.

### Ready to set this up?

The floating button is a Pro feature of [Back Button Widget](https://wpfactory.com/item/back-button-widget-wordpress-plugin/). Upgrading takes a couple of minutes and unlocks it along with menu placement and hide/show rules. [Get Back Button Widget Pro](https://wpfactory.com/item/back-button-widget-wordpress-plugin/).

Related articles

- [How to Add the Back Button to a WordPress Menu](https://wpfactory.com/docs/add-back-button-to-wordpress-menu/)
- [How to Add a Font Awesome Icon to the Back Button](https://wpfactory.com/docs/add-font-awesome-icon-to-back-button/)
- [How to Hide or Show the Back Button by Page or URL](https://wpfactory.com/docs/hide-or-show-back-button-by-url-or-page/)
- [Back Button Widget: Free vs Pro Versions Compared](https://wpfactory.com/docs/pro-vs-free-versions-back/)
- [Back Button Widget Pro for WordPress](https://wpfactory.com/docs/back-button-widget-pro/)