{"id":1100,"date":"2016-11-22T12:10:16","date_gmt":"2016-11-22T11:10:16","guid":{"rendered":"https:\/\/www.nieuwsmarkt.nl\/?p=1100"},"modified":"2019-03-02T08:24:46","modified_gmt":"2019-03-02T07:24:46","slug":"first-hands-on-preview-bb-acf-beaver","status":"publish","type":"post","link":"https:\/\/www.nieuwsmarkt.nl\/nl\/blog\/2016\/11\/22\/first-hands-on-preview-bb-acf-beaver\/","title":{"rendered":"First hands-on preview BB ACF Beaver"},"content":{"rendered":"<p><strong>Didou Schol developed a light weight plugin for positioning\u00a0custom fields on archive and single post pages\u00a0 using the Templates\u00a0tool within Beaver Builder. Do we need anything else?<\/strong><!--more--><\/p>\n<p><em>\u2022 We are still in the middle of beta-testing, the examples below\u00a0did not get any fancy design attention<\/em><\/p>\n<p>Yes, you do need a tool to create the CPT (Custom Post Type) (or the knowledge to do that manually, using an online tool like <a href=\"https:\/\/generatewp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">GenerateWP<\/a>) and you need the Advanced Custom Fields (or Pro) plugin for creating the required fields within the custom post type records. Together with the BB ACF Beaver plugin, you can build any custom Content Management System solution that fits your needs.<\/p>\n<h3>Types &amp; Views with\u00a0Beaver builder<\/h3>\n<p>Using Types (which is the free plugin with the suite of CPT\/CF solutions) from\u00a0<a href=\"http:\/\/www.onthegosystems.com\/\">OnTheGoSystems<\/a>\u00a0would be enough to do the same job as Advanced Custom Fields (or Pro) for fields. Types does both CPT&#8217;s and fields. But their businessmodel requires to use Views (which is a paid plugin within Toolset) to display the CPT\/CF combinations. Views is for sure a very powerful tools to build templates based on the use of easy to use shortcodes. Look at the demo below.<\/p>\n<blockquote><p>Toolset sells for 299 USD\u00a0for a lifetime unlimited license or 149 USD\u00a0for the fisrt year, yearly renewal $74,50<\/p><\/blockquote>\n<p><iframe loading=\"lazy\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/AtKNFSn6Dv4?feature=oembed\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h3>Nothing wrong<\/h3>\n<p>There is nothing wrong with using Types&amp;Views in combination with Beaver Builder. For sure Types is a great and free plugin. Advanced Custom Field (both the free and the Pro version) do nearly the same, although ACF does not create the CPT.<\/p>\n<p>Types requires on its own (so without the Views plugin) 25MB of installation space, ACF Pro does the &#8216;fields&#8217; job with 5,5MB. Creating\u00a0the Custom Post Type just requires some lines in your Childtheme functions.php. To just display fields for the archive page and for a single post page, we just do need a simple tool to position the fields on a template. Beaver Builder already offers to create your own Templates, so a tool like Views te create them is actually not needed, once you have a simple &#8216;field positioning&#8217; tool.<\/p>\n<blockquote><p>ACF Pro sells for 100 AUD for a lifetime unlimited license or 25 AUD for one site per year<\/p><\/blockquote>\n<h3>BB ACF Beaver<\/h3>\n<p>The BB ACF Beaver plugin from Didou Schol is such a light weight plugin (just 167kB) and does nothing more than just putting fields created in ACF (Pro) on Beaver Builder Templates. We had the oppurtunity to do some beta testing and we are glad to be able to share our thought about this small but powerful plugin. Follow the next steps to learn from our experiences.<\/p>\n<h3>Creating the Custom Post Type<\/h3>\n<p>First of all, we created a custom post type, called cars. That was the initial example Didou Schol used and we copied this example. Creating a custom post type is not that complex and once in your childtheme functions.php, it will live there forever. If you use a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/custom-post-type-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">Custom Post Type UI<\/a>, the CPT will live as long as you keep the plugin active. This plugin will learn you how to create a CPT with its various option. Once you know how to do that, you could use a <a href=\"https:\/\/generatewp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">code generator <\/a>to make the below for you.<\/p>\n<blockquote><p>We are not going to explain all code below. Basicly it is building a &#8216;record structure&#8217; in which fields will be used\u00a0later<\/p><\/blockquote>\n\/* cars *\/\nadd_action( &#8216;init&#8217;, &#8216;cars_post_type&#8217; );\nfunction cars_post_type() {\n $labels = array(\n &#8216;name&#8217; =&gt; &#8216;Cars&#8217;,\n &#8216;singular_name&#8217; =&gt; &#8216;Car&#8217;,\n &#8216;add_new&#8217; =&gt; &#8216;Add new&#8217;,\n &#8216;add_new_item&#8217; =&gt; &#8216;New car&#8217;,\n &#8216;edit_item&#8217; =&gt; &#8216;Edit car&#8217;,\n &#8216;new_item&#8217; =&gt; &#8216;New car&#8217;,\n &#8216;view_item&#8217; =&gt; &#8216;View car&#8217;,\n &#8216;search_items&#8217; =&gt; &#8216;Search cars&#8217;,\n &#8216;not_found&#8217; =&gt; &#8216;No cars found&#8217;,\n &#8216;not_found_in_trash&#8217; =&gt; &#8216;No cars in trash&#8217;,\n &#8216;parent_item_colon&#8217; =&gt; &#8221;,\n );\n$supports = array(&#8216;title&#8217;,&#8217;editor&#8217;);\n register_post_type( &#8216;cars&#8217;,\n array(\n &#8216;labels&#8217; =&gt; $labels,\n &#8216;public&#8217; =&gt; true,\n &#8216;has_archive&#8217; =&gt; true,\n &#8216;supports&#8217; =&gt; $supports,\n &#8216;rewrite&#8217; =&gt; array(&#8216;slug&#8217; =&gt; &#8216;cars&#8217;),\n &#8216;hierarchical&#8217; =&gt; false,\n &#8216;supports&#8217; =&gt; array( &#8216;title&#8217;, &#8216;editor&#8217;, &#8216;thumbnail&#8217;,&#8217;custom-fields&#8217;, &#8216;excerpt&#8217;),\n ) \n );\n}\nadd_filter( &#8216;acf\/settings\/google_api_key&#8217; , function () { return &#8216;AIzaSyDzP9a4rf3VC1fwJb4BbFzRxeHM0TdKD6A&#8217;; } );\n\n<p>The last line of code in the code snippet above is for adding the Google Maps API key, to use embedded maps in your fieldstructure. Google requires the use of an API key since june 2016 to embed Google maps.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/cars.jpg\" alt=\"cars\" width=\"230\" height=\"339\" \/>In the dashboard the code above\u00a0adds the CPT \u00a0&#8216;Cars&#8217; which results in a simple submenu with &#8216;Cars&#8217; to display all cars (just like &#8216;all posts&#8217;) and &#8216;Add new&#8217; to add a new car (new records) in the custom post structure together with the required fields.<\/p>\n<h3>Creating the custom fields<\/h3>\n<p>We use <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener noreferrer\">Advanced Custom Fields<\/a> (<a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener noreferrer\">or Pro<\/a>) to create the fields we need within our CPT since this plug is needed to work together with BB ACF Beaver. Using this plugin requires some time to learn all the various field types and how to set all their options. In the example &#8216;cars&#8217; we will use the following fields (see screenshot for ACF below):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/fields.jpg\" alt=\"fields\" width=\"935\" height=\"642\" \/><\/p>\n<p>&nbsp;<\/p>\n<div id=\"attachment_1247\" style=\"width: 1450px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1247\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/cars-edit-fields.jpg\" alt=\"cars-edit-fields\" width=\"1440\" height=\"834\" \/><p id=\"caption-attachment-1247\" class=\"wp-caption-text\">Editing the &#8216;car&#8217; fields<\/p><\/div>\n<p>We will use just some of these 11 fields to be displayed in the Beaver Builder Templates. We created two templates, one for archive display and one for single post display.<\/p>\n<h3>Beaver Builder Templates<\/h3>\n<p>To <a href=\"https:\/\/www.wpbeaverbuilder.com\/knowledge-base\/layout-templates\/\" target=\"_blank\" rel=\"noopener noreferrer\">use BB Templates<\/a> you need to go to the PageBuilder settings and the &#8216;Templates&#8217; button. The screenshot below (sorry, it is in Dutch) will show the two created templates: &#8216;Cars_template_single&#8217; and &#8216;Cars_template_archive&#8217;.<\/p>\n<div id=\"attachment_1154\" style=\"width: 1450px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1154\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/beeld-11.jpg\" alt=\"beeld-11\" width=\"1440\" height=\"837\" \/><p id=\"caption-attachment-1154\" class=\"wp-caption-text\">BB templates<\/p><\/div>\n<p>Each template will use its own fields to display the required content. For this article we will have a close look at the &#8216;Cars_template_single&#8217; setup.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/single-template.jpg\" alt=\"single-template\" width=\"1440\" height=\"837\" \/><\/p>\n<p>The BB ACF Beaver add-on gives a list of the various fields which can be used in the template. Some fields require the creation\u00a0of a so-called repeating field within ACF, like for example for testimonials. The ACF WP Field give the possibility to dispaly &#8216;standard&#8217; WordPress fields, just like in normal posts, for example the publishing date (WP:publish), the modifications date (WP:modified), bit also the excerpt or title. The ACF Image field\u00a0displays the required imagefield. All fieldtypes have a specific colorgroup for easy recognition.<\/p>\n<h3>Result<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/cpt-cf-result.jpg\" alt=\"cpt-cf-result\" width=\"299\" height=\"561\" \/>The dragging and dropping of fields is the base of the design of the single post page as shown here. The title\u00a0&#8216;Mercedes&#8217; comes from the field WP:title. The row content takes care for the background image, together with the fontstyling in that image.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/row-setting.jpg\" alt=\"row-setting\" width=\"314\" height=\"298\" \/><\/p>\n<p>The rest of the result just show a number of fields which have been defined in ACF, just to display some demo-content.<\/p>\n<h3>Work in progress<\/h3>\n<p>The plugin from <a href=\"https:\/\/www.facebook.com\/didou.schol\" target=\"_blank\" rel=\"noopener noreferrer\">Didou Schol<\/a> is still a &#8216;work in progress&#8217; but is improving every week in many aspects to become a full ACF\/BB integration tool within the coming weeks\/months.<\/p>\n<p>In my opinion it is a good alternative to the Types\/Views solution and converts WordPress\/BB into a full CMS (Content Management System) with an easy user interface to make archive and single post pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.nieuwsmarkt.nl\/wp-content\/uploads\/2016\/11\/background-image-row.jpg\" alt=\"background-image-row\" width=\"1436\" height=\"299\" \/><\/p>\n<h3><\/h3>","protected":false},"excerpt":{"rendered":"<p>Didou Schol developed a light weight plugin for positioning custom fields on archive and single post pages  using the Templates tool within Beaver Builder. Do we need anything else?<\/p>","protected":false},"author":2,"featured_media":1207,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[60,59],"class_list":["post-1100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-review","tag-acf","tag-didou-schol"],"_links":{"self":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1100","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=1100"}],"version-history":[{"count":3,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1100\/revisions"}],"predecessor-version":[{"id":3836,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/posts\/1100\/revisions\/3836"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media\/1207"}],"wp:attachment":[{"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/media?parent=1100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/categories?post=1100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nieuwsmarkt.nl\/nl\/wp-json\/wp\/v2\/tags?post=1100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}