How to Add a Go Back to Previous Page Button in WordPress

Introduction

In this tutorial, I will guide you through the process of adding a “Back to Previous Page” or ” Go Back” button using Elementor and Jquery.

Ensure that you have Elementor installed and activated on your WordPress site.

Step 1: Locate the Button Widget in Elementor

Login to your WordPress admin dashboard.
Navigate to the page where you want to add the “Back to Previous Page” button.
Edit the page using Elementor.
In the Elementor editor, find and add the “Button” widget to your desired location on the page.

Step 2: Configure the Button Widget’s Advanced Tab

Click on the added Button widget.
In the left sidebar, go to the “Advanced” tab.
Locate the “CSS ID” field and enter a unique identifier, such as ‘go-back’.
Save the changes made to the Button widget.

Step 3: Add an HTML Widget in Elementor

Go back to the Elementor editor.
Find and add the “HTML” widget to your desired location or exactly under the button on the same page

Step 4: Insert JavaScript Code

Paste the following JavaScript code into the HTML widget:

JavaScript

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#go-back').on('click', function() {
            window.history.go(-1);
            return false;
        });
    });
</script>

This script uses jQuery to detect a click on the button with the ID ‘go-back’ and triggers the browser’s history to go back by one step.

4.1: Alternatively, Use a Plugin (Both for Elementor & Gutenberg)

If you prefer a plugin-based approach. I recommend to use this method:

Install and activate the “Simple Custom CSS and JS” plugin.
Go to “Simple Custom and Js” in the WordPress admin menu and click on “Add custom js“ option.
Write the name of the js code in title bar.
Paste the JavaScript code into the “Snipt code area” box.
Click on the “Save” button to save your changes.

Congratulations! You’ve successfully added a “Back to Previous Page” button to your WordPress site using Elementor. This simple addition can significantly improve user navigation and overall user experience on your website. Test the button to ensure it functions as expected and provides users with a seamless browsing experience.

Check our Services for any type of projects.

Chekout our profile on fiverr.

View Profile

Blog Details