Designs & Code

Design, Development and WordPress

Search & Filter has moved home! Head to

If you had an account with us, don't worry, we've moved that too. Head on over to to our new website to download and access support.

These are the old docs and will be removed soonnew docs have moved here


Under the “Display Results” tab, ensure that “as an archive page ” is selected.

Once this is done, the Search & Filter widget should begin working however you will likely want update some settings.

By default, Search & Filter will try to use `index.php` or `search.php` from your current themes folder for displaying your results.  In order to customise the appearance of results, or use a template from your them you must follow these steps:

  1. Tick the box “use custom template” – this tells S&F not to try to find a default, but to use a specific one from your theme
  2. Enter a filename for the template you wish to load – the filename is relative to your theme folder (or child, if you are using a child theme), so to use the `archive.php` file for displaying results you would simply enter “archive.php”.
  3. For nicer URLS you may enter a slug to identify your search results – all searches will be performed here – otherwise your URL will look like: ``

And thats pretty much it.


This method can sometimes be problematic with certain themes – Search & Filter is designed to use standard WordPress templates – but some themes (even popular ones like Avada) they do not use the built in Template Hierarchy, and instead run their own custom queries within templates, which override the Search Results and are impossible to accommodate automatically…

To overcome this you could try the suggestions in the FAQs.

Configuring Ajax

Before doing anything at all with Ajax, we must make sure that the above (without Ajax) is working correctly – otherwise you may find it very hard to fix or find errors you may be receiving.

This requires a little knowledge of html & css, and what CSS selectors are.

The main thing here is to set the Results Container correctly. This is essentially just a CSS selector (which is used by jQuery) which contains the area the search results are displayed in – in many themes this is commonly something like `#content` or `#main` however it can vary from theme to theme.

The results container is the area that will then be refreshed when new search results are loaded in via Ajax.