404 Error pages in WordPress – a few simple ways to customise your 404 Page

A quick guide to the 404 Error Page and WordPress. This post takes a quick look at the 404 Page and will show you how you can do some basic customizations to your 404 Page in WordPress.

The 404 Page – what is it?:
We have all seen them, the 404 page is the page that you see on a website when you request a page that no longer exists or cannot be found.

The 404 is an HTTP status code, and is probably one of the most recognizable errors on the internet and is understood by pretty much everyone regardless of your technical background or understanding.

They often look like this:
404 pages

If you aren’t sure how to view your 404 page then just type in a random url for a page that you know doesn’t exist on your site, maybe something like: www.yoursite.com/random111. That should trigger your 404 page.

Can you make 404 Pages better?:

In recent years, websites have gotten smarter about how they handle 404 errors – instead of showing users the bland, dull, and impersonal error page of the Web Server, why not use this opportunity to reduce bounce rates, or to make your user smile, or to drive them to more useful information, or to offer a solution etc…….basically anything is better than just a “Error 404: file not found” message.

This is a great (and short – only 4.08 minutes) TED talk from Renny Gleeson about the 404 Page, where he gives his own views on the opportunities of a good 404 page, and looks at some real world examples. Hopefully something here will inspire you to play around with your own 404 pages.

How can I customize my own 404 Error Page in WordPress?:

The good news is that most modern WordPress themes come with a 404 page (you will see a 404.php file in your website directory) that you can find easily in your ‘Editor’ in WordPress and edit.

  1. Go to ‘Dashboard
  2. Click on ‘Appearance’
  3. Click on ‘Editor’

From there you should be able to see your 404 Error template in the ‘Templates’ section on the right-hand side. Simply click on it to open it and edit it. You should be able to quickly spot the text that your current 404 page displays, and it is a simple task to change this – just type the new text that you want to appear and press ‘save’.

Here is what mine looks like below, with the text that I changed highlighted in the box.

404 page in wordpress

If your WordPress 404 page already has a search box and you are mostly happy with the layout and you just want to tweak the text a bit, then you can do that via this method.

Adding ‘Recent Posts’ or other content your 404 Page:

We have shown you how to change the text on your 404 Error Page above, but what if you want to add some extra features or provide links to other content on your site?

For our 404 Page we tweaked the text, and then added a few automated links to other posts and articles on our site – it won’t win any design awards, but at least it provides extra choices for any users landing on our 404 error page.

You can see it below:

New 404 Page

So how did we do it?:
We have added 2 pieces of content to our 404 page that updates itself automatically – ‘Popular Posts’ and ‘Recent Posts':

1: How to show Popular Posts:
Showing your popular posts (ordered by by page-view in our case) is a popular content module to show on a 404 page – after all, you may as well show your most popular content.

In order to do this you will need to install the WordPress Popular Posts plugin. This is a decent plugin that keeps track of your most popular content, and you can configure it to show popular content in the last 24 hours, 7 days, 30 days, or all time.

Once you have the plugin installed and activated, then just go to your 404.php page in the Editor add the following code in to the page, where you want it to appear:

<?php wpp_get_mostpopular("stats_views=0"); ?>

Note: We set the ‘stats-view’ to equal 0 as we didn’t want to show the number of page-views next to each entry (our numbers are still pretty low, so we didnt want to highlight that too much ;)). You have complete control over this, so if you want to show page view numbers then you can set ‘0’ to ‘1’.

2: How to show Recent Posts:
We also chose to show ‘recent posts’, and you can do this easily by simply adding the following code to your 404.php page:

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

Note: You can change the number of posts to show here by changing the ‘limit’ number. We have ours set to 5 (‘limit’ => 5,), but this could be any number that you want.

In addition to the Recent Posts and Popular Posts, we added a few header tags, line-breaks, and our final code looked like this – you can see the bits we added in bold text:


<?php
/**
* The template for displaying 404 pages (Not Found).
*
* @package Generate
*/

get_header(); ?>

