Adding Custom Connections to Beaver Themer

Recently I wanted to add some custom connections to Beaver Themer to simplify some template building, but had some issues understanding the documentation (most likely my fault!). I worked it out and figured I could write up a sample of how I went about it in case it breaks the process down a little more clearly.

Let’s imagine we have some custom meta fields that we’ve added to a post type. Of course we can use the standard Post Custom Field property and manually enter the custom field key, but if we plan on doing this a lot- or handing a site off to a client or designer- we might want to have our custom fields pop-up in a nice list.

Beaver Themer's Standard Post Custom Field Option

Beaver Themer’s Standard Post Custom Field Option

If you’re using Pods to handle your custom meta fields, then this can already be taken care of with the free plugin they have available. But if you’re using something like ACF or CMB2, then you probably want a quicker way to show those meta fields.

In our example, we have a few custom meta fields to determine a location, possibly for a business or member. We want to display these fields- address, city, state, country- in a Beaver Themer layout, but we don’t want to have to type in the custom meta key every time.

Here’s the full code:

Hitting the Action

There’s a few main functions and actions at play here, so let’s break them down:

Our Main Function: demo_add_properties()

This is the main container for most everything. Instead of just directly handling all of our business straight when this php loads, we’re wrapping it in a function so that we can call that function at the right moment. Basically we’ve declared a function that has all of our meaty bits, but we don’t want WordPress to actually do anything with all that code, until…

The Big Action: fl_page_data_add_properties

fl_page_data_add_properties is an action hook provided by Beaver Themer. Beaver Themer is smart, and it knows exactly when it wants everything to happen. It gives us this action hook so that we can let it know we have some code we want it to look at, and it’ll look at it at precisely the right moment.

Since we’ve wrapped everything inside of our custom function demo_add_properties(), we can just just use add_action to make sure our code is loaded up when fl_page_data_add_properties is called. This is executed on line 6.

Beaver Themer Functions

So what are the actual functions we’re going to call here? Well there’s three were going to look at that all modify the field connections to display our custom connections.

New Group Heading: FLPageData::add_group()

First we will add a new group heading to the “Insert Connection” dialog, lines 13 -15. We’ll give it the official name of ‘demo_details_group’ but we can display it as “My Custom Fields” by adding the ‘label’ argument. This is technically optional, but included for your benefit.

New Custom Connection: FLPageData::add_post_property()

Next, we’ll add a new choice under our heading by using this FLPageData::add_post_property() function on lines 20 – 25. First, we’ll give it a name- ‘demo_details’. Then it takes a few arguments to get it up and running. Let’s look at each one.

  • 'label' => 'Address' Determines what the property will be named when we see it pop up.
  • 'group' => 'demo_details_group' Determines what group heading it should go under. Since we create our ‘demo_details_group’ earlier, we’ll use that. If you didn’t want to add a new group, feel free to use ‘general’ or one of the other groups.
  • 'type' => array('string') What type of information are we sending back? It could be an image file or a URL but for our case, its just a string of text.
  • 'getter' => 'demo_connection_getter' Now that we’ve declared this field, we need a getter function that’ll “get” all the correct responses for us, which we’ll explain later.
Our Custom Connection

Our Custom Connection

 

New Settings Field: FLPageData::add_post_property_settings_fields()

Now that we’ve added our custom post property, we’ll register a setting for it so that we can pick exactly what meta field- address, city, state, etc- we want to be displayed. You’ll notice a few things going on here.

First, on line 30, we’ve created a little array of all the meta fields we’re using and saved it as $meta_fields. Before the => is the actual key for the meta field. After the => is our nice pretty label for it.

Next, we call our settings field function. On line 43, we tell it which post property this applies to, our custom property named demo_details.

On line 45, we’re going to name our first (and only) setting key. This will function very similar to the stand Post Custom Field setting, where we tell it the key for the meta field we want. The main difference is what happens when we pass that setting a few arguments:

  • 'type' => 'select' Here we say what kind of input we want it to be. In the standard Post Custom Field, the Key is just a text input, you have to type in the name of the key. Here, we’re making it a Select field, so users can select which key from a drop down list.
  • 'label' => 'Select a Field' Give it a pretty name…
  • 'options' => $meta_fields And here we determine what are the options in our dropdown select. This is where we grab our array from line 30.

