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: JavaScript, php— Tagged with: UI components

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

// 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 kind of verbose.

Back button with jQuery

You can add the whole button with jQuery in this case, then you only have it if JS is enables:

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. Tweet me @hiljaa if you want to make a correction etc.