Creating A Custom WordPress 404 Page That Searches For Matching Content

Whether you are building a new WordPress website or have recently migrated your content from another CMS, having a custom 404 error page helps keep visitors on your site in the event they hit “page not found”.   Guiding them to the correct location can help prevent visitors from leaving due to frustration.

By including a search that uses the title of the page (actually, the page’s “slug”) they were originally looking for, you can present a list of pages that might match and the visitor won’t have to perform a separate search themselves.

Prepopulating a search is especially important if you have migrated content from another CMS, because page titles and urls will most likely change despite your best efforts.  While you can always create 301 redirects within your .htaccess file to avoid this problem by redirecting the old url to the new url, this isn’t always practical; especially when a site might have hundreds of posts.

When migrating websites, it’s often best to use 301 redirects for your top performing pages, and let the custom 404 page help visitors with the remaining pages.

We built our 404 page based on a great article from Web Designer Depot.  Their solution allowed us to include a list of matching results to a visitor that lands on the 404 page of a migrated site.  This is a much better solution than asking visitors to perform their own search.  In all likelyhood, they’ll probably just leave and search for the information elsewhere.

Using the code from Web Designer Depot, you can create a custom 404 error page that keeps visitors on your site by directly them to what they were originally looking for.

<div class="desc-404">We just performed a major update on our website.  All the files are still here; they have either been moved to a different location or renamed.</div>

<?php
//  https://www.webdesignerdepot.com/2013/02/how-to-build-effective-404-error-pages-in-wordpress/
function frl_get_requested_slug(){
  global $wp;
  $q = $wp->request;
  $q = preg_replace("/(\.*)(html|htm|php|asp|aspx)$/","",$q);
  $parts = explode('/', $q);
  $q = end($parts);
  return $q;
}


function frl_list_posts($posts){
  if(empty($posts))
  return '';
  $list = array();
  foreach($posts as $cpost) {
  $title = apply_filters('the_title', $cpost->post_title);
  $url = get_permalink($cpost);
  $list[] = "<li><a href='{$url}'>{$title}</a></li>";
  }
  return implode('', $list);
}


$q = frl_get_requested_slug();
$args = array(
  'post_type' => 'any',
  'post_status' => 'publish',
  'name' => $q,
  'posts_per_page' => 5
);

//echo $q;

$query = new WP_Query($args); //query posts by slug
if(empty($query->posts)){ //search for posts
  $q = str_replace('-', ' ', $q);
  $args = array(
    'post_type' => 'any',
    'post_status' => 'publish',
    's' => $q,
    'posts_per_page' => 5
  );
  $query->query($args);
}
if(!empty($query->posts)):
  ?>
  <div class="found-404">Were you looking for the one of the following pages?</div>
  <ul class="posts-list">
  <?php echo frl_list_posts($query->posts);?>
  </ul>
<?php endif;?>