First hands-on preview BB ACF Beaver

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?

• We are still in the middle of beta-testing, the examples below did not get any fancy design attention

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 GenerateWP) 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.

Types & Views with Beaver builder

Using Types (which is the free plugin with the suite of CPT/CF solutions) from OnTheGoSystems would be enough to do the same job as Advanced Custom Fields (or Pro) for fields. Types does both CPT'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.

Toolset sells for 299 USD for a lifetime unlimited license or 149 USD for the fisrt year, yearly renewal $74,50

https://www.youtube.com/watch?v=AtKNFSn6Dv4

Nothing wrong

There is nothing wrong with using Types&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.

Types requires on its own (so without the Views plugin) 25MB of installation space, ACF Pro does the 'fields' job with 5,5MB. Creating the 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 'field positioning' tool.

ACF Pro sells for 100 AUD for a lifetime unlimited license or 25 AUD for one site per year

BB ACF Beaver

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.

Creating the Custom Post Type

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 Custom Post Type UI, 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 code generator to make the below for you.

We are not going to explain all code below. Basicly it is building a 'record structure' in which fields will be used later

/* cars */
add_action( 'init', 'cars_post_type' );
function cars_post_type() {
 $labels = array(
 'name' => 'Cars',
 'singular_name' => 'Car',
 'add_new' => 'Add new',
 'add_new_item' => 'New car',
 'edit_item' => 'Edit car',
 'new_item' => 'New car',
 'view_item' => 'View car',
 'search_items' => 'Search cars',
 'not_found' => 'No cars found',
 'not_found_in_trash' => 'No cars in trash',
 'parent_item_colon' => '',
 );

$supports = array('title','editor');
 
 register_post_type( 'cars',
 array(
 'labels' => $labels,
 'public' => true,
 'has_archive' => true,
 'supports' => $supports,
 'rewrite' => array('slug' => 'cars'),
 'hierarchical' => false,
 'supports' => array( 'title', 'editor', 'thumbnail','custom-fields', 'excerpt'),
 ) 
 );
}
add_filter( 'acf/settings/google_api_key' , function () { return 'AIzaSyDzP9a4rf3VC1fwJb4BbFzRxeHM0TdKD6A'; } );

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.

In the dashboard the code above adds the CPT  'Cars' which results in a simple submenu with 'Cars' to display all cars (just like 'all posts') and 'Add new' to add a new car (new records) in the custom post structure together with the required fields.

Creating the custom fields

We use Advanced Custom Fields (or Pro) 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 'cars' we will use the following fields (see screenshot for ACF below):

Editing the 'car' fields

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.

Beaver Builder Templates

To use BB Templates you need to go to the PageBuilder settings and the 'Templates' button. The screenshot below (sorry, it is in Dutch) will show the two created templates: 'Cars_template_single' and 'Cars_template_archive'.

BB templates

Each template will use its own fields to display the required content. For this article we will have a close look at the 'Cars_template_single' setup.

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 of a so-called repeating field within ACF, like for example for testimonials. The ACF WP Field give the possibility to dispaly 'standard' 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 displays the required imagefield. All fieldtypes have a specific colorgroup for easy recognition.

Result

The dragging and dropping of fields is the base of the design of the single post page as shown here. The title 'Mercedes' comes from the field WP:title. The row content takes care for the background image, together with the fontstyling in that image.

The rest of the result just show a number of fields which have been defined in ACF, just to display some demo-content.

Work in progress

The plugin from Didou Schol is still a 'work in progress' but is improving every week in many aspects to become a full ACF/BB integration tool within the coming weeks/months.

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.