You might notice the spiffy little search box on the navigation bar of this blog. It’s an implementation of the LiveSearch code which I incorporated recently.
It’s a nice little tool, using pretty straight basic (albeit a bit complex) AJAX code. However it did require some effort to implement this, as several files needed to to be modified, and the required files placed all over the place. This meant that the ability to use this tool was restricted to people with some understanding of PHP, and also did not enable the clean integration of the code in WordPress.
So what I have done is integrate the required code/css into a small plugin which can be managed via the WordPress administration section. The plugin consists of a single directory which should be placed in your wp-content/plugins directory, as well as two files that should be placed in your chosen theme directory. If you use multiple themes (for example via the Theme Switcher plugin), then you should place a copy of these two files in the directory of each theme you want to use it in. The two files are:
The first one is so that users can style the LiveSearch boxes so it fits with their chosen theme, and users should not be required to make manual modifications to their code every time they change a theme. The second file is a replacement of the existing one, and enables the LiveSearch box. In case the plugin is disabled from the WordPress admin section (or simply disabled from the LiveSearch Options page, or the plugin deleted from the plugins directory), then the default search box will be displayed instead, without breaking its functionality (with some minor modifications). Note that running your WordPress installation with LiveSearch enabled will turn the “Search” button off, but disabling the plugin will turn it back on.
Updated 2007-03-27: LiveSearch 1.3 is now up! No files need to be moved to make this version work. You can edit
Updated 2008-03-17: Updated to LiveSearch 1.4, to support WordPress 2.5.
As a side note, the outputed html should be XHTML Strict, with tentative WCAG triple-a compliance (like the rest of this site. Visit the accessibility page for more information.
It’s a nice little tool, using pretty straight basic (albeit a bit complex) AJAX code. However it did require some effort to implement this, as several files needed to to be modified, and the required files placed all over the place. This meant that the ability to use this tool was restricted to people with some understanding of PHP, and also did not enable the clean integration of the code in WordPress.
So what I have done is integrate the required code/css into a small plugin which can be managed via the WordPress administration section. The plugin consists of a single directory which should be placed in your wp-content/plugins directory, as well as two files that should be placed in your chosen theme directory. If you use multiple themes (for example via the Theme Switcher plugin), then you should place a copy of these two files in the directory of each theme you want to use it in. The two files are:
livesearch.css
searchform.php
The first one is so that users can style the LiveSearch boxes so it fits with their chosen theme, and users should not be required to make manual modifications to their code every time they change a theme. The second file is a replacement of the existing one, and enables the LiveSearch box. In case the plugin is disabled from the WordPress admin section (or simply disabled from the LiveSearch Options page, or the plugin deleted from the plugins directory), then the default search box will be displayed instead, without breaking its functionality (with some minor modifications). Note that running your WordPress installation with LiveSearch enabled will turn the “Search” button off, but disabling the plugin will turn it back on.
Updated 2007-03-27: LiveSearch 1.3 is now up! No files need to be moved to make this version work. You can edit
livesearch.css in-place, in its plugin directory. If you wish to maintain multiple themes, then you can still move livesearch.css into your theme directory. A style file found in the current theme’s directory will always be used over the one located in the plugin directory.Updated 2008-03-17: Updated to LiveSearch 1.4, to support WordPress 2.5.
As a side note, the outputed html should be XHTML Strict, with tentative WCAG triple-a compliance (like the rest of this site. Visit the accessibility page for more information.
Download:
You can download the plugin from its WordPress Plugin Directory, unpack it and follow the README instructions to install it (which are pretty much a review of this post).
As is always the case in this sort of thing, there are no guarantees. The plugin should work, but just in case make a backup of any files you replace (though now you shouldn’t need to even do that). There’s always room for improvement, and I’m not just referring to the LiveSearch code, but also to the plugin wrapper. Feel free to comment.
Change Log
- v1.4 – Plugin works with WordPress 2.5 (thanks to the Korean Club despair blog) and is now also hosted on the WordPress Plugin Directory
- v1.3 – Plugin now completely drag-and-drop, no need to copy any files anywhere. Minor bug fixes/improvements in javascript code. Now hosted on Google Code
- v1.2 – Plugin widgetized, minor javascript changes
- v1.1 – Fixed potential javascript errors
- v1.0 – Original plugin, LiveSearch code copy/pasted directly without modifications
For more detailed explanations of the changes in each version, follow the series links in the sidebar.