clubmate.fi

A good[ish] website

Web development blog, loads of UI and JavaScript topics

How to do a back link with JavaScript (and PHP)

Filed under: UI components— Tagged with: php

Some users ignore the back button, maybe all of us every now and then. Sometimes a big and juicy BACK button gives you a nice "I’m not lost after all" feel.

The simplest way

You could use an anchor and run JavaScript in the href attribute:

<a href="javascript: history.back()">Go back</a>

But that’s pretty archaic. You could use a button add an onclick event listener and then use the history API to go back to the previous page:

<button onclick="window.history.back()">Go back</button>

But that’s pretty obtrusive, it won’t work if JavaScript is disabled, and the button still sits there doing nothing. This might, or might not be a problem for you.

Back button with pure JavaScript

We need a place to put the back button, just an empty div in this example case:

<div id="wrap"></div>

Then the following JavaScript will create the button and add the click listener to it, this way the back button only appears on the page if JavaScript is on:

// Grab the wrap element
const wrap = document.getElementById('wrap')
// Create the element
const backButton = document.createElement('button')
// Create the content
const backContent = document.createTextNode('Go back')
// Put the content into the button
backButton.appendChild(backContent)
// Add className to the button (optional)
backButton.classList.add('my-back-button')
// Put the button into the DOM
wrap.appendChild(backButton)
// Add the click listener to the button
backButton.addEventListener('click', () => window.history.back())

Making elements with vanilla JavaScript is maybe a bit on the verbose side.

Back button with jQuery

You can add the whole button with jQuery, then you only have it if JS is enabled:

jQuery(document).ready(function () {
  $('.back-button').html(
    '<button onclick="window.history.back()">Go back</button>'
  )
})

Now it’s there only if the user has JS enabled.

Back button with PHP

Why not do it server side, works in every case. Here is a PHP solution using the HTTP_REFERER:

$go_back = htmlspecialchars($_SERVER['HTTP_REFERER']);
echo "<a href='$go_back'>Go Back</a>";

More feature packed version

But, what if the user comes from a search engine or from a link and gets thrown of your site with the back button? We can check if the $go_back variable contains your site name:

$go_back = htmlspecialchars($_SERVER['HTTP_REFERER']);

// Has your site name in it
if (preg_match('/clubmate.fi/', $go_back)) {
  echo "<a href=" . $go_back . ">Go Back with PHP, only your site</a>";
} else {
  // Go home instead
  echo "<a href='http://clubmate.fi'>Go Back home</a>";
}

Remember that the code after the else doesn’t take the user "back", but to home, it’s good practice to call things exactly what they do.

Make it into a function

Here’s a simple function that used on WordPress site:

/**
 * Returns a URL to the page where user was before this page
 * @param  string $domain        The sites domain name
 * @param  string $exeption_path The path to go to if not referer is not your site
 * @return string                URL string
 */
function pps_back_href($domain, $exeption_path) {
  // Get the referer, aka where user comes
  $referer = htmlspecialchars($_SERVER['HTTP_REFERER']);
  // Regex pattern
  $match_pattern = "/$domain/";
  // Has your site name in it
  if (preg_match($match_pattern, $referer)) {
    return $referer;
  } else {
    // Where to go if the referer is not from your domain
    return $domain.'/'.$exeption_path;
  }
}

Then use it like:

<a href="<?php pps_back_href(get_home_url(), get_post_type()) ?>">
  &larr; Back to list
</a>

If the referrer is not your site, then it takes you back to the custom post type archive page.

Comments would go here, but the commenting system isn’t ready yet, sorry.