Thesis Tutorial – Customizing the 404 Page

A few weeks ago, I published a Thesis theme tutorial that showed you how to do advanced ad targeting. The tutorial showed you how to assign ads to be different based on the category the posts were filed in, as well as change them on a post by post basis.

While “You 404’d it. Gnarly, dude.” is a semi-custom page since it does keep with your theme and design, you may want to give it a little bit of your own personality and wording (see mine here: http://sugarrae.com/notthere) to make it truly “custom”. Below, I’ll show you how to do it.

Step 1: Open your custom_functions.php file (thesis > custom > custom_functions.php) in your favorite editor

Step 2: Underneath the example code already in the file, place the following code (this code assumes your blog is in the root):

/* Custom 404 Hooks */
function custom_thesis_404_title() {
?>
YOUR 404 PAGE HEADING 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() {
?>
<p>WHATEVER YOU WANT YOUR 404 PAGE TO SAY HERE</p>
<?
}

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

The /* Custom 404 Hooks */ is a label for the code below so you know what it is at a single glance and is not part of the actual “code”. The word “function” tells Thesis you want it to do something. The custom_thesis_404_title is what I decided to name that function.

You’ll notice this code has two functions. One controls the 404 page heading (custom_thesis_404_title) and one controls the 404 page content (custom_thesis_404_content).

The code is pretty self-explanatory on how to edit. The two lines underneath each function tell Thesis to remove it’s default thesis_404_title and thesis_404_content and replace each with the custom versions. (See hooks for dummies for a more detailed explanation of how this hook “works.”)

Custom 404 pages are your only chance to turn a lost visitor into a site user, so you want to make sure you serve up something that makes a good first impression. If you need some 404 inspiration, check out these 100 awesome and creative 404 error pages.

About Rae Hoffman

Rae Hoffman aka "Sugarrae" is an affiliate marketing veteran and the CEO of PushFire, a search marketing agency specializing in SEO audits and link building strategies. She is also the author of the often controversial Sugarrae blog. You can connect with Rae via Twitter, Google+ and Facebook.

Sugarrae runs on the Genesis Framework

Genesis Framework

If you’re someone who doesn’t understand a lot of PHP, Genesis will give a ton of functionality that you wouldn’t be able to obtain otherwise with a simple control panel instead of having to alter code. For the advanced, Genesis has incredible customization possibilities via Genesis hooks.

The theme is not only highly customizable, but it has allowed me to run Sugarrae more professionally, with a much more targeted focus on monetization than it ever has been able to achieve before.

You can find out more about Genesis below:

Comments

  1. Thanks so much for your tutorial on this Rae. I’m somewhat new to Thesis so I’m trying to find my way around. I just tried to change my 404 page as you describe above but I’m still getting that ugly “You 404’d it. Gnarly, dude.” message which I can’t stand. I do have my WP install in a subdirectory. Does that make a difference? Thanks so much! ~Corinne

    • No Corinne – it shouldn’t make a difference at all… providing you are editing the custom_functions.php file in subdirectory > wp-content > themes > thesis > custom — if you’re still having an issue, shoot me a contact form with the code included and I will see what I can do :)

  2. Thanks very much for this post Rae. Would just like to mention that when I copied and pasted this code into the Custom File Editor within Thesis, it didn’t work until I replaced the curly quote marks with straight quote marks. But now it works just fine.

    • Thank You Very Much for this!! As Robert said above, the code ONLY works if you replace the curly quote marks with normal straight quote marks.

    • Hi Rae,
      thanks, was exactly what I was looking for. I had the same issue though that it didn’t work and had to browse through the comment section to find out what caused the issue (the curly quotes, like Robert pointed out). You might want to spare your future readers the time and replace the curly quotes in the code you provided with the straight ones so others don’t run into that same issue :-)

      Thanks again,
      John

    • Sorry about that guys – not sure what the issue was as I used ASCII to create the quotes, which typically should make them code worthy – but it’s fixed now – copy and paste works again! :)

  3. Hi Rae,

    Thanks for this clean code for customize 404 page Thesis user.

    your’re sweet girl and good author :D

  4. Hi Rae,

    Awesome code you got there!
    It helped a lot!
    Thanks!

  5. Hi,
    Where else could the custom 404 code be located? It is not in my custom_functions.php file, I’ve cut and pasted all code from that file below:
    Thanks!

    <a rel="nofollow" href="http://delicious.com/save?url=&title=” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=&title=’, ‘delicious’, ‘toolbar=no,width=550,height=550′); return false;” title=”Bookmark this post on del.icio.us”>Bookmark this article on Delicious

    <?php
    }

  6. hey rae,

    thanks for this….

    was wondering, how do i add an image then in the 404 page? cos it obviously doesnt have a hmtl editor like in the post/page’s where you can insert image…..

    thanks

    jason

  7. Perfect – thank you!

  8. Any idea why this would have stopped working?

    I used to have a beautiful custom 404 page thanks to you, and the code is still there (still using Thesis 1.8.4) but now I get the ‘gnarly’ one again.

    I’ve tried using the openhook plugin too, but nothing helps.

Speak Your Mind

*