Tumblr: how to create a custom 404 page

November 15th 2017

Tumblr: how to create a custom 404 page

Tumblr may not provide a self-hosted solution that everyone can mod and hack, it neverthless offers a great blogging platform. Sure it has some limits. For instance by default, you cannot create a custom 404 page. Well, with this hack, now, you can. And it's actually quite easy.

If you come from Wordpress, Textpattern or any other self-hosted platforms, then you probably previously dealt with .htaccess files. Among other things, it is used to redirect unvalid links to a custom 404 page (or any other errors).

However, Tumblr being a hosted platform, there is of course no FTP access for you to transfer such a .htaccess file. Also, if Tumblr provides some tags when a search query is null - {block:NoSearchResults}{/block:NoSearchResults} - there is no default tag for a 404 page.

So the idea is to circumvent this problem.

Previous attempts

Some Tumblr users have been wondering how to hack that small problem for several years. What they tried was quite clever : they assumed that one can easily add a specific class to all blog posts like post{PostID}. Each post would then have a class that looks like post12345. However a 404 page being different from a blog post, it would only retain de post class. They then, make use of a Javascript and CSS to identify pages that that are not post pages, those with a simple post class, in order to customize it.

Yet there was one problem : it only works on Tumblr websites that do not have any personal static pages. If beside your blog posts you created a page like /about, it would in fact be identified as a 404 page with a mere post class. Also, the /ask or /submit pages would not generate a {PostID} either, just like your personal static pages created on Tumblr.

If you do not use pages, this might actually be good for you. You can read more about that solution on this page.

A simpler solution

As I was playing around with Google Webmaster tools, I realized that the 404 page, and the way you manage it, is actually something of importance for Google. So I was wondering how to do that on Tumblr.

After numerous queries on Google, I stumbled upon a solution published by Florian Höch. He basically wrote a very small Javascript plugin to jQuery. It only requires two steps :

1 - Create your custom 404 page

Go to www.tumblr.com/customize/YOUR-BLOG and choose to create a new page. To fully customize the whole thing it is preferable that you choose a custom layout version. But that's optional. This is going to be your very own custom 404 page. So you can add links, a search engine, whatever you want on it. Also, note that you do not want Google to index that page, so in between the two <head></head> tags, add <META NAME="ROBOTS" CONTENT="NOINDEX">.

Once your page is done, give it a name, like "404" or "NotFound".

2 - Add jQuery (If it's not already there)

Now, choose to edit the HTML code of your theme (careful, don't get mixed up with the HTML code of the page you just created). In between the two <head></head> tags, add the newest version of jQuery by copying and pasting : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> Check though, this may already be here depending on your theme

Just below that line, copy and paste the following code.

<script> $.ajax(document.location.href, {type: 'HEAD'}).fail(function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 404) location.href = document.location.protocol + '//' + document.domain + '/YOUR_CUSTOM_404_PAGE_NAME'; }); </script>

Make sure to replace YOUR_CUSTOM_404_PAGE_NAME on line 4 with the name of your page. And you're done!

Basically, the script analyzes the HTTP response from the server and if that returns a 404 status code then the current page is forwarded to yours. You might briefly see the default Tumblr 404 page as your own replacement page is loading but it works quite well. And it still better than anything I guess.