Custom 404 Page For WordPress

Normally when setting up a custom 404 page you just need to create your page, save it as 404.shtml, plop it in your main directory and voila! It’s all good.

Or do the redirect in your .htaccess file:

ErrorDocument 404

But no matter what I tried, or how much hair I pulled – I could not get the sucker to work on this blog. I think it’s partly due to the permalink structure I’m using, maybe the WP version 2.01 has a configuration somewhere too that I was fighting against.

So here’s what I did:

  • Open the blog theme’s index.php page
  • Copy all contents and paste to a new file
  • Save that file as 404.php
  • Delete everything between <div id=”content”> and </div> (or whatever the post’s content div class is named)
  • Rename div id=”content” to div id=”content404″
  • Within the content404 div in 404.php, add the information you want on your custom 404 page
  • In the style.css file, play with the formatting of the div until it displays the way you want
  • Upload both 404.php and the updated style.css files

Here’s what the error page for SuperAff looks like:
*sorry it’s not clickable – I don’t want to point to a live error page

The plugin I used for the archive list was Smart Archives for WordPress. A few tweaks were involved, but it’s easy enough to work with.

By copying the blog theme’s index.php and altering it a bit for the 404.php, if I add anything to my sidebars (header, footer or any .css changes for the main template), it will update on the 404.php as well since I’m still pulling the same includes as the main blog template.

Pretty hands free once it’s set up.

ETA: Whoops! I forgot to give a hat tip to the WordPress Codex for the tip: Creating An Error 404 Page


I've been trying to find my way online for more years than I care to admit.