How to set up a custom 404 page

By Kieran Hunter

404 pages are those ugly error pages that pop up when you visit an invalid link on a site. Like if an old page has been deleted but theres still a link somewhere out there, it will return a 404 error page.

But, with divine power we have the ability to change these to a custom page of our own, it could be absolutely anything, but it's good to let the user know that it's still a 404 error page.

Some sites re-direct an invalid link back to the home page, I see this as bad practice as some users won't know why they're seeing the home page, instead of the link they chose to visit.

Two things we need to set up to build our custom, and lets not forget, responsive (of course) 404 page, and that's a 404.php file (can be any name), and a line in the .htaccess to re-direct 404 errors to this specific page.

Ill be using my own 404 page as an example. To visit a sites 404 page just type something in the URL that you know wont be used like.. http://kieranhunter.co.uk/thislinkwillneverbeinuse

Custom 404 error page design

.htaccess

Add this line to your .htaccess file, if you don't have one, just create a file in your root and name it .htaccess (don't forget the dot). This re-directs the 404 error to a custom file, in this case 404.php.

ErrorDocument 404 /404.php

404.php

<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="robots" content="noindex,nofollow" />

	<!-- CSS -->
	<link href="/css/style.min.css" rel="stylesheet">

	<title>Are you lost? 404 Error</title>

</head>
<body class="fourohfour">

	<div class="container content">
		<div class="row">
			<h1>Are you lost?</h1>
			<p>Page wasn't found.</p>
			<br>
			<a href="/" class="button">Lets go home</a>
			<br>
		</div>
	</div>

	<span>404 error</span>

</body>
</html>

The CSS

.fourohfour {
	text-align:center;
  background: url(../img/four-bg.jpg) center top no-repeat;
}
.fourohfour {
	color:#5EA1D2;
}
.fourohfour  h1 {
	color:#fff;
  margin:0 0 10px;
}
.fourohfour p {
  color:#fff;
  font-size:.75em;
}
.fourohfour .container,
.fourohfour span {
	position: absolute;
	top:50%;
	left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.fourohfour span {
  text-transform: uppercase;
  font-size:1.25rem;
  letter-spacing: 1px;
  color:#fff;
  background: rgba(255,255,255,.25);
  padding:4px 16px;
  border-radius:3px;
  top:initial;
  bottom:25px;
}

So I have a large background image that fills the page, and everything else is centered perfectly in the middle, with that all important button, linking back to the home page. It's very simple, but beautiful and effective just how the web should be.

Leave a comment