<div id="primary" <?php generate_content_class(); ?>>
<main id="main" <?php generate_main_class(); ?> itemprop="mainContentOfPage" role="main">
<?php do_action('generate_before_main_content'); ?>
<div class="inside-article">
<?php do_action( 'generate_before_content'); ?>
<header class="entry-header">
<h1 class="entry-title" itemprop="headline"><?php echo apply_filters( 'generate_404_title', __( 'Oops! That page can&rsquo;t be found.', 'generate' ) ); ?></h1>
</header><!-- .entry-header -->
<?php do_action( 'generate_after_entry_header'); ?>
<div class="entry-content" itemprop="text">
<p>
<?php echo apply_filters( 'generate_404_text', __( 'Sorry! It looks like nothing was found at this location, we probably moved something or screwed up.... Maybe try one of the links below, or maybe a search?', 'generate' ) ); ?>
</p>
<?php get_search_form(); ?>

<br>
<br>
<h3>Popular Posts</h3>
<?php wpp_get_mostpopular("stats_views=0"); ?>

<h3>Recent Posts</h3>
<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

<!-- .entry-content -->

<?php do_action( 'generate_after_content'); ?>
</div><!-- .inside-article -->
<?php do_action('generate_after_main_content'); ?>
</main><!-- #main -->
</div><!-- #primary -->

<?php
do_action('generate_sidebars');
get_footer();

There is lots more stuff that you can do with your 404 page. We intend to add some images to ours soon and generally make it look a bit nicer, and we will share that on the blog as soon as we do it.

How to turn comments off on a WordPress Home Page (or any static page)

This is a post for WordPress newbies who still need a bit of help in configuring some of the basic settings on WordPress when setting up their first websites or blogs.

Specifically, this post will show you how to turn ‘comments’ off on your Homepage, or indeed, any static page created in WordPress.

WordPress is sociable by default – the ability for a visitor to comment on your blog or your pages created in WordPress is the standard setting. And this is great, it promotes discussion, and useful comments all add to the richness and value of your subject material. Blogs are meant to be sociable, right?

However, sometimes you just want to create a great looking website with WordPress and you don’t want your homepage to stretch on into infinity with comments making it look like a blog post. Sometimes you just want a simple homepage that simply states your offer or gives the user some key pieces of content that they can use to start exploring your website with.

A common use case I have is using WordPress to create a micro-site, and I create a custom page in WordPress for the homepage and then have the blog functionality linked as a part of the sub-nav or header. The main homepage then becomes a permanent static page.

So how do I turn the Comments off in WordPress?

So here is the good news – its is easy to turn comments off on a specific WordPress page.

  1. Once you have created your page, then simply go to your WordPress dashboard and click on the ‘Pages’ section in the left-hand nav bar.
  2. Hover over the name of the page that you want to turn the comments off on, you should see the ‘Quick Edit’ option appear – click on it
  3. On the right hand side, above the ‘status menu’ you should see a check-box called ‘Allow Comments’. Uncheck it, and it will prevent comments from being added to the page.

A picture tells a thousand words, so check out the image below to see how you turn off comments on a specific WordPress page:

how to block comments on wordpress pages

Why is my WordPress blog not indexed?

Another very basic post, but if you are brand new, and I mean ‘brand new’ to wordpress it will hopefully save you some time.

In your early days of experimenting with WordPress you may wonder why your blog is not indexed in any of the search engines. Indexing can take time, but one of the first things you should check is whether your blog is even visible to search engines.

Annoyingly, when you first install WordPress it automatically sets your blog default as “I would like to block search engines, but allow normal visitors”. So no matter how kickass your blog is, or how unique your content is, it won’t get indexed in any search engines.

The good news is that this is easy to change. When you are satisfied that you are happy with the content on your blog and you are ready to unleash it on the world, simply follow the steps below to make your blog visible and accessible to search engines.

  1. From your WordPress dashboard go to ‘Settings’ (usually found in the bottom left section of your dashboard), and click on the ‘Privacy’ link.
  2. On the ‘Privacy’ page you will see 2 radio buttons under a title that says ‘Blog Visibility’. If you have just installed WordPress then you will notice that the “I would like to block search engines, but allow normal visitors” will be selected. Simply change this by clicking on “I would like my blog to be visible to everyone, including search engines (like Google, Bing, Technorati) and archivers”
  3. Click Save

