Ads Top

Create a Custom 404 Page In Genesis For Empty Search Results

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.

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' ) ) );


   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>


<?php wp_list_categories( 'sort_column=name&title_li=' ); ?>


<h4><?php _e( 'Articles by Month', 'genesis' ); ?></h4>


<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' ); ?>



</div><!-- end .archive-page-->

<div class="archive-page">

<h4><?php _e( 'Tags', 'genesis' ); ?></h4>


<?php wp_tag_cloud(); ?>



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 :)


adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.