And here’s what that settings option looks like when it pops up:

Settings Field - A lot easier than looking up meta field keys.

Settings Field – A lot easier than looking up meta field keys.

Our Helper Function

The last little bit of business is actually displaying the data from those custom fields. For that, we’ll use our helper function demo_connection_getter( $settings, $property ) on lines 58 – 66. There’s three things happening here:

  • global $post; No matter where we use this- in a themer layout, or even in a Posts module looping through some posts- we want to access the current post that’s being displayed.
  • if( '' == $settings->key ) return ''; If there’s no key selected yet, don’t crash! Just return an empty string.
  • return get_post_meta($post->ID, $settings->key, true); But the real meat is to use get_post_meta() to access the current post- $post->ID– and grab the key- $settings->key– of the meta field we’ve chosen in our settings.

And that’s it! Add this to your (child) theme’s functions.php file or better yet, create a quick custom plugin to handle it.

Of course this could be infinitely extended to include more settings, different field types, etc. But this covers the basic gist. What other ways could we connect our custom data to Beaver Themer?

8 Comments

  1. avanti on May 13, 2018 at 8:35 am

    Hi,
    Your clear and detailed article was a great help to help me build a custom Themer field connection that handles the ACF Relationship field.
    Thanks a lot, posts on the subject are pretty rare.
    Actually, i just found your article and the one in BB KB as guides.
    Just in case you’re interested, email me, i’ll send you my code 😉
    Bye

    • Crafty Beaver on May 13, 2018 at 12:36 pm

      Hey that’s great! I’m glad to hear. I’d love to take a look at the code. I’ll reach out via email.

  2. Chris Johnson on June 2, 2018 at 2:13 pm

    Hi,

    I don’t want to dilute the great content you’ve posted here, so feel free to delete my comment, but seeing as you’re clearly someone with a very advanced handle on WP, BB, and PHP perhaps you can help me out.

    Any idea of how to display the value of a multi-select ACF field using Beaver Themer Field Connections – doesn’s seem to be covered in the BB documentation, and haven’t been able to find anyone talking about anywhere, unfortunately.

    https://www.advancedcustomfields.com/resources/select/

    Even just showing the value of a single item ACF Select field isn’t covered… and I cannot get that working either.

    Thanks in advance!

    ~ Chris

    • Crafty Beaver on June 4, 2018 at 8:15 am

      Hey Chris,

      That’s a very good question. I know select fields are a lot more to deal with because there are multiple ways to output the options, you’ll need to loop through them, do you comma separate them, etc etc.

      You might be able to mess around with the standard ACF shortcode (https://www.advancedcustomfields.com/resources/shortcode/), but most likely you’ll need to build a custom function or shortcode to display those.

    • Didou Schol on June 18, 2018 at 11:06 pm

      You should have a look at Toolbox, a plugin I created for working with any field type in Beaver Builder and Beaver Themer.
      You can use it as a module and only drag the field into view or via a Themer connector or inline using a shortcode. By using the twig engine you can easily add complex fields like repeaters and flex content, all from the front-end. https://www.beaverplugins.com

      • Crafty Beaver on June 19, 2018 at 6:33 am

        Toolbox looks great. I’m going to have to play around with that for sure.

  3. Robert on December 11, 2018 at 1:08 am

    hi there, we have a plugin (WP Job Manager) that stores information as an array to a custom field: “resume_education_data” and “resume_experience_data”.

    When using beaver builder to display the post content of the CPT “Resume” it includes these arrays. But when we opt to display a custom field and use the specific custom_field of the array, the array data won’t show.

    Similarly, if we want to show just the post content, without the other data, using the custom field value “content” it also won’t show.

    How to go about this?

    • Crafty Beaver on December 12, 2018 at 10:09 am

      Hi Robert,

      You’ll probably have to do a little custom coding for that, since plugins tend to save data into serialized arrays. Also there’s a good chance they’re using a filter on the post content to automatically append their custom data. BB Themer only displays the data directly, so if the plugin typically reformats it before displaying, Themer won’t pick that up.

      If it were me, I’d probably just write a custom shortcode that does the necessary logic to grab the data and output it where it needs to go.

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.