In this article I am going to walk you through implementing an advanced live search on your WordPress website. Specifically:
If you’re wondering what this is, I bet you’ve encountered it without even realizing it. The best example of advanced live search to call out is Amazon. Go to Amazon and start typing a search. Within 2-3 letters, a drop down will appear with common search suggestions. This is one of the reasons why Amazon is so successful.
Consumers that are passively browsing can find things they didn’t even know they wanted. It puts products in front of eyes at a rapid rate. From an eCommerce perspective, when consumers can find products with less effort, they are more likely to buy.
Advantages of Advanced Live Search
- Apply logic to how search results are served to viewers.
- Prioritize product search results to meet your sales goals.
- Improve the user experience.
- Account for verbiage and phrasing variations.
- Collect search analytics to continually improve your search logic.
- Set predictive search recommendations to serve content faster.
- Manipulate search results based on previous user search behavior.
For the remainder of this article I am going to show you how to implement all of that nifty stuff, directly on your site, just as it is on this website.
Ajax Search Pro for WordPress – Advanced Live Search Plugin
This is the plugin we are going to be using. It is $26 and worth every penny given the robust features that it comes with. Buy it, install it.
If you don’t know how to install premium plugins, here is a quick and fast run through:
- After purchase, download plugin file from Themeforest. It will be a zip file.
- Unzip the folder to your desktop.
- You should now have 2 folders: documentation and another zip folder called “ajax-search-pro.”
- Go to your WordPress Dashboard.
- Select “Plugins” in the left panel.
- Click “Add New” at the top of the screen.
- Click “Upload Plugin” at the top of the screen.
- Click “Choose file.”
- Use select the zip folder “ajax-search-pro” from step 3.
- Click “Install Now”
- Click “Activate”
Boom, easier than making a ham sandwich.
Creating Your First Advanced Live Search Form
Once installed, you will now see this addition to your WordPress admin dashboard.
Within this new tool you will find a ton of options. Let’s go over a few shall we? First: click on the first option, “Ajax Search Pro.” This is where majority of your time will be spent and it is where we actually build out our search forms.
Every form has to be given a name. I would suggest naming the form after the location you intend to put it on your website because you might make several with different stylistic variations. So type in a name like “homepage sidebar” and then click “Add.” You can also see in the picture above, there is an option to override your theme’s search with the custom search you are about to create. It has been my experience that this works about 50% of the time and varies from theme to theme.
In this area we will set the ground rules for how our search form serves results to searchers.
Search Engine (Regular Vs. Index Table Engine): Index Table Engine is an advanced setting that allows you to create tables of keywords so that database calls are lighter and faster and search results are blazing fast. I will cover this in a later post as it is fairly technical. For now, lets use the Regular Engine.
Search In (Posts / Pages): These toggle switches will allow you to determine if search results are pulled from blog posts, pages, or both. You will need to determine what is most appropriate for your website. For this website, I opted for just posts because that is what 99% of visitors come here for. Remember, the point of advanced search is to simplify the user experience, not clutter it.
Search in Custom Types: This is where this plugin gets freaky powerful. Many WordPress websites utilize custom post types. This could include products or even more highly custom types. For example, if you have a fitness website with “Gyms” as a custom post type, you can choose to have results pull specifically from that custom post type. Neat, eh?
Search In (Title, Content, Comments, Excerpts, Permalinks): You can get highly granular with these toggle switches and tell the search form if it is going to search for keywords in those various attributes. Again, keep in mind this can backfire. If we turn those all to on, sure we’ll get oodles of results. But will those results be clean enough that we are improving the experience? I argue no. So I tend to toggle just Title and Content to on. If your posts are properly titled and your content is well written, this should work great.
Search In (Categories and Tags): If you have clear cut categories or a handful of tags that your blog content covers, this might be a good thing to turn on. Doing so will enable the search form to display results for entire categories. And tags as well.
Attachments: This is a killer feature for websites that have lots of attachments, like PDFs. This area of the settings will allow you to make attachments retrievable in search results. The most powerful feature here is the ability to search within an attachment’s content. This means that if someone is searching for specific phrasing, and that phrasing turns up in a PDF document, the document will return as a result.
User Search: These settings allow users to search for other users based on username, first name, last name, display name. While this is neat, it comes with some privacy implications. If you run a website for Chlamydia Survivors, people most likely don’t want to be discovered. On a dating website for vampire impersonators, however, people probably do. So just be purposeful in how you use this.
Behavior: You can get creative here. First, you can determine if you want your search field to fetch results based on a primary keyword or an exact phrase. You can also prioritize those options so that it searches for an exact phrase first, and then a general keyword second. Also within these settings you can implement redirects for certain searches. For example, if you want to take users to a product landing page if they search for “used laptops,” this is where we control that ability.
Mobile Behavior: I’m not sure why you’d want to deactivate your search for mobile users, but if you do, go nuts.
Image Options: These settings let you control how images are served in your search results. For a basic content site, you probably want to leave the default settings which serve the featured post image. However, if you want to serve other images in the search results as well you can do so. Remember to avoid the clutter though…
Multi-site: Great feature. If you have a network of multi-sites, these settings allow you to fetch results from some, or all of them, using one central search form.
Autocomplete & Recommendations: These features are neat, but leave a little to be desired. The autocomplete function can operate off of Google, which means that users will be given autocomplete suggestions based off of global Google searches. Cool, but if you run a very niche content site, this will not be helpful to your users.
Theme Options: In this section you can style your search form to look any way you please, including some complex effects like gradient buttons.
Search Form Placement
Now that you have designed your search form, it’s time to do something with. There are several ways to place forms throughout your website. The power to do this resides in the fact that Advanced Search Pro generates shortcodes for your forms.
A shortcode is a WordPress specific code that represents an object instead of huge blocks of code. The search form on this site consists of hundreds of lines of code and multiple files. But for my page building purposes, that can all be represented and dropped into my site front-end using: “[ wd_asp id=1 ]”. Shortcodes are so versatile that I had to add intentional spaces between the brackets to prevent WordPress from rendering the shortcode.
Here are some of the ways you can drop these shortcodes into your site:
Revolution Slider: I was pleased to find that I could put these shortcodes into hero banners and image sliders that I built in Revolution Slider. This will allow you to do some really nifty stuff. It is how I was able to stick the search from in the center of each page on this site.
Widgets: Using the text/html module you can throw these shortcodes into and widget area of your site. A lot of this will depend on the theme you are using, but I think its fair to assume most themes include page / post sidebars and footer widget areas. This is how I stuck the search form at the top right of posts site-wide.
Visual Editors: If you are using a theme with a visual editor, like Visual Composer, you can drop the shortcode into nearly any page layout you can think of, offering you lots of freedom.
Thanks for reading, and if you have implemented an advanced live search on your website in a unique way I encourage you to comment below so I can share it on this site.