How to Make an iNove-Themed 404 Error Page

The iNove WordPress theme doesn’t have a 404 error page that fits in with the rest of the theme. However, making an iNove-themed 404 error page is really easy. In this post, I’ll show you how change your default iNove 404 page (below left) to an iNove-themed 404 page (below right).

Original iNove 404 Error Page
iNove-themed 404 Error Page</a>

Start by locating the wp-content/themes/inove/ directory of your WordPress installation. Rename–rather than delete–the current 404.php file in case you later want to return to the default error page.

We’re going to base the iNove-themed 404 error page on the main index.php file. This way, we get the themed layout of the header, the sidebars, and the footer for free. Make a copy of the index.php file and rename the copy, 404.php.

The main section of the code in iNove’s index.php file loops through each post and displays its title and summary. This code begins with these lines:

<?php if (have_posts()) : while (have_posts()) : the_post();
        update_post_caches($posts); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php
            the_title(); ?></a></h2>

and ends with these lines:

<?php _e('Sorry, no posts matched your criteria.', 'inove'); ?>
    </div>
<?php endif; ?>

Locate this code in your new 404.php file and replace it with code that displays your 404 error message. You’ll need to format your 404 error message like a regular post using the following code.

<div class="post">
    <h2><span style="color: blue;">Oops!</span></h2>
    <div class="content"></span>
        <span style="color: blue;"><p>You might have stumbled here by accident or the post you are looking for is
            no longer here.</p></span>
        <span style="color: blue;"><p>Please try one of the following:</p></span>
       <span style="color: blue;"> <ul></span>
            <span style="color: blue;"><li>Hit the "back" button on your browser.</li></span>
            <span style="color: blue;"><li>Return to the <strong><?php bloginfo('title'); ?></strong> <a
                href="<?php bloginfo('url'); ?>">homepage</a>.</li></span>
            <span style="color: blue;"><li>Use the navigation menu at the top of the page.</li></span>
       <span style="color: blue;"> </ul></span>
    </div>
</div>

I’ve highlighted the code I use for my 404 error page in blue. My code displays the error message as the post title between the <h2> tags, and displays an unordered list of suggestions to recover from the error between the <ul> tags.

After substituting your own error message code, test your new 404 error page by visiting a post or page on your WordPress website that doesn’t exist.

blog comments powered by Disqus