Accessites.org
WordPress & Empty Searches

WordPress’ handling of empty site search inputs is far from satisfactory. Because the search form references the overall site address, submission of an empty search causes the site’s home page to be displayed. No error report. Nothing to indicate what has happened. Nada. Zilch. Nothing!

The solution, however, is blindingly simple and merely involves a few, fairly simple, changes to three WordPress theme files.

Step 1: Create a Search Form

Prior to WordPress 2.7, many themes incorporated a searchform.php template file that generated a site search search form. In WordPress 2.7, there is a new search form template tag, get_search_form(). This template tag will first look to the theme folder to determine if searchform.php exists. If it does, the tag will use that file. If not, it will generate the form markup itself.

Being something of a control freak, I still prefer to create my own search form and haven’t (as yet) investigated the quality of the markup produced by get_search_form(). But, more importantly, this solution depends on the existence of a searchform.php template with one very specific characteristic.

My typical search template looks like this:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
 <div>
   <label for="s">Keyword(s)</label>
    <input class="text" type="text" value="<?php if(trim(wp_specialchars($s,1))!='') echo trim(wp_specialchars($s,1));else echo ' ';?>" name="s" id="s" />
   <div class="button">
    <input type="submit" class="submit" name="Submit" value="Search" />
   </div>
 </div>
</form>

Check out the value I’m using for the search query. If the user submitted a search term, the form simply echoes out a trimmed version of their keyword(s). But if they haven’t submitted a search yet, the input defaults to a single space. This is important! I’ll need that single space later on to persuade the WordPress core function is_search() to identify an “empty search” and return an appropriate search results page.

Step 2: The Search Results Template File

WordPress will automatically generate a web page for search results, but I need a custom search template for this solution that includes the following:

1. Immediately after the call to get_header(), I add:

   <?php
    $my_searchterm = '';
    if(substr(wp_specialchars($s,1),0,1) == '')
     $my_searchterm = substr(wp_specialchars($s,1),1,strlen(wp_specialchars($s,1)));
   ?>

   WordPress’s wp_specialchars() function allows me to process the search input with all single and double quotes safely encoded. The standard PHP function substr() checks for the single leading space added by my search form. If that space exists, the same function, in conjunction with strlen(), removes it.

2. I can now build an if...else loop based on the content of $my_searchterm to output the appropriate content and/or messages — starting with a populated (non-empty) search input:

   <?php
    if($my_searchterm !='') :
   ?>
   

3. I then like to to remind the user what they searched for:

   <p>You searched on:
    <?php
     echo $my_searchterm;
    ?>
   </p>
   

4. Now I can start The Loop and output any results found:

   <?php
     if (have_posts()) : while (have_posts()) : the_post();
   ?>
   ...
   <?php
     /* usual output within The Loop */
   ?>
   ...
   <?php
     endwhile;
   ?>
   

5. But, if nothing was found, I need to tell this to the user before I close the final part of the The Loop:

   <?php
    else:
   ?>
    <p class="sorry">Sorry - I couldn't find anything!</p>
   <?php
    endif;
   ?>
   

6. Finally, if the search input was empty, I need to output an error message:

   <?php
    else :
   ?>
    <p class="error">You forgot to enter a search term!</p>
   <?php
    endif;
   ?>
   

Step 3: Amend The Header Template File

Now I can turn my attention to the meta-title. As this may be the very first piece of page content that is rendered by screen reader software, it makes sense to use the meta-title to let the user know what has happened.

I can accomplish this by using WordPress’ is_search() conditional tag and another if...else loop based on the content of the search input.

<title><?php
  if(is_search()) {
    if(wp_specialchars($s,1) != ' ') {
      echo ' Search Results for &#39;'.substr(wp_specialchars($s,1),1,strlen(wp_specialchars($s,1))).'&#39; on ';bloginfo('name');
    } else {
      bloginfo('name');echo' - No search query entered!';
    }
  } elseif {/* Any other conditional tags and their associated output */
  } else {
    bloginfo('name');
  }
?></title>

Step 4: Upload

Drop the amended (or new) template files in your theme directory and you’re done!

Proviso

There’s always one catch and this is one I haven’t (as yet) solved.

If a user deliberately clears the search input and then enters 1 space as their search query, they will be told that they haven’t entered a search term at all when, strictly speaking, any user input should be accounted for. Right now, I think that’s a reasonable trade-off but I’d be interested in any suggestions for dealing with this situation correctly.

Filed under Our Articles —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati | Help |

These posts may be related:

WordPress and Accessibility »

Applaud Web Solutions »

Pacifica Training »