This post about creating a 403 error page template is kind of a follow on from my recent post about how to disable directory listing in WordPress. In that guide I talk about locking down the potential security risk of leaving your directories visible. The result of following the guide means that your directory listings will be hidden and replaced by a 403 error.
The 403 error is an HTTP status code that occurs when you try to access a URL the hosting server does not allow. The server effectively acknowledges the URL exists, but doesn’t permit you to see it. In terms of disabling directory listings this is great. However, it’s perhaps not the most slick experience for anyone who accidentally hits a 403 error on your domain.
For example, a common default 403 error page often looks like this:
It doesn’t explain what has happened and neither does it give you a route back to your WordPress blog.
What follows then is a super-simple way to create a basic custom 403 error page template for your WordPress blog, so you can give visitors instead a little more detail about what to do next.
A Note on Your Host & 403 Errors
It may be that your hosting provider has configured a 403 error page out of the box. For example, I use SiteGround and the default 403 error page for me is this:
It provides basic information but no link back to my blog. My 403 template will also be basic, but you’ll be able to edit it as you’d like with your own HTML and CSS.
For me personally I am happy to have a basic page since most people trying to access a page that leads to a 403 error are probably not your average site visitor (i.e. they might be probing your site for a vulnerability).
Creating a WordPress 403 Error Page Template
I mentioned this is very simple… and it is: there are only two steps! However, you will need to be comfortable working in the control panel of your hosting server. SideGains is hosted on a SiteGround server and so I use cPanel for this example. You might use something else such as DirectAdmin or Plesk… it depends on who your host is. However, the steps should be very similar.
Step 1 – Creating Your 403 Template
The first step is to create a new error template file in which we’ll add the 403 message.
Click the File Manager tool in your cPanel dashboard to view all the files in your home directory.
Note: Your file manager may have a different name in DirectAdmin or Plesk.
You are now looking at the files on your server. Make sure you are in the home directory of your WordPress installation. If you’re unsure which is your home directory, you should see the WordPress directories wp-admin, wp-content, wp-uploads etc. For most people it will be /public_html.
We are going to create your 403 error page template so click on the new file icon to create your template file:
You’ll get a pop-up dialogue box in which you’ll input the name of the file you’re making. Call this file error.php as in the below image:
You should now see your error.php file in your File Manager listings. Right click on it and select “Edit” or “Code Edit” (they both do the same thing, but one of them gives you line numbers).
When the file editor opens you’ll see a blank page. You’re going to copy and paste the following code into your error.php file.
The 403 Error Page Code
<?php
$page_redirected_from = $_SERVER['REQUEST_URI'];
$server_url = "https://" . $_SERVER["SERVER_NAME"] . "/";
$redirect_url = $_SERVER["REDIRECT_URL"];
$redirect_url_array = parse_url($redirect_url);
$end_of_path = strrchr($redirect_url_array["path"], "/");
switch(getenv("REDIRECT_STATUS"))
{
# "400 - Bad Request"
case 400:
$error_code = "400 - Bad Request";
$explanation = "The syntax of the URL submitted by your browser could not be understood. Please verify the address and try again.";
$redirect_to = "";
break;
# "401 - Unauthorized"
case 401:
$error_code = "401 - Unauthorized";
$explanation = "This area requires a password or is otherwise protected. If you feel you have reached this page in error, please return to the homepage and try again, or contact the webmaster if you continue to have problems.";
$redirect_to = "";
break;
# "403 - Forbidden"
case 403:
$error_code = "403 - Forbidden";
$explanation = "This area requires a password or is otherwise protected. If you feel you have reached this page in error, please return to the homepage and try again, or contact the webmaster if you continue to have problems.";
$redirect_to = "";
break;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<?php
if ($redirect_to != "")
{
?>
<meta http-equiv="Refresh" content="5; url='<?php print($redirect_to); ?>'">
<?php
}
?>
<title>Page not found: <?php print ($redirect_to); ?></title>
</head>
<body>
<h1>Error Code <?php print ($error_code); ?></h1>
<p>The page you requested was not found. <?PHP echo($explanation); ?></p>
<p>You may want to try starting from the home page: <a href="<?php print ($server_url); ?>"><?php print ($server_url); ?></a></p>
<hr />
<p><i>A project of <a href="<?php print ($server_url); ?>"><?php print ($server_url); ?></a>.</i></p>
</body>
</html>Click the “Save” button and then click “Close” and you’ll have just created the 403 error page template. Incidentally I’ve also added rules for 400 (Bad Request) and 401 (Unauthorized) into this to present messages for these errors too.
Now we have to instruct your server to refer these errors to your error.php page.
Step 2 – Editing Your .htaccess File for a 403 Redirect
If you haven’t come across .htaccess is, or don’t know where to look for it on your server, I’ve posted about it here: Can’t Find Your .htaccess File? Here’s What to Do.
The .htaccess file is a configuration file that instructs a server how to handle certain requests. We’re going to use it in this case to tell it how to handle a 403 error.
You can find .htaccess in your home directory using the cPanel File Manager. This is the directory where you installed WordPress… for most people it will be /public_html.
Because .htaccess is a “hidden” file you may not see it. If you can’t see it in your home directory, visit my “Can’t Find Your .htaccess File?” post for instructions on how to make it visible.
When you’ve located your .htaccess file, the first thing you’re going to do is make a back up copy. .htaccess is a VERY important file and if it somehow gets broken when you edit it, you’re going to need to be able to swap it with your back up copy.
So… when you’ve located .htaccess, right click on it and make a duplicate (call it something like BKUP.htaccess_BKUP so you know what it is). If you get into any trouble you can simply delete your corrupt .htacces and make a duplicate copy of your BKUP.htaccess_BKUP, but call it .htaccess to replace the one you deleted.
Once you have your back up copy, you can safely edit your .htaccess file. So right click on it and select either the “Edit” or “Code Edit” option.
You’re going to add 3 lines to .htaccess beneath the last entry in the file. These lines are:
ErrorDocument 400 /error.php
ErrorDocument 401 /error.php
ErrorDocument 403 /error.phpThis tells your server to forward requests for 400, 401 and 403 errors to your error page template.
Be sure to leave a blank line at the end of the file (this is important) and click “Save”. When the file is saved, close the window.
Checking Your 403 Error Page Template is Working
The next step is to check that everything is working as it should be. You can do this simply by trying to visit your wp-content/uploads directory. For me I would visit:
https://www.sidegains.com/wp-content/uploads/
And this is the 403 error page template realized in a browser:
That’s it! You can of course modify error.php to customize it further, but this basic message is sufficient to give a brief explanation of why this page says what it says and provide people with a way back to your homepage.
Please leave me a comment below if you’ve implemented this or if you need further information about setting up a 403 error page template for your WordPress blog.
Leave a Reply