Skip to main content

Redirect

Due to limitations in our S3 hosting, we do not have access to an advanced routing and redirecting engine. As a result, redirects are executed using JavaScript from the 404.html page.

Code Structure

The 404.php file shares code with the page located at /redirect-404/, which utilises the page-redirect-404.php template. This shared code resides in /includes/redirect.php. This setup is necessary because Sitesucker cannot capture a 404 page. By using this structure, we can demonstrate most of the 404 functionality within the WordPress environment and also generate a page that can be extracted by Sitesucker. During publishing, this page is renamed to 404.html and becomes the place to handle 404 errors.

Redirect.php tasks

The redirect.php file has two primary functions:

  1. To construct the redirect array from the admin page setup.
  2. To display the 404 page, attempting to match the unresolved path to an entry in the redirect array and redirect the user to the new page.

Building the Redirect Array

1. my_redirects_menu

The my_redirects_menu function adds a new menu item called "Redirects" to the dashboard. When accessed, it calls the my_redirects_page function.

2. my_redirects_page

This function is extensive and manages the display of the my_redirects array. It provides an interface to add or remove entries and allows multiple entries to be uploaded via a CSV file. The steps are as follows:

  • It checks if form data has been submitted, verifies the request, and processes each pair of old and new paths, storing them in the my_redirects array.
  • It then checks for a CSV upload, verifies the request and file, and processes each pair of URLs, updating my_redirects. If an old URL in the CSV matches an existing entry, the new path from the CSV replaces the existing one.
  • The third step involves sorting the my_redirects array alphabetically by the old path before presenting the form and table that display the my_redirects array.

The table includes input fields for old and new paths. Users can add new redirects by clicking a button that inserts a new row, and they can delete entries by clicking a "Delete" link. The form also includes an interface for bulk uploading redirects via a CSV file, with instructions on the required format. JavaScript functions dynamically add rows, update the redirect count, and handle row deletions.

The CSV file should have old and new paths separated by a comma, with each entry on a new line:

/gonzo, /the-great-gonzo/
/kermit, /the-frog/
/scooter, /backstage-help/
    

Display the 404 Page

The function output_redirect_404_script_and_html displays the 404 page, attempts to match the unresolved path to an entry in the redirect array and redirect the user to the new page.

Building the redirect array

The function retrieves an array of URL redirects from a WordPress option named my_redirects.

It then builds a JavaScript array urlMappings containing objects with oldPath and newPath properties for each redirect.

HTML Structure

The function then outputs CSS to initially hide two containers: redirect-container and four-oh-container.

  • #redirect-container has a message indicating that the page has been archived and a redirect will occur.
  • #four-oh-container has a 404 error message, a search bar, and a link to browse keywords.

The function then outputs script to try and match the unresolved path to an entry in the redirect array and redirect the user to the new page or display the 404 message.

JavaScript logic

The main() function orchestrates the redirect logic. It:

  • Ensures the current URL has a trailing slash - ensureTrailingSlash()
  • Extracts and normalises the path from the current URL - extractAndNormalisePath()
  • Processes old site links - processOldSiteLinksAndRedirect(). These take the form /content/page-name.html. These are changed to /page-name/ and then redirected.
  • If no redirect occurs from old site links, it searches for a matching URL mapping in urlMappings.
  • If a match is found, it constructs the new URL, displays the redirect message, and initiates the redirect.
  • If no match is found, it displays the 404 message.

Keywords