Most of the time, we use the browser’s built-in back button. However, some system interactions are clunky, and adding a dedicated “Back” button on the page can significantly improve the user experience.

First, go to the WordPress dashboard and navigate to Appearance -> Customize.

Find the Additional CSS option on the left side (usually at the bottom).

Enter the following code:

1
2
3
4
5
6
7
8

.float-button {
position: fixed;
height: 90px;
width: 40px;
bottom: 90px;
right: 50px;
/* You can adjust these values yourself */
}

After saving, you need to edit the theme files.

If you don’t have server access, you can use the Theme Editor under Appearance in the WordPress dashboard to find and modify the relevant template.

If you have server access, navigate to /wp-content/themes/<your-theme-name>/ and open the appropriate file for editing.

Simply insert the following code into the page file and save:

1
2
3
4

<div class="float-button">
<input type="button" name="Submit" value="Back" onclick="javascript:history.back(-1);">
</div>
<!-- Customize as needed -->

References

Several implementation codes for “Back to Previous Page” on a web page

div tricks: floating buttons