Powered by LUIT.nl - Constant beta
peterluit_vrijstaand

Beaver Themer and Search & Filter Pro makes WordPress an even more powerful CMS

Beaver Themer and Search & Filter Pro makes WordPress an even more powerful CMS

For years many WordPress specialists position WordPress as a true content management system. And for sure that is the case. To extend the row of showcases, we decided to use Beaver Themer and Search & Filter Pro in our latest customer case.

Job done in cooperation with René Spijker from Spijker & Co

The base of the job was making selections of ‘things’ based on various type of search variables. Searching in WordPress is just fine for day-to-day searching in pages and posts. But the basis search field is ‘just one’ and does not give any possibilities to make ‘and/or’ combinations of search arguments. There are some plug-ins which extend the searching capabilities. Relevanssi is a great plug-in which also adds support to custom post types and custom fields. Both CPT and CF are often used to make great CMS solutions within WordPress. Although Relevanssi extends the basic search filed, it does not offer more fields.

Search & Filter Pro

Search & Filter comes in two versions. You can download the free version from the WordPress repository and experience the power of using more search and filter criteria. The Pro version offers (among many other features) support for Advanced Custom Fields (Pro). Building CMS web applications will need custom fields, so for most client cases the Search & Filter pro version will be the way to go.

We did not test FacetWP yet as an alternative for Search & Filter Pro

The case

We started this case by studying the previous version of a dedicated PHP built solution. The customer was satisfied with the front-end of the solution, but it was hard to edit the content in the back-end. The data was handled directly in a MySQL database and edited via PHPMyAdmin. In General that is not a very friendly enduser solution. The structure of the database would fit into a CPT/CF structure, so that the back-end of WordPress could be used to add new records or to edit existing records.

The workflow

To get al list view of the search results we again decided to ask the customer if it would be allowed to use the preliminary version of Beaver Themer, to create the archive page in a fast and efficient way. The workflow to create the solution had the following steps:

  • Create the CPT (done that manually in PHP in functions.php of the Beaver Builder childtheme)
  • Create the needed taxonomies (also directly in PHP) as ‘switches’ (radio buttons or pulldowns) for the search selections
  • Create the needed fields with ACF Pro and order/style them according to the workflow needs of the editor of the data
  • Build the search conditions in Search & Filter Pro and assign the results later to the Beaver Themer created archive layout
  • Create a PHP based calculations/decissions between certain fields, since ACF Pro does not off the fieldtype ‘calculation’
  • Create the archive and single post layouts in Beaver Themer (needs some custom makeup with table rows

CPT and taxonomies

There are a number of plugins for doing this (like Custom Post Type UI), alternatively you could use the WordPress code generator GenerateWP or you could code it manually in your functions.php in you childtheme.

The same tools or methods could be used for creating the taxonomies. They appear on the right side of the back-end of your custom post type editor screen. Carefully prepair which fields should be defined as taxonomies and which fields are to be created/used as fields in Advanced Custom Fields Pro. Taxonomies can be used as ‘just’ filters, for example used by radio-buttons or pulldowns. Searching in (for example) textfields require creating fields in ACF Pro, which can be used in the Search & Filter plugin.

Fields

Although also custom fields could be created manually, ACF Pro offers so much more flexibility in creating, but also modifying fields in the backend. There are many other plugins for the creation of fields. Take care of checking that your choice can work together with the Beaver Themer plugin.

Search & Filter

After the creation of the database structure, define the search and filter criteria on how the enduser much go through the database. Search & Filter Pro is not the easiest plugin to configure, but once you experienced the power, you can create any search form you like. The following steps must be done in the settings:

  • define the post type needed for the plugin to work on
  • define the AND or OR structure on how fields should work together in searching/filtering
  • create the form user interface, in which you place taxonomies and custom fields
  • define where and how to display the final results, the easiest method is to use post-type archive

Calculations

Without going into too much details, we had to make some decission calculations based on search values in two fields. Since ACF Pro does not offer a ‘calculation’ field out of the box. For this case we need to calculate the surface in square meters based on the height and with value. The code below does that job, the base of the code with some explanation comes form the ACF support forum.

Archive page

The final step is creating the template in Beaver Themer, to start with the archive page. The archive page should display a list of rows (records), containing columns with the defined fields.

We used the ‘custom post layout’ to insert some HTML table code to get the fields in one row on the archive page. We used the Beaver Themer shortcodes to get the fields in the right columns as shown above.

Conclusions

We are still testing the selection tool before presenting it to the customer. With the above mentioned tools any powerful business solution can be created in a cost effective way. Yes, with some PHP skills, solutions become even more powerful.

 

 

4 Comments

  1. Alex on May 9, 2017 at 20:57

    I’m trying to use a similar setup. Beaver Themer + Search & Filter Pro. And everything works great apart from the Pagination. Are you having any issues with that?

    • Peter Luit on May 13, 2017 at 11:06

      That was the case in one of the early alpha versions.

  2. Linus Ek on November 15, 2017 at 15:45

    How did you resolve the problem with if the search yields no results it goes to the theme default search.php and show that no result instead of beaver themers.

    Maybe I did something wrong though.

    Grateful for the guide!

    • Peter Luit on November 15, 2017 at 15:51

      No, Themer tracks ‘not found’ down for any post type.

Leave a Comment