{"id":1660,"date":"2017-03-24T11:22:27","date_gmt":"2017-03-24T10:22:27","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=1660"},"modified":"2017-10-01T09:09:54","modified_gmt":"2017-10-01T07:09:54","slug":"beaver-themer-and-search-filter-pro-makes-wordpress-an-even-more-powerful-cms","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2017\/03\/24\/beaver-themer-and-search-filter-pro-makes-wordpress-an-even-more-powerful-cms\/","title":{"rendered":"Beaver Themer and Search &#038; Filter Pro makes WordPress an even more powerful CMS"},"content":{"rendered":"<p><strong>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 &amp; Filter Pro in our latest customer case.<\/strong><!--more--><\/p>\n<blockquote><p>Job done in cooperation with Ren\u00e9 Spijker from <a href=\"https:\/\/spijkerenco.nl\/\" target=\"_blank\">Spijker &amp; Co<\/a><\/p><\/blockquote>\n<p>The base of the job was making selections of &#8216;things&#8217; 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\u00a0is &#8216;just one&#8217; and does not give any possibilities to make &#8216;and\/or&#8217; combinations of search arguments. There are some plug-ins which extend the searching capabilities. <a href=\"https:\/\/wordpress.org\/plugins\/relevanssi\/\" target=\"_blank\">Relevanssi<\/a> is a great plug-in which also adds\u00a0support 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.<\/p>\n<h3>Search &amp; Filter Pro<\/h3>\n<p>Search &amp; Filter comes in two versions. You can <a href=\"https:\/\/wordpress.org\/plugins\/search-filter\/\" target=\"_blank\">download<\/a> the free version from the WordPress\u00a0repository 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 &amp; Filter pro version will be the way to go.<\/p>\n<blockquote><p>We did not test <a href=\"https:\/\/facetwp.com\/\" target=\"_blank\">FacetWP<\/a> yet as an alternative for Search &amp; Filter Pro<\/p><\/blockquote>\n<h3>The case<\/h3>\n<p>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\u00a0CPT\/CF structure, so that the back-end of WordPress could be used to add new records or to edit existing records.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/basis-voor-de-opdracht.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1675\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/basis-voor-de-opdracht.jpg\" alt=\"\" width=\"701\" height=\"436\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/basis-voor-de-opdracht.jpg 982w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/basis-voor-de-opdracht-300x187.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/basis-voor-de-opdracht-768x478.jpg 768w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/a><\/p>\n<h3>The workflow<\/h3>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/code.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1691\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/code.jpg\" alt=\"\" width=\"700\" height=\"557\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/code.jpg 1390w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/code-300x239.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/code-768x611.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/code-1024x815.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a>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:<\/p>\n<ul>\n<li>Create the CPT (done that manually in PHP in functions.php of the Beaver Builder childtheme)<\/li>\n<li>Create the needed taxonomies (also directly in PHP) as &#8216;switches&#8217; (radio buttons or pulldowns) for the search selections<\/li>\n<li>Create the needed fields with ACF Pro and order\/style them according to the workflow needs of the editor of the data<\/li>\n<li>Build the search conditions in Search &amp; Filter Pro\u00a0and assign the results later to the Beaver Themer created archive layout<\/li>\n<li>Create a PHP based calculations\/decissions between certain fields, since ACF Pro does not off the fieldtype &#8216;calculation&#8217;<\/li>\n<li>Create the archive and single post layouts in Beaver Themer (needs some custom makeup with table rows<\/li>\n<\/ul>\n<h3>CPT and taxonomies<\/h3>\n<p>There are a number of plugins for doing this (like <a href=\"https:\/\/wordpress.org\/plugins\/custom-post-type-ui\/\" target=\"_blank\">Custom Post Type UI<\/a>), alternatively you could use the WordPress code generator <a href=\"https:\/\/generatewp.com\/post-type\/\" target=\"_blank\">GenerateWP<\/a>\u00a0or you could code it manually in your functions.php in you childtheme.<\/p>\n<p>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\u00a0fields should be defined as taxonomies and which fields\u00a0are to be created\/used as fields in Advanced Custom Fields Pro. Taxonomies can be used as &#8216;just&#8217; 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 &amp; Filter plugin.<\/p>\n<h3>Fields<\/h3>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/velden.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1693\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/velden.jpg\" alt=\"\" width=\"700\" height=\"417\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/velden.jpg 1178w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/velden-300x179.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/velden-768x457.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/velden-1024x609.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a>Although also custom fields could be created manually, ACF Pro offers so much more flexibility in creating, but also modifying fields in the backend.\u00a0There are <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1mSqienVYxLopTFGLPK0lGCJst2knKzXDtLQRgwjeBN8\/edit#gid=3\" target=\"_blank\">many other plugins<\/a> for the creation of fields. Take care of checking that your choice can work together with the Beaver Themer plugin.<\/p>\n<h3>Search &amp; Filter<\/h3>\n<p>After the creation of the database structure, define the search\u00a0and filter criteria on how the enduser much go through the database. Search &amp; 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:<\/p>\n<ul>\n<li>define the post type needed for the plugin to work on<\/li>\n<li>define the AND or OR structure on how fields should work together in searching\/filtering<\/li>\n<li>create the form user interface, in which you place taxonomies and custom fields<\/li>\n<li>define where and how to display the final results, the <a href=\"https:\/\/www.designsandcode.com\/documentation\/search-filter-pro\/search-results\/as-a-post-type-archive\/\" target=\"_blank\">easiest method is to use post-type archive<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-filter.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1698\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-filter.jpg\" alt=\"\" width=\"700\" height=\"422\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-filter.jpg 1177w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-filter-300x181.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-filter-768x463.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-filter-1024x617.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-form.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1722\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-form.jpg\" alt=\"\" width=\"700\" height=\"325\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-form.jpg 1171w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-form-300x139.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-form-768x357.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/search-form-1024x476.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h3>Calculations<\/h3>\n<p>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 &#8216;calculation&#8217; 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 <a href=\"https:\/\/support.advancedcustomfields.com\/forums\/topic\/how-to-create-a-calculated-acf-field-saved-in-the-db\/\" target=\"_blank\">ACF support forum<\/a>.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/calculate.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1705\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/calculate.jpg\" alt=\"\" width=\"700\" height=\"398\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/calculate.jpg 1276w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/calculate-300x171.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/calculate-768x437.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/calculate-1024x583.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<h3>Archive page<\/h3>\n<p>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.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/themer-base.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1712\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/themer-base.jpg\" alt=\"\" width=\"700\" height=\"337\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/themer-base.jpg 1655w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/themer-base-300x144.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/themer-base-768x370.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/themer-base-1024x493.jpg 1024w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>We used the &#8216;custom post layout&#8217; 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.<\/p>\n<p><a href=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/custom-post-layout.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1714\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/custom-post-layout.jpg\" alt=\"\" width=\"699\" height=\"288\" srcset=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/custom-post-layout.jpg 1651w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/custom-post-layout-300x124.jpg 300w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/custom-post-layout-768x316.jpg 768w, https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2017\/03\/custom-post-layout-1024x422.jpg 1024w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/a><\/p>\n<h3>Conclusions<\/h3>\n<p>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.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>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 &#038; Filter Pro in our latest customer case.<\/p>","protected":false},"author":2,"featured_media":1731,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[62,68,33,32,69],"class_list":["post-1660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test","tag-beaver-themer","tag-case","tag-cf","tag-cpt","tag-searchfilter"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/comments?post=1660"}],"version-history":[{"count":3,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1660\/revisions"}],"predecessor-version":[{"id":1750,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1660\/revisions\/1750"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/1731"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=1660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=1660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=1660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}