Using Search & Filter Pro with Ultimatum

Yesterday (24 January 2016), we released the Ultimatum 2.8.7 and WonderLoops 2.0.8. Aside from addressing some bugs, adding support for PHP7 and pagination in the Custom Loop widget, these new versions of Ultimatum and WonderLoops added support for the amazing Search & Filter Pro plugin from Designs & Code. The development teams from both Ultimatum and Design & Code worked together to integrate our products. So, what’s the story?

Extending the Capability of Ultimatum

Search and Filter Pro has so many features and potential uses, it is hard to know where to start. It supports category and tag filtering. It supports WooCommerce and any Custom Post Type you make. It supports ACF and ACF Pro. You can make as many ‘forms’ as you want; in essence, you have a search & filter form and a results page.

The form sends the search and filter request to the results page. The form can be on the results page (and often is), so you can search and filter an archives page ‘on the fly’. But, because the search and filter form sends the request as a get query in the URL, the URL can be bookmarked and even saved for use in a site menu (as a custom link). In theory, you can even make a URL re-write to make the URL look pretty for SEO purposes (using the Ultimatum child theme functions.php file).

First Looks

Design & Code have made a YouTube video:

There are also two demo sites for you to see it in action. The first is a general one about Movies. The second is a WooCommerce site.

Implementing in Ultimatum and WonderLoops

Whilst it is not necessary to use WonderLoops, it would look even more awesome if you did (WonderLoops does not work with WooCommerce at this time). So, let us assume that you have installed Ultimatum 2.8.7 (or later) as a child theme, WonderLoops 2.0.8 (or later), Visual Composer 4.9.x (or later) and Search & Filter Pro 2.2.1 (or later).

If you are going to use a Custom Post Type, you will need to make this first, and if you are going to have AFC Pro fields, also make those. My CPT is called ‘Properties’ and it DOES have ACF Pro fields attached.

Making the Search & Filter Form

The first thing to do is to make a new Search and Filter Pro form. Later in the process, we will associate the form with a layout in Ultimatum, and because of this, I have tended to name the form the same as the Layout. For example, let us say that my layout is called ‘Properties’, then I would call my Search & Filter Pro form ‘Properties Form’. Because I am going to attach the form to a layout, and I am going to use WonderLoops, we will focus on the default settings tab that opens when making or editing a form, and that is the ‘General’ tab.

I have set ‘Search in the following post types’ to my Custom Post Type (in my case this is ‘Properties’). Results per page I have left at 10, but you may want more or less per page, so set that here. I have also enabled ‘Auto submit form’. I have left the ‘Field relationships’ as ‘AND’, and in ‘Enable Auto Count’ I have set this to ‘Enabled’ and ‘Update the Search Form on User Interaction’. See the settings here:

So, on the ‘Display Settings’ tab, select ‘Custom’ from the ‘Display results method’ select dropdown. You will also need to provide a Results URL. Mine is the standard WordPress archives URL for my Custom Post Type, ‘Properties’, with the trailing slash on the end. Ajax does not work in Ultimatum loop widgets. Here is what that settings tab looks like for my search form:

The other settings tabs I have not used, but they add even more options that you WILL find useful. On the right you will see the ‘Shortcodes’ panel, from which you will need the ‘Search Form Shortcode’.

You do not need the ‘Results Shortcode’, as this is built into the Ultimatum layout Custom Loop widget as a dropdown select, which we will see later in this tutorial. You can see this to the right.

You then need to decide what fields you want in your search form. Note that ACF fields are found in the Post Meta widgets. I found that, when searching for the Meta Field for an ACF field, there is a version starting with an underscore and one with just the name. It is the latter, without the underscore, that you need.

You can leave ‘Get Options’ set to ‘Automatically’, and even sort them. Here is what the Post meta field setup looks like for an ACF field attached to me Properties CPT, I called ‘Bedrooms’:

You will no doubt want to experiment with the form.

Adding the form to the Ultimatum Layout

The easiest way to add the form is drag and drop an Ultimatum Text widget to where you want the form, and copy and paste the Search Form Shortcode into the content area and save. That’s it. Easy.

To get the result to display, insert an Ultimatum Custom loop widget and in the settings select the WonderLoop you are going to use, if you are going to use a WonderLoop, in the ‘Loop Layout’ field select the loop you want to use (as you can see that I have in the screenshot below).

Towards the bottom of the Custom Loop widget in the ‘Search and Filter Pro Filter ID’ field select the search form you want to use for filtering the results.

I also used the layout Assign Layouts options to assign that layout to the archives for my CPT, properties. All done. Have fun. I am going to make a much bigger test site to test out an idea I have. I’ll be back.