How to Add a Go Back to Previous Page Button in WordPress (2 Easy Methods)

In this tutorial, I will guide you through the process of adding a "Back to Previous Page" or " Go Back" button using ElementorThis site use affiliate links to promote recommended product and services and Gutenberg/ Block Editor.

Method 1: Adding "Go Back" Button Using Elementor

Ensure that you have ElementorThis site use affiliate links to promote recommended product and services installed and activated on your WordPress site.

Step 1: Locate the Button Widget in Elementor

1. Login to your WordPress admin dashboard.
2. Navigate to the page where you want to add the "Back to Previous Page" button.
3. Edit the page using ElementorThis site use affiliate links to promote recommended product and services.
4. 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

1. Click on the added Button widget.
2. In the left sidebar, go to the "Advanced" tab.
3. Locate the "CSS ID" field and enter a unique identifier, such as 'go-back'.
4. Save the changes made to the Button widget.

Step 3: Add an HTML Widget in Elementor

1. Go back to the Elementor editor.
2. 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:

<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:

1. Install and activate the "Insert Headers and Footers" plugin.
2. Go to "Settings" in the WordPress admin menu and click on "Insert Headers and Footers."
3. Paste the JavaScript code into the "Scripts in Footer" box.
4. 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.

Method 2: Adding "Go Back" Button Using Gutenberg Block Editor

In this part of tutorial, I'll guide you through the process of adding a "Back to Previous Page" button using the Gutenberg editor, offering an alternative solution to Elementor users.

Prerequisites:

Ensure your WordPress site is using Gutenberg (WordPress 5.0 or later).

Step 1: Create a New Page/Post or Edit an Existing One

1. Log in to your WordPress admin dashboard.
2. Create a new page/post or edit an existing one where you want to add the "Back to Previous Page" button.

Step 2: Add a Button Block

1. Inside the Gutenberg editor, click on the '+' icon to add a new block.
2. Search for the "Button" block and add it to your content.

Step 3: Configure the Button Block

1. Select the added Button block.
2. In the right sidebar, configure the button settings.
3. Enter the button text (e.g., "Back").
4. Optionally, add a link or leave it blank.

Step 4: Add Custom CSS Class to the Button Block

1. Scroll down to the "Advanced" section in the right sidebar.
2. Find the "Additional CSS Class" field and enter a custom class, e.g., 'go-back-btn'.
3. Update the page/post to save your changes.

Step 5: Add an HTML Widget

1. Click on "+" icon.
2. Find and add the "HTML" widget to your desired location or exactly under the button on the same page.

Step 6: Insert Following JavaScript Code

Paste the following JavaScript code into the HTML widget:

<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.

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

If you prefer a plugin-based approach:

1. Install and activate the "Insert Headers and Footers" plugin.
2. Go to "Settings" in the WordPress admin menu and click on "Insert Headers and Footers."
3. Paste the JavaScript code into the "Scripts in Footer" box.
4. Click on the "Save" button to save your changes.

You've successfully added a "Back to Previous Page" button using the Gutenberg editor in WordPress. This straightforward solution enhances user navigation on your site. Test the button to ensure it works as expected, providing a smooth user experience.