#28 404 Page with a Difference

Amy Marsh Is A Fashion Technologist In Training

404 page

 

The 404 (page not found)  page can be neglected on a website which is a shame as it could be a gold mine. When a user sees a 404 page they might leave the website, however if it is super engaging they could find more content. Therefore for todays task I have made the 404 page more engaging in order to increase the likely hood of the reader staying on the blog and finding something new.

 

To achieve this I have decided to use a tag cloud, again it is rare that a blog actually does something exciting with a tag cloud but I thought it was the perfect opportunity to use it and use it in an unique way!

 

Let’s get started!

 

 

First start by opening up your 404.php page and replacing the whole article tag with this:

NB- As you can see here I have decided to add an image (see <img > tag) to the page. You do not need to do this.

 

Next add the styling to the bottom of the page style.css file:

 

 

This section of code is what controls the hover effect on the tag cloud, we are transitioning the font size and the colour on hover. You can change these settings to suit your blog, for example our text currently changes to chloédigital pink on hover, and you may wish to change it to another colour:

 

 

You can view the new 404 page here.

DAY 28 COMPLETE!

Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!

 

Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">