View Categories

How to Customize the Back Button (Color, Style, Position, Icon)

You can restyle the button from Back Button Anywhere Widget for WordPress without editing plugin files, using the widget fields, shortcode attributes, and a little CSS. Settings referenced are under WPFactory > Back Button.

Common symptoms #

  • The button uses default styling that does not match your theme.
  • The shortcode outputs plain text instead of a styled button.
  • Centering or color changes have no effect.
  • A Font Awesome icon shows as a small square.

1. Set color and style with the shortcode #

Use the style and class attributes to control appearance:

[alg_back_button label="Back" style="background-color:#007BFF;color:#ffffff;padding:10px 20px;border:none;border-radius:4px;"]

The widget has the same controls: Button HTML style and Button HTML class. Set Button type to Button for a form button, or Simple text for a text link.

2. Add an icon #

Use the fa and fa_template attributes for an icon with text:

[alg_back_button fa="fas fa-chevron-left" fa_template="%icon% Back" class="my-back-btn"]

Font Awesome is a free feature. If the icon shows as a square, the library is not loaded, so enable Load in the Font Awesome section (or, if your theme already loads Font Awesome, leave Load off to avoid a conflict). See Font Awesome icon not showing.

3. Position and center with CSS #

For layout tweaks such as centering, target your class in the theme’s custom CSS:

.my-back-btn {
  display: block;
  margin: 0 auto;
  text-align: center;
}

4. Position a floating button (Pro) #

For the floating button, use Floating Button Options: pick one of the four corners and set the Horizontal and Vertical margins (both default to 40 px). If it lands off screen, reduce the margins. For advanced styling, enable Set as shortcode and supply your own [alg_back_button ...] that keeps the alg_back_button_floating class.

5. Test after changes #

Clear your browser and site caches, then check the page. On a block theme or page builder, verify the result on the front end.

Tip: keep custom CSS in a child theme or the Customizer’s Additional CSS box so it survives plugin and theme updates.

Need a hand? #

Our team answers every ticket on the Back Button Widget support forum.

 

Back Button Widget for WordPress