Clearskys.net Blog

How to make a more stylish search widget

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

An effective search facility is the most important functionality for a website. Whilst WordPress performs the nitty-gritty of searching very well, I have always felt that the default search widget is very basic in both looks and functionality.

This tutorial will take you through the steps required to create a more stylish search widget for your blog and maybe teach you a few little tricks along the way. It is written as a very basic tutorial so the more experienced amongst you may find the going a little slow. If you aren’t interested in the tutorial and just want the plugin, then just scroll down to the bottom of the page to grab the completed code.

Creating a search widget

Right, let’s start at the very beginning by recreating the existing WordPress widget functionality and then we will work on adding functionality. The first thing to do is to create a plugin template php file with the header information that WordPress uses to identify the plugin.

If you want to follow along, then open your favourite text editor now, otherwise I will link to a download of the completed plugin at the end of this post.

This section of text should be at the very top of your plugin file and basically sets out the name of the plugin, a description, the version and the authors details. This is the information that is displayed for a plugin when you go to the Plugins administration page of your WordPress blog.

Now that we have got our basic plugin file set up we can go about adding the functionality, a search form.

function my_widget_search($args) {
     extract($args);
     echo $before_widget;
?>
     <form id="searchform" method="get" action="">

           
           <input type=”submit” value=”" />
        


<?php
     echo $after_widget;
}

So what does this function do? Firstly it extracts an array of arguments that are passed to the function into separate variables. These arguments are usually set up by the theme you are using on your blog and determine any little bits of HTML that are necessary to make the widget display correctly. For now all we need to be concerned with are the $before_widget and $after_widget settings, and even then all we need to do is make sure we output them before and after our widget.

The next part of the function simply displays a form with a search box (named s) and a button with the label Search. You will notice that the word Search is enclosed in a function call that looks like this:

__('Search')

The __() function is used to translate the word Search to the locale set for the blog the widget is used on, we need to make sure we use the same function in our modifications so that our new plugin can be translated as well.

Search form modifications

If you look at the search box on this blog (in the right hand sidebar) you will notice that the search box contains the word Search, and that clicking in and out of the search box makes the word disappear and reappear (if you don’t enter a search phrase).

To accomplish that functionality we need to add a little javascript to our form.

function my_widget_search($args) {
    extract($args);
    echo $before_widget;
    $search = attribute_escape(__('Search')); ?>

    <form id="searchform" method="get" action="">

            <input type=”text” value=”" name=”s” id=”s” onfocus=”if (this.value == ”) {this.value = ”;}” onblur=”if(this.value == ”) {this.value = ”;}”/>
    
            <input type=”submit” value=”" />
        


<?php
    echo $after_widget;
}

Have a closer look at the function above to see if you can spot the changes. The first change is that we have created a new variable called $search. As we are now using the translated version of the word Search in numerous places, it is more efficient to store the value than re-translating it over and over again.

The second lot of changes are on the search box, here we have added javascript code for two events onfocus and onblur.

The onfocus event is called in your browser when you click or tab into the search box. Our onfocus code looks like this:

if (this.value == '') {this.value = '';}

It checks if the value of the search box contains our translated search phrase (in most cases this will be the word Search) and if it does, blanks out the search box ready for the user to start typing.

The second event onblur, is called when the users cursor leaves the search box. In this case we want to check if they have entered anything in our search box and if they haven’t, reset it to the way it was. This is accomplished with the following javascript code.

if(this.value == '') {this.value = '';}

So there we have our new search form code, but before you go rushing to upload it to the server, there are a couple of things we need to add in order to let the WordPress widget system know that our search form actually exists. Add the following function to your plugin code.

function my_search_init() {
    $class['classname'] = ‘widget_search’;
    wp_register_sidebar_widget(’mysearch’, __(’My Search’), ‘my_widget_search’, $class);
}

The code in this function is exactly the same as that used to register the standard search widget with the WordPress sidebar widget system, except we have changed the name of the widget to mysearch and changed the name of the function to display the widget to the one we created earlier my_widget_search.

Our final step is to make sure our initialise function is called at the appropriate time. To do this add the following at the end of your code:

add_action('init', 'my_search_init', 1);

This makes sure that your widget is registered everytime a page is loaded in WordPress.

Styling your new form

If you were to upload this new plugin to your WordPress blog and add it to your sidebar, you would notice that it doesn’t look exactly the same as the search form on this blog, that is because the Search button is still visible. There is one final step required to remove the Search button from the form (yes, you can just delete it from the form altogether, but I prefer to keep it available for accessibility purposes).

Add the following lines to your blog themes CSS stylesheet (usually called style.css)

#searchform div input {
    display: none;
}

#searchform div input#s {
    display: block;
    width: 95%;
}

The first part of these styles hides all of the input elements in your search form (including the search box), the second then makes the search box visible again and sets it to take up the space previously set aside for the search button.

And voila, one completed search plugin, but wait there’s more…

Adding stylish search URL’s

Did you know that if your blog is using fancy permalinks (i.e. your post addresses do not end in something like ?p=234) then you can use the following format to display a search results page (in this example to search for the word wordpres):

http://blog.clearskys.net/search/wordpress

rather than

http://blog.clearskys.net/?s=wordpress

Wouldn’t it also be cool to have your new search widget generate these new search URL’s automatically whenever someone searches your blog? Thanks to a little technique developed by Alex King, we can add some code to our new widget to do just that.

In the function my_widget_search shown above, change the following line:

     <form id="searchform" method="get" action="">

to

     <form id="searchform" method="get" action="" onsubmit="location.href='/search/' + encodeURIComponent(this.s.value).replace(/%20/g, '+'); return false;">

You will notice that we have added a onsubmit event and another little bit of javascript. This bit of javascript is called when someone either presses return whilst in your search box, or clicks on the search button (if you haven’t hidden it). It creates the new search URL from the text they have entered and finally redirects the browser to the new search page.

The completed plugin code

And that concludes our search plugin, I have listed the code in full below, and it is also available for download from here. If you have any questions then please feel free to ask them in the comments or in the forum.

     <form id="searchform" method="get" action="" onsubmit="location.href='/search/' + encodeURIComponent(this.s.value).replace(/%20/g, '+'); return false;">

            <input type=”text” value=”" name=”s” id=”s” onfocus=”if (this.value == ”) {this.value = ”;}” onblur=”if(this.value == ”) {this.value = ”;}”/>
    
            <input type=”submit” value=”" />
        

Feeling generous? Why not sponsor my 100km run and send a donation to Oxfam.