How to Add a 404 Error Image to the DIYthemes Thesis Theme for WordPress

This article describes how to get the Thesis Theme Version 1 to display a 404 error image as a substitute for any missing images on your site.

Background

The Thesis theme by Chris Pearson was one of the most popular, but controversial, premium themes available for WordPress.

Although Thesis 2.0 was released late last year, it didn’t appeal to me greatly and most WordPress sites that use the Thesis theme are still running version 1, which includes all releases up to Thesis 1.8.5.

One of the things that made it controversial was that the theme was not coded to follow the WordPress template hierachy. Instead, customisation of the Thesis theme usually required adding snippets of code to add or replace its proprietary function hooks.

For this reason, I have had to modify the code in my previous post on implementing 404 error images to enable it to be compatible with the Thesis Theme.

Implementing the 404 Error Image

1. Save the 404 image file to the subfolder custom/images/ within the Thesis theme root folder
2. From WordPress admin, go to Thesis->Custom File Editor and select custom_functions.php
3. Copy and paste the following snippet, then click the “Big Ass Save Button”

function custom_thesis_404_image_handler()
{
	global $wp_query;
	if (!$wp_query->is_404) return;

	//If they have tried to access an invalid image file, return a 404 image
	if ( preg_match( '~\.(jpe?g|png|gif|svg|bmp)(\?.*)?$~i', $_SERVER['REQUEST_URI']))
	{
	        $image404 = locate_template('custom/images/404.png');
	        if (!is_null($image404))
	        {
	                $fp = fopen($image404, 'rb');
			header( 'HTTP/1.1 404 Not Found' );
	                header( 'Content-Type: image/png' );
	                header( 'Content-Length: ' . filesize($image404));
	                fpassthru($fp);
	        }
	        exit;
	}
}

add_action('template_redirect', 'custom_thesis_404_image_handler');

Technical Notes

The Thesis Theme V1 has two hooks for customising 404 error handling:

thesis_hook_404_title()
and
thesis_hook_404_content()

However, these cannot be used for displaying 404 Error Images – we need to intercept the loading of the theme files at an earlier phase so that we can display the exact HTTP headers that we need without any extra stuff added by Thesis. For this reason, we are required to hook the WordPress action “template_redirect“.