Page loading ..
The FREE Online Tips Blog
Twitter | Facebook | Yahoo | Google | Firefox | Gmail | Security | Tools | more..

How to customize a 404 error page in your free Wordpress blog

November 19, 2006 under Blogging Tips Bookmark / Share this Tip..
 
We are the 404 trio! View us in action ..

A couple of days back we implemented customized 404 error page. Our main purpose was to provide some useful information to the visitors visiting a missing page (with contents like Page Does Not Exist. or No posts made) and make them stay. This is a necessity for all blogs because it may so happen that another blog may have linked to a post or page, which you have deleted over the time. So visitors coming to that page will get a blank page and run away.

The problem with creating a customized 404 error page at Blogsome

For those of you having blogs hosted in your own domains, please check this page to customize your 404 page. Free blog hosting platforms like Blogsome do not permit you to customize your template as per your wish. For example, in case of Blogsome you cannot insert php, run your own sql query, use all the wordpress template tags, etc. And I think this is pretty much understandable as their main objective is to provide an uninterrupted blogging service. (In this regard its worth mentioning that Blogsome has surpassed all my expectations.) So it is not possible to customize 404 pages as stated here.

The solution

We eventually found a solution (example). Let me share it with you. Generally in a 404 error page we get to see content like Page Does Not Exist. or No posts made What we will do is check the content every time the page is loaded and if we get contents like that, we will replace it with our own content. This Blogsome tip is search engine friendly too i.e. the search engines won’t get puzzled and penalize you. Here are the steps to do that:

1. Open the blog control panel.
2. Go to Manage and click on the Files tab. Now you need to edit the index.html file which is the main template file of your weblog.
3. Try to locate the {content} tag inside the index.html file. You can find it just below the <body> tag.
4. Replace the {content} tag with this:

{capture name=capname}{$content}{/capture}
{if $smarty.capture.capname == ‘Page Does Not Exist.’ || $smarty.capture.cont == ‘No posts made’}
OOPS! Page not found (404 error)
{else}
{$content}
{/if}

Thats it! Now save the file and open a missing page like http://your_blog_url.blogsome.com/404 (replace your_blog_url with your blog url) and see the result. If your blog is not hosted in Blogsome, try out the above code if smurty tags are supported or convert the code into php.

Tweak the code as you wish. But please do not forget to give the credits if you are not that lazy ;) Happy blogging!!

6 Responses to How to customize a 404 error page in your free Wordpress blog

darksnyder on December 6, 2006

Hi!
Nice work! Just implemented the code on my site too..

Stephen on December 26, 2006

Hey, neat stuff!

Stephen on December 26, 2006

Worked like a charm, with this tweak:

{capture name=capname}{$content}{/capture}
{if $smarty.capture.capname == 'No posts made'}
It appears this page doesn't exist. Please click the title above to go to the main page.
{else}
{$content}
{/if}

Ramnath on December 27, 2006

Hi Stephen,

Nice to hear that your blog also has a customized 404 error page.

Just a small tip ..

Replace {if $smarty.capture.capname == ‘No posts made’} with {if $smarty.capture.capname == ‘Page Does Not Exist.’ || $smarty.capture.cont == ‘No posts made’} cuz the page can be a ‘Post’ page (url looks like http://your_blog.blogsome.com/2006/12/26/post-name) or simply a page (url can be http://your_blog.blogsome.com/404)

If you have any queries do let me know. I will make a detailed post on this Wordpress topic :)

Rosie on April 30, 2007

These comments have been invaluable to me as is this whole site. I thank you for your comment.

Did You Know? on May 20, 2008

thanks for the tut

Leave a Reply »

For any queries mail us at: rabanerjee@gmail.com




Keep Discovering WebTips » 2 | 3 | 4 | 5



Blog Desiged & Programmed by Ramnath | Launch your free blog at Blogsome

Powered by WordPress


Monitored by Pingdom