Problem Description
#
Users want to change how the Back Button looks, adjust its color, center it, use an icon instead of “Back” text, but don’t find clear instructions, or customization doesn’t apply as expected.
Common symptoms:
- Button appears but uses default styling (not matching site theme).
- Shortcode output shows plain text rather than styled button.
- Attempts to center the button or change its color have no effect.
- Icons (via Font Awesome) not rendered properly (e.g. small square placeholder instead of icon).
Typical causes:
- The free version offers only basic styling; advanced placement or style tweaks might require custom CSS.
- Users rely on theme or page builder styles that override plugin output.
- Missing or incorrectly configured shortcode attributes (e.g. forgetting style attribute or icon template).
- Font Awesome conflict or not loaded properly.
Solution-step-by-step:
- Use shortcode with style or class attributes
Example:
[alg_back_button style=”background-color:#007BFF;color:#ffffff;padding:10px 20px;border:none;border-radius:4px;” label=”Back”]
For icon + text: use plugin’s fa and fa_template attributes (supported since recent versions). Example:
[alg_back_button fa=”fas fa-chevron-left” fa_template=”%icon% Back” class=”my-back-btn”]
“` :contentReference[oaicite:15]{index=15}
2. Add custom CSS if needed
If you need more control (centering, margins, responsive behavior), target the class or button markup in your theme’s CSS or custom CSS file. For example:
.my-back-btn {
display: block;
margin: 0 auto;
text-align: center;
}
- For floating buttons (Pro), use the floating-button margin settings in plugin settings; otherwise, CSS may be required. WPFactory+1
3. If Font Awesome icons appear as small squares
-
- Ensure Font Awesome library is loaded. In plugin settings, if there is an option “Load Font Awesome,” enable it. WordPress.org+1
- Alternatively, if your theme or another plugin already loads Font Awesome, disable the plugin’s own loading to avoid conflicts.
4. Test after changes
-
- Clear browser and site caches, then view the page. If using a page builder or block-based theme, test on both frontend and backend to ensure consistent rendering.
Prerequisites
- WordPress + plugin up-to-date (version 1.7.1 latest as of 2025). WordPress.org+1
- If using icons: ensure Font Awesome is properly loaded.
Additional Notes / Prevention Tips
For themes with heavy styling overrides, plan your CSS customizations in a child theme or custom CSS area so they persist through updates.
Document your custom CSS style or classes so other admins know how to manage them.