[« Previous Post]
[Next Post »]

LiveSearch spacer
Creative Commons Attribution-Noncommercial-Share Alike 3.0 License. -->

posted mid-afternoon by Constantinos. Filed under Code, WP Plugin

This entry is part 1 of 4 in the series LiveSearch

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

For more detailed explanations of the changes in each version, follow the series links in the sidebar.

Tags: CC Licence, LiveSearch, PHP, Plugin, WordPress
You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed. |

70 Responses to “LiveSearch”

  1. 1. Comment by Noel Jenkins
    on 2006-03-16 @ 9.32 pm · Quote #7 ·

    Thanks very much for this.
    I couldn’t get LiveSearch to run on my K2 theme so I stripped out the old code and used your plugin instead. Works very well. The behaviour of the output is slightly different in IE than Firefox, but it’s not a problem. I can’t work out how to make the input form a little wider – any clues?

  2. 2. Comment by Constantinos
    on 2006-03-16 @ 10.38 pm · Quote #9 ·

    The way the output looks is completely controlled through the single livesearch.css file. I know that it looks different in IE (the output comes out on the right of the search box instead of under it, at least in my case), and the workaround should be somewhere in the css though I have not had time to look at it. I probably will at some point.

    Now to change the size of the input box, you’ll have to modify the searchform.php file. I should probably have added an option to specify this from the admin section, and probably will (but probably not until next week). The change you need to do follows:

    Search for the string “name=” in the searchform.php file. It should be on a line by itself (with its value). Go to the end of that line, hit return to create a new line, and there enter:
    size="xx"
    where xx is a number specifying the width of the input box. Try starting with the number 25 and work from there… (remember to include the quotes).

    Hope this helps!

  3. 3. Comment by MightyAdsense Google Ad
    on 2011-05-31 @ 1.08 am · Quote #0 ·


  4. 4. Comment by Mikael
    on 2006-03-26 @ 2.21 am · Quote #10 ·

    I have installed it as the readme states, and the css and the php into my theme folder, and activaded it. Nothing happends. I use the blix-theme, and it calls the two functions in header and footer as stated. And livesearch is enabled in the options via the webinterface.
    Any suggestions?

  5. 5. Comment by Constantinos
    on 2006-03-26 @ 3.38 am · Quote #11 ·

    It looks like you didn’t replace the searchform.php file in your theme. Or if you did place it in your theme directory, then your theme must not be using it.

    If that is the case, then you need to find the file where the search form is inserted (navigation file maybe?) and replace the entire section (enclosed in <form> tags).

    The section starts with something like
    <form action=...
    and ends with
    </form>

    Delete that whole section, and in its place enter this code:

    <?php include (TEMPLATEPATH . "/searchform.php"); ?>

    If you can’t do that (or don’t want to), then contact your theme designer and ask for the searchform.php file to be properly included. Then installing this script should work just fine.

  6. 6. Comment by Constantinos
    on 2006-04-03 @ 2.10 am · Quote #22 ·

    As a side note, if you have the same problem as the previous poster, make sure when you copy/paste the include line in your theme, that the single quotes are in fact single quotes and not fancy quotes (which they will be if you simply copy/paste the above line).

    What you can do is either type it all out, or simply delete the fancy quotes and type the single quotes.

  7. 7. Comment by DG
    on 2006-04-25 @ 7.03 pm ·

gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.