Customize Thesis: Creating Useful 404 Pages

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Sharing is caring!

Last Updated on August 6, 2019

This tutorial is for those lucky users who run their sites on WordPress using the Chris Pearson’s Thesis Theme. If you haven’t learned about Thesis take a few minutes to visit our review of the Thesis WordPress theme.

If you don’t own Thesis you can probably pick up a few tips from this tutorial it just won’t be as easy for you to implement!

Web Designers everywhere have a love hate relationship with them. We are talking about 404 pages. It isn’t uncommon to see a witty 404 page. Heck its better than the standard 404 page offered by Internet Explorer or Firefox. For examples of 404 pages check out Smashing Magazine’s list of 404 pages.


The above 404 page is from Jamie Huskisson.

What about functionality?

Trendy and hip are great but what if you also want a functional 404 page that lets you, the webmaster know when a page is broken?

Well wordpress to the rescue! Thanks to the great code offered on the Creating an Error 404 page, we can do just that! This code allows WordPress to generate a page that helps the user by displaying a search box. It will also email you if they arrived to the 404 page via a broken link.

We at love this code because it helps you keep track of your broken pages. It also lets you know which ones to fix, but it does need some improvement.


For some reason if you do any type of css editing using firebug and web developer, you will end up with a mess of emails in your inbox. To fix this we will want to add code which will help keep your IP address from sending these emails.

We also feel there aren’t enough clickable options for the users, so we will also want to display the homepage and some of the most recent posts to the user, so they can leave the page quickly. Our goal is to keep them on our site, not go back where they came from.

Finished Product

Please Note This is an Old tutorial. The examples used have changed.

Here is a quick snapshot of what we will be making.

User 404 Error Page:


Admin 404 Error Page:


Thesis Integration

So know that you’ve seen what we are making lets get started. Thesis by default offers a custom 404 page, but what if you want to take it to the next level? Well a few months ago Sugarrae offered a post on customizing thesis’ 404 pages. This post is great as it exposes you to the hooks associated with developing a custom 404 page but we are going to take it to the next level by implementing these improvements and adding a clean design.

Step 1 – Caution Image

Download the caution icon by right clicking and selecting save as.


Next drop it into your custom folder. (This folder can be found at /wp-content/themes/thesis_XX/custom/).

This image will be used as a visual notification that they have reached a 404 page.

Step 2 – Bulk of the Code

Now that you are in the custom folder find your custom_functions.php lets add the bulk of the code. This code has been customized to include the improvements that we mentioned above.

Copy and paste the following code into the custom_functions.php file.

function custom_thesis_404_title() {
		This Page has Eluded You or is No Longer Here.
remove_action('thesis_hook_404_title', 'thesis_404_title');
add_action('thesis_hook_404_title', 'custom_thesis_404_title');

function custom_thesis_404_content() {
$YourIP = array('',''); /* Add your IP Address Here*/
	if (!in_array ($_SERVER['REMOTE_ADDR'], $YourIP)) {
        <div id="errorpage">
        <img src="<? bloginfo('template_directory')?>/custom/404.gif" alt="404 Error" title="404 Error"/>
        <div id="error-inside">
        $adminemail = get_bloginfo('admin_email');
        $website = get_bloginfo('url');
        $websitename = get_bloginfo('name');
          if (!isset($_SERVER['HTTP_REFERER'])) {
                echo "tried going to ";
            $casemessage = "All is not lost!";
          } elseif (isset($_SERVER['HTTP_REFERER'])) {
            echo "clicked a link to";
            $failuremess = "A user tried to go to $website"
                .$_SERVER['REQUEST_URI']." and received a 404 (page not found) error. ";
            $failuremess .= "It wasn't their fault, so try fixing it.
                They came from ".$_SERVER['HTTP_REFERER'];
            mail($adminemail, "Bad Link To ".$_SERVER['REQUEST_URI'],
                $failuremess, "From: $websitename <[email protected]$website>");
            $casemessage = "An administrator has been emailed
                about this problem, too.";          }
          echo " ".$website.$_SERVER['REQUEST_URI']; ?>
        and it doesn't exist. <?php echo $casemessage; ?>  You can click back
        and try again or select from the options below. If you are interested in learning how to make a 404 page visit's <a href="">thesis 404 page tutorial</a>.      </p>

        <h2>Quick Links</h2>
        <ul id="recententries">
        <li><a href="<?= bloginfo('url'); ?>" title="<?= bloginfo('name'); ?>"><?= bloginfo('name'); ?></a></li>
        <? query_posts('orderby=date&order=ASC&showposts=7&offset=1');
        while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
        <? endwhile; ?>

        <form method="get" class="search_form" action="<?php echo bloginfo('url'); ?>">
        <input class="text_input" type="text" value="To search, type and hit enter" name="s" id="s" onfocus="if (this.value == 'To search, type and hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type and hit enter';}" />
        <input type="hidden" id="searchsubmit" value="Search" />
   <? } else { ?>
   <div id="errorpage">
        <img src="<? bloginfo('template_directory')?>/custom/404.gif" alt="404 Error" title="404 Error"/>
        <p>You've found a 404 page. Luckily you are the admin. You should fix this page quickly. You might try using the <a href="">The Ultra Handy Redirection Plugin</a> to redirect this page to a relevant one. If you already have this plugin installed click here to redirect this 404 page.</p>
   <div class="clearall"></div>
<? 	  }


remove_action('thesis_hook_404_content', 'thesis_404_content');
add_action('thesis_hook_404_content', 'custom_thesis_404_content'); ?>

Step 3 – Blocking Your IP from Sending Emails

Once you have this code locate the YourIP array and add your IP address there. For convenience you will find your IP address in the sidebar. Look for the /* Add your IP Address Here*/.

Once you update your IP Address upload it to your thesis custom folder.

Step 4 – The CSS

Now that we have the code functionality setup and live on our site, lets add the CSS.

Copy the CSS below and paste it into custom.css which is in the thesis custom folder.

.custom div#errorpage h2 {

.custom div#errorpage {
	border:1px dashed #bbbbbb;
.custom div#errorpage img {
.custom div#errorpage p {
	padding:15px 0px;
.custom div#errorpage #error-inside{

Once you have updated the custom.css upload it back to your serve.

Step 5 – Fixing Broken Links

Now the ultimate goal of this 404 page is to keep the user happy, but also to help you find broken links to your site. These broken links are essentially free links so you should take advantage of them. There are a variety of ways of redirecting these links elegantly, but our favorite solution is the Redirection Plugin for WordPress.

Using the Redirection plugin with our 404 page.


The redirection plugin allows to you easily 301 redirect your broken links to the correct location. Here is a quick guide on how to use it effectively.

  • Simply install the plugin via your admin area.
  • Once installed go to the “Tools” section of the wordpress admin panel, here you will find a link to “Redirection.” Click the link.
  • Once on this page add the 404 page in the “source url” box and the new destination in the “target url” box and hit add redirection.

That was quick and easy wasn’t it? Now anytime someone clicks a broken link to your site you will be notified and have a way to correct it!

Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they’ve got guts and hustle. He’s also the co-founder of Broadband Now which aims to simplify the broadband shopping process.