Firefox / WordPress · January 7, 2007 0

On Creating an OpenSearch Plug-in for WordPress (for Firefox & IE7)

In my earlier tutorial titled Creating OpenSearch Plugins for Firefox (adds to the QuickSearch bar) I taught you how to write a basic OpenSearch XML format plug-in that can be used with both Firefox 2.x and IE7. The demonstrated example consisted of creating a plug-in that searches through Invision Power Boards.

As an afterthought, I felt like coming up with another quick tutorial on creating the same for WordPress. I won’t spend any time on explaining the components of the plug-in and hence you’re advised to go through the tutorial first before continuing with this. This post is merely an example of how-to modify the code shown earlier on to perform searches on WordPress.

If you ever notice the URL in the address bar when you perform searches using the internal search engine of WordPress, you’ll find the the index.php page is being called along with a variable called “s“, which contains the keywords. Say for instance, you are searching for the term “Firefox” .. the syntax will be …

If you refer to the tutorial you’ll see that we can pass on variable-value combinations to a URL using the Param tags. That’s the only parameter you need to pass for WordPress searches. I’ll cite the XML code of my site’s plug-in as an example. It should be self-explanatory.

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="">
    <ShortName>Chaos Laboratory</ShortName>
    <LongName>Chaos Laboratory: Blog Search</LongName>
    <Description>Search through articles posted on the Chaos Laboratory Blog</Description>
    <Description>Search for web-related topics like PHP, MySQL, CSS, XHTML, JavaScript, jQuery, Angular, Salesforce and much more!</Description>
    <Tags>php mysql css xhtml xml javasript jquery angular salesforce programming</Tags>
    <Attribution>Search data from Chaos Laboratory,</Attribution>
    <Query role="example" searchTerms="Apple"/>
    <Image height="16" width="16" type="image/"></Image>
    <Image height="64" width="64" type="image/png"></Image>
    <Url type="text/html" template="{searchTerms}"/>

Notice, how I’m passing the keywords in the form of a dynamic variable named {searchTerms}.

Once done, you save this XML code in a file, typically named, opensearch.xml in your web root and embed it in your page header using the following meta tag:

<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Chaos Laboratory Blog Search" />

Any questions ??