Told you this was a simple, and very basic level post – but this is an easy thing to overlook for newcomers to WordPress. Hope it saves you some frustration.

How to Change the Font Family on Your WordPress Blog

This is a basic, entry level post for newcomers to WordPress who want to know how to change the fonts on their blog.

I have been using free wordpress themes for a while now – they represented the best way for me to get a blog template for zero cost, and allowed me to start experimenting with generating content online and playing around with affiliate sites.

I’ve tried a lot of themes out and whilst each one has its benefits, each one also has its drawbacks. For example, I’ve found adsense ready themes that save me a ton of time when setting up new niche blogs, but at the same time I’ve needed to dive into the templates and the CSS to make changes to things like fonts, width, banner placements etc…etc…

One thing that is pretty easy to change is the Font Family used on your WordPress Blog. Some free themes come with fonts that may not be to your taste. This post shows you how to change them at the most basic level in the CSS.

Firstly, why are font families used?:

Browsers use default fonts, and if you code up a blog or a website that specifies a single font, then there is a chance that this could cause issues for any vistors that you may get who lack that font. However, these days this is pretty rare if you are using the most common fonts.

The concept of using ‘font families’ removes this issue by grouping various fonts, and if a user that arrives at your website or blog does not have the first font in the family, then it will simply use the next one in the family group, and so on…..

Basically the premise here is that not every computer is equal when it comes to fonts, and if the reader of your blog does not have, lets say Verdana, then it will use the next font in the font family.  Cascading style sheets solve the problem of having only one font by allowing groups of fonts (or ‘families’) to be specified.

There are essential 5 families which tell a user’s browser the chosen style of typeface to display if none of those specified are available. These families are:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

How do I change my font then?:

Go to your WordPress template editor (usually: Dashboard > Appearance > Editor) and open your Stylesheet (style.css). Find the code that looks like:

  • body {
    margin: 0;
    padding: 0;
    background: #E8E8CE url(images/background1.jpg) repeat;
    font-size: 78%;
    font-family: “Lucida Grande”, “Lucida Sans Unicode”, Verdana, Arial, sans-serif;
    color: #333;
    text-align: center;;

Note that there is a line that specifies the ‘font-family’. In order to change the fonts, simply amend the font family. Here is an example below of a niche blog that I set up where I wanted to change the fonts. I amended the code above to include a different family of fonts (see the bold type below to see what i changed)

  • body {
    margin: 0;
    padding: 0;
    background: #E8E8CE url(images/background1.jpg) repeat;
    font-size: 78%;
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    color: #333;
    text-align: center;;

Easy. Try out the following font families in your blog to see what style suits you best:

  • font-family:Verdana,Geneva,sans-serif;
  • font-family:Tahoma,Arial,Helvetica,sans-serif;
  • font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
  • font-family:’Times New Roman’,Times,serif;
  • font-family:’Courier New’,’Courier’,monospace;

Joost de Valk’s WordPress Optimisation Video

Incredible video from Joost de Valk speaking at the A4UExpo London.

For those that don’t know, Joost is a WordPress developer and “general” online marketeer and is well regarding for his SEO and WordPress optimisation skills.

This video covers literally everything you need to know about using WordPress as a Content Management System, and covers subjects from Joost’s recommended essential WordPress plugins, general site and blog ‘housekeeping’ habits to develop, and growing and maintaining traffic.

This is a huge video weighing in at close to 1 hour in length. It’s so full of useful and concise info you ‘ll want to go back to it again and again.

The actual slides that contain the links and urls to the plugins that he speaks about can be found here: A4UExpo Presentation, and we’ve also embedded them below the video.

Joost de Valk’s WordPress Optimisation Video:


WordPress SEO & Optimisation Strategies a4uexpo London 2008 from existem on Vimeo.

Joost de Valk’s WordPress Optimisation Slides:

WordPress SEO & Optimisation

View more presentations from Joost De valk. (tags: plugin plugins)
Joost’s Blog: http://yoast.com/wordpress-seo-video/