Get A Perfect Wordpress 404 Error Page
Alright, I am back with another another round of Wordpress Tips and Tricks. This time around I will be telling you how to get a perfect Customized Search Engine Optimized Wordpress Error 404 page. How many times it has happened with you that you had some posts done in your blog and due to some reasons you had to delete it or you messed up with the installation. And one fine day you looked at your Google Analytics and found out that google is still sending lot much traffic to your blog on some particular page(s). Now what to do ? This has actually happened to me. I had a very good up and running Blog and I messed up with my Wordpress installation without taking the backup. Now I am getting some traffic from Google search and the Error 404 page which is the landing page for the people clicking my website’s link from Google search does not contain for what they actually clicked for. Now to deal with these kind of situations you have to have a very good Error 404 Page which shows they way out to the lost visitor on your Blog.
So lets get started. I am using Vigilance Theme. So I will be telling you the steps according to my theme but it should be 99% same in other themes as well. If you face any Challenge then please let me know through comment, I shall try to resolve every possible conflict for you.
First of all lets look at my 404 Page. Once you are done watching it, just click back button on your browser.
Alright, so did you see there was so much stuff for someone who has landed on an error message rather than just saying that whatever you were looking for just does not exist . So what all can you display on your 404 page.
Note : All changes will be done in your 404.php file which should ideally be in your theme root folder.
-
How to display an Image :
Open 404.php find, remove everything from your 404.php and leave this only. This is how my 404.php file looked like before filling it up. You can actually do it in Wordpress Admin Panel as well under Appearance>>Editor>>Your Theme and Select 404.php on the right hand side.
Warning : Please copy the whole code in a text file before you start the modification. Just to be on safer side, In case there is any accident
OK, Lets move on. Now after backing up your file delete everything and leave the code similar to the one below.
<?php get_header(); ?>
<div>
</div><!–end entry–>
</div><!–end content–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
OK Now add this after
<img src=”location of your image file” alt=”error 404″ width=”500″ height=”667″ />
Check the height and width dimension as well basis your theme’s height and width.
-
How to display Recent Posts :
Anywhere in the 404.php file copy the below code to display Recent Posts from your blog.
<h2>Recent Posts</h2>
<ul>
<?php
query_posts(‘posts_per_page=10‘);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href=”<?php the_permalink() ?>” title=”Permalink for : <?php the_title(); ?>”><?php the_title(); ?></a>
<?php endwhile; endif; ?>
</ul>
Change the number to whatever number of posts you want to be displayed in this code posts_per_page=10
-
How to display Categories :
To display list of categories copy the code mentioned below.
<h2>Categories</h2>
<ul>
<?php wp_list_cats(’sort_column=name’); ?>
</ul>
-
How to display Tag Clouds :
To display list of categories copy the code mentioned below.
<h2>Tag Cloud</h2>
<?php wp_tag_cloud(’smallest=8&largest=36&’); ?>
If you want to save your time then please copy and paste the code below. Its my 404.php file’s code. You can customize it according to your need. Don’t forget to upload the file and give location to image.
<?php get_header(); ?>
<div><img src=”http://www.revolutioners.com/wp-content/themes/vigilance/images/error-404.png” alt=”error 404″ width=”500″ height=”667″ />
<h2>Recent Posts</h2>
<ul>
<?php
query_posts(‘posts_per_page=10′);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href=”<?php the_permalink() ?>” title=”Permalink for : <?php the_title(); ?>”><?php the_title(); ?></a>
<?php endwhile; endif; ?>
</ul><h2>Categories</h2>
<ul>
<?php wp_list_cats(’sort_column=name’); ?>
</ul><h2>Tag Cloud</h2>
<?php wp_tag_cloud(’smallest=8&largest=36&’); ?></div><!–end entry–>
</div><!–end content–>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Please leave comment if you want to add anything to the post.
Popularity: 1%
Awesome stuff there, I just used some of your tips for my 404 page. Checkit out by typing anything ahead of the website name. Thanks a ton. Can you tell hwo you for the arrows? And also the bird and rss icon on the right?
fas´s last blog ..Fiberglass Fiat 500C Replicas In Milan
That’s a nice tutorial.
Stanley´s last blog ..How to Keep WordPress Secure