Customize Thesis: Creating Useful 404 Pages

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.


funny-404

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 Art of Blog 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.

Improvements

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:

user-404

Admin 404 Error Page:

admin-404

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.

404

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.

<?php
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('000.000.000.000','000.000.000.000'); /* 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">
        <p>You
        <?php
        $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 <noreply@$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 Art of Blog's <a href="http://www.artofblog.com/customize-thesis-creating-useful-404-pages/">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; ?>
        </ul>

        <h2>Search</h2>
        <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" />
		</form>
	     </div>
         </div>
   <? } 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="http://wordpress.org/extend/plugins/redirection/">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>
   <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 {
margin-top:0px;

}
.custom div#errorpage {
	border:1px dashed #bbbbbb;
	padding:10px;
	float:left;
}
.custom div#errorpage img {
	float:left;
	width:100px;
	padding:10px;
}
.custom div#errorpage p {
	padding:15px 0px;
	margin:0px;
}
.custom div#errorpage #error-inside{
margin-left:130px;
}

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.

redirection

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!

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Nick Reese

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.

Comments

  • Top 5 Wordpress Plugins for Customizing 404 Pages | Cho Toan dot Com says:

    […] you are using Thesis Theme, you can refer some cool posts as:  Customizing the 404 Page, Creating Useful 404 Pages, Customizing Thesis Theme 404 Error Page and 100 plus Thesis Theme Resources for customizing your […]

  • A very useful post and I have used it in my blog.

    Small correction:
    <? query_posts('orderby=date&order=ASC&showposts=7&offset=1');

    This shows 7 oldest posts. I changed order=DESC to show the latest 7 posts.

    If it was intended to be, then leave it that way :)

  • FREE Thesis Skin : Blue Magic without Sidebars | Thoughts Unlimited says:

    […] Custom 404 Page : Artofblog.com, http://www.artofblog.com/customize-thesis-creating-useful-404-pages/ […]

  • Eric Barnes Revamped With Thesis — Eric Barnes says:

    […] Thesis 404 pages […]

  • Sushant says:

    Hi, How can we redirect 404 errors to homepage instead of showing a separate page in thesis.

  • stuart says:

    Does this still work with Thesis1.6. I ended up with custom_function.php errors. My DNS was correctly inserted. Otherwise it looks good.

    • Nick Reese says:

      Try removing the opening and closing php tags. < ? ?>

      • MJ says:

        Same problem, having issues with Thesis 1.6. Code is parsed correctly, but it kills the built in code editor in Thesis.

        You mentioned removing the tags , should we replace with , or remove outright?

        How will Thesis parse this otherwise?

        • Nick Reese says:

          Basically you are looking to not have dupicate < ? ? > tags within the PHP code as this will throw a php parsing error.

          So

  • MEC says:

    I can’t get this to work in Thesis 1.6 for the life of me! No matter what I try I keep getting a white screen and I have put the old custom_functions.php back in place.

    Can anyone give me a custom_functions.php file where this is working for them on Thesis 1.6? Or tell me which tags to remove exactly?

    Thanks!

    • MJ says:

      MEC,

      I had the same problem and gave up. I think Thesis’s PHP Parser doesn’t like the tags. I tried using regular old , but no such luck.

      Maybe Nick can clarify…

  • Well, I got it to work, but now I am getting 50-60 emails a day saying that a user has accessed a broken link to (myblogname)/wp-content/plugins/embed_quicktime/jquery-1.2.1.pack.js

    I disabled that plugin, but I am still getting a steady flow of the emails saying that people are getting a 404 error. It says they are coming from my homepage. Any tips?

  • […] Creating Useful 404 Error Pages in Thesis – You need to have a solid 404 page to direct visitors who find broken links on your site. Another Art of Blog tutorial has you covered! […]

  • Avinash D says:

    Awesome tut nick….very detailed!!PRECISELY what I was looking for…thanx a ton :-)

  • Jonathan says:

    I cannot get this to work. I keep getting errors.

    Parse error: syntax error, unexpected T_FUNCTION in /nfs/c03/h03/mnt/86396/domains/blog.kinectrics.com/html/wp-content/themes/thesis_16/custom/custom_functions.php on line 22

    If anybody can give me some extra advice I would love it.
    Thanks

  • Denny Sugar says:

    Hey guys,

    Try dropping the “<?php" on the first line of code in Step 2 (custom_functions.php edits) and try again. That fixed the error I was getting.

    This works awesome for me now. Thanks for posting!

    Good luck!

  • […] Creating Useful 404 Pages Change your Thesis 404 page with this tutorial. […]

  • 100 Resources for Thesis Wordpress Theme Users | MattFlies.com says:

    […] Page Navigation 23. Easily Add a Twitter Feed to Your Sidebar 24. Add Flickr Sidebar Photos 25. Creating Useful 404 Pages 26. Clickable Logo in Header 27. Adding a Banner Ad to Your Header 28. Add Breadcrumbs Without a […]

  • […] Customize Thesis: Creating Useful 404 Pages […]