Create a Custom 404 Page In Genesis For Empty Search Results

The Genesis Framework is beaten by none when it comes to power and flexibility, and in many ways can be the best solution for your WordPress site. But the learning curve associated with the Genesis Framework could be steep, especially for beginners, and it might be hard to find the right customizations for your site. Here's a great one though. Ever noticed how when you search your site for some content, and and no results were found, Genesis always displays the same boring "Sorry, no posts matched your criteria" message? Today, we'll teach you to customize this text, add HTML styles and more to liven up your search results pages when no results were found.

Many features of Genesis come out-of-the-box with child themes, which may then end up looking similar. For example, if you look at any site powered by Genesis, you will see the same monotonous 'Sorry' message for cases where no results were found, unless the web developer has explicitly changed this text.

Hence, customization is one daunting, but necessary task for web developers. You can add a personal touch to such exceptions, and keep your viewers from getting disappointed. For example, if users couldn't find something they were looking for, you could always show them an Archive-like page where they can choose some other content.

How to create custom search results page?

Note: Although not mandatory, it is recommended that you go through the following article if you don't know about WordPress hooks, before proceeding with this tutorial.

• Show Author Image Next To Post Title In Genesis

Removing the default output

First, we have to remove the default action taken in cases where no search results were found. Genesis generates the default output by hooking the function genesis_do_noposts () onto the hook genesis_loop_else (). To remove this output, first go into your theme's functions.php file, and add the following line of code at the end.

remove action ('genesis_loop_else', 'genesis_do_noposts');

Creating a custom output

Now that we've remove the custom output, we need to create our own. We will write our own function and then hook it into the genesis_loop_else () hook. Here's a sample function.

function custom_do_noposts() {
   $term = $_GET['s'];     // stores the search term in a variable
   echo '<div class="post">';
   echo '<div class="entry-content">';
   printf( '<p>%s</p>', apply_filters( 'genesis_noposts_text', __( 'Aww snap! I couldn\'t find anything in the archives that matches your criteria. Try another search term or use the archive links below.', 'genesis' ) ) );
   include('custom-search.php');
   echo '</div><!-- close entry-content -->';
   echo '</div><!-- close post -->';
}

This function is just a collection of a few HTML lines echoed in PHP. You can add your custom HTML here.

Notice that it also contains an include statement that includes a file custom-search.php. We'll create this file next, and display an Archive to the users. Just create a new file named custom-search.php in your theme folder, and paste the following code in it.

<div class="archive-page">
<h4><?php _e( 'Categories', 'genesis' ); ?></h4>
<ul>
<?php wp_list_categories( 'sort_column=name&title_li=' ); ?>
</ul>
<h4><?php _e( 'Articles by Month', 'genesis' ); ?></h4>
  <p>
<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
    <option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option>
    <?php wp_get_archives( 'type=monthly&format=option&show_post_count=1' ); ?>
  </select>
  </p>
</div><!-- end .archive-page-->
<div class="archive-page">
<h4><?php _e( 'Tags', 'genesis' ); ?></h4>
<ul>
<?php wp_tag_cloud(); ?>
</ul>
</div>

Displaying a custom output

Now you have a decent looking archive page for your empty search results pages. The final step is to add our custom function the the action hook we talked about earlier. Simply paste the following line of code to activate this function.

add_action( 'genesis_loop_else', 'my_do_noposts' );

You're all done! Try this tutorial out for yourself, and see the results for yourself - it's really that simple! And if running into problems, feel to ask a question. Peace :) Filed Under: How To

Source : mybloggertricks[dot]com