eFrog Digital Design |

Having a creative 404 page is always fun. Site developers end up spending a lot of time coming up with something awesome because if they nail it, it always get a lot of attention (read: traffic). Whether it be a funny graphic, a , or some other geeky message, spending time on your 404 page design is worth the effort.

That said however, simply building that page from an aesthetic point of view doesn’t solve the underlying problem – someone landed on a bad link on your site. Somewhere out on the interwebs, there’s a link pointing to a non-existent page on your site.

Today we’re going to show you how to make a useful 404 page. Useful to both the user landing on that page, and to you – the site owner.

Here’s our final product:

Nothing exceptionally fancy – just a few loops to take people to other places in your site. The real magic however, happens in the background. When this page is triggered, an email is sent to the owner of the site with the details of the visit. It highlights the referring URL (ie what site is pointing to this bad link) as well as a legible dump of the $_SERVER value that’ll give you some extra information about the user that visited this page.

Let’s get to it. Firstly, lets skim over the 3 loops that we use:

The first loop gets our last 5 posts from the blog. The second loop fetches 5 of our categories. The last block shows our menu navigation as set in our WP Admin.

Let’s make it pretty:

And that’s pretty much that. What the user sees when he lands on this page is now sorted. You of course might want to tap your funny bone for something humorous to add in here – the sky’s the limit really. But from a functional point of view, the user has some options when he lands on a bad link.

Now let’s get to the email that gets sent.

Firstly, we set the referring URL into a variable along with a fallback in case there is no referring URL present.

Next, we set another variable that’s filled with a readable version of the $_SERVER dump

We want to be able to send this email with some HTML elements, so lets turn on HTML formatting. Note: We’re using the wp_mail() function to do the sending of this mail, so we use a WordPress filter to turn this on.

Now we want to start editing the settings of our actual email. We start with the to and from information…

… and the headers …

… and then the subject …

Right! The second last step is set what the email actually says

You can of course tailor this however you want it, but basically this gives us all the information we captured about the triggering of this 404 page.

Lastly, we do the obvious: send it.

Note: All this code is placed directly into your 404.php template.

Done! Not too difficult hey?

Let us know if you’ve implemented this and how you improved it to provide a heplful 404 page.