Awesome Instant Search

Awesome Instant Search is a WordPress plugin (by yours truly) that allows anyone to add instant search features to their WordPress website.

It can theoretically work with any website and any theme using the correct settings. Built-in presets are included for WordPress’s twentyeleven, twentytwelve and twentythirteen themes.

Mimicking Google’s instant search feature, this plugin will make your website instantly display search results when information is typed into a search field.

Check out a live demo Try out Awesome Instant Search using the search bar in the navigation of my website above

Setting up Awesome Instant Search

Difficulty Level: Begginner (but…. patience is a must)
Estimated Time: 15-20 minutes

The plugin takes a bit of assembly off the bat, but anyone can get it setup by following these instructions (and perhaps with a bit of trial and error!).

Install the plugin. It will be listed on the WordPress Repository allowing you to search for it within your website’s admin panel. Follow the instructions for installing a typical plugin from the wordpress.org.

Modify Settings to fit your website.

Due to the limitless variations on website layouts, it’s impossible to make this work out of the box. There are three main settings that need to be adjusted to get the basics down, Search Input Selector, Page Content Selector and Search result selector. If you are familiar with CSS or jQuery selectors and HTML code, this will be a breeze for you. Otherwise, don’t fear, these instructions are intended for someone who only knows how to install a WordPress plugin and not much else!

The Options

The options for the plugin are found under Settings > Awesome Instant Search. The first three settings (excluding “Activate Plugin”) are going to be the focus of this tutorial.

Search Input Selector

This is where things can get tricky for the code-illiterate, but have no fear this is pretty simple if you follow my instructions. If you’ve never played with CSS or jQuery, will be a fun little dive into coding.

Inspect Element option in Google ChromeFirst of all, these instructions work with Google Chrome only, but can be accomplished other browsers if you know what you’re doing already. Download Google Chrome here if you for some reason don’t have it already.

The Search Field Selector is the selector that references your search field. To find the out what this is for your theme, right click on your search field (in Google Chrome) and select Inspect Element. A new window will pop up labeled Developer Tools, and it will have something like this highlighted:

<input type="search" name="s" ... />

Using google developer tools to select your input for Awesome Instant Search
Google developer tools let you see the into the code and select your search input.

We’re using Google Developer Tools to inspect the code of your website. If you didn’t get the above to work, try using the inspector tool, which is represented by the magnifying glass icon. Click the icon and hover over an element to see it highlighted in Developer Tools. In this case, again, we want to inspect the search field.

Once you found the search field in the code, what you need to look for is the class attribute. In the above image, the class attribute is the following:

class="search-field autocomplete-input"

And that’s it! Using the class, we can now reference the search input. In the above example, there are actually two classes separated by a space. We are going to use the first one because the second (autocomplete-input) is actually added by the plugin itself. Back to your plugin settings, type in a period (.) followed by the class name. So if you’re following along with twentythirteen this example, you would fill use .search-field as your Search Input Selector setting

Not too difficult, right? Note that when you first install the plugin this field is set to input[name="s"]. This should actually work with any wordpress website but it is a little more complicated. Regardless, if you want to target a specific text field (assuming you may have many) you can use the class or id attribute as done in this tutorial. If your search field didn’t have a class attribute, try reverting to the default input[name="s"] setting or see below on how to use an ID instead.


If there is no class attribute, you can use the ID if available. ID selectors uses a number sign (#) instead of a period, e.g. if id="myid" in your search selector (input element), you would set the plugin’s search input setting to #myid. Also, it’s good to note that multiple search fields can be selected if they have the same class attribute whereas id’s are supposed to be unique.


Content Selector

Next up, configuring the rest of the settings starting with the content selector.

Like the search field selector, the content selector is found using Google Developer Tools. This time we want to find the class of the main content. This can be tough because not all websites are the same. Generally though, the content contains all the article or page text and possibly the sidebar.

Right click in the body of your website and again select Inspect Element. Chances are you didn’t get the element because this one is not as easy to detect as the search field. In the With the Developer Tools window now open, preferably in front of you website so you can still see the content (see the image below), hover over the different elements until you get something that highlights the entire content of your website.

Here are some tips on finding the correct content element:
• The content element is typically proceeded by an article or div element with the class post or page.
• This element will often times have either a class or id of content or main.
• This is where the search results will appear, so getting the “wrong” element is probably an acceptable mistake. At the very least use the magnifying glass tool available in Google Developer Tools to find a good block for your results to appear.

Using Google Chrome Developer Tools to find the content selector for use in my Awesome Instant Search plugin.

Once you get the correct element highlighted, hopefully it has an id. It doesn’t have to, but in the image above you can see the code looks like this:

<div id="content" class="site-content" role="main">

Just like with the search field, we can use either the id or the class. We prefer to use id here because id’s are supposed to be unique (no other element should be using the same id as another). In the above example, the id is content. Go back to your Awesome Instant Search plugin settings and fill in the content selector option with a number sign (#) followed by the id you found when inspecting the code. In this example the full thing would be #content


Note that we could use the class in this example. Classes are refereneced using a period (.) followed by the text. In this case the option would be set to .site-content


The last option is for the search results. Each search result should have it’s own container, likely an article or div element with common class between all of them. To find the search container, do a search on your website and basically follow the steps above — except this time we’re looking for the elements that surround the search results.

Finding the search results container for Awesome Instant Search
Each search result is wrapped in an article element (aka tag), and each article tag has a class of hentry and status-published. The former, hentry, use commonly used in themes and doesn’t refer to the published status of the post, so we’ll use that.

Most themes will use a div or article tag with the class hentry, as does the twentythirteen theme in this example. Like in the above example, we could use the class selector (a period followed by text) to select the element, but we’re going to be more specific and append article to it. So if you followed along using the twentythirteen theme, your options should look like this:

twentythirteen settings for Awesome Instant Search

Search URL - this is the page where you search results appear. This field should not require any change, but in case you need to check your search url, try doing a search and find out what appears.

For example: If I do a search for “WordPress Plugin” on JameelBokhari.com, the address bar becomes http://www.jameelbokhari.com/?s=wordpress+plugin.

Everything preceding wordpress+plugin is the Search URL.

More information is coming soon but just briefly, the Also Hide setting uses comma-separated selectors to hide other elements while an instant search is being performed. It is recommended to hide navigation or page-specific elements when a search is activated.

The next two settings control speed and animation, in miliseconds. Play around with these to get them just right.

Before Instant Results allows you to append some html to your search results. Use the tag %%SEARCH_TERM%% to output the current search.

Theme Quick Settings allows you to load settings for the twentyeleven, twentytwelve and twentythirteen themes that come included with the last few version of WordPress.

Debug mode is mostly for me actually. This just makes sure scripts and style sheets do not cache, so it’s best to leave this one unchecked.

Lastly, you’ll find an option for autocomplete. It is not recommended you enable this setting quite yet, as it is still being fixed up… but go ahead and try it if you’re adventurous.

Back to WordPress Plugins | AIS on WordPress.org