Using CPT Data in Beaver Builder Modules – Part 1

I was speaking to my friend Bernhard Gronau (aka @quasel on Slack) and he mentioned that it would be really cool to be able to pull data from Custom Post Types into Beaver Builder modules, such as the testimonials widget.

If you recall, I posted a video on how to modify Beaver Builder modules to do nearly ANYTHING, and so I wanted to put this to the test with this idea that Bernhard talked about (and it just so happened, I needed to add testimonials to my hire me page!).

And this makes TOTAL sense.

It allows you to have a single source of data for the testimonials, rather than storing them in individual modules.

Not only that, but while we’re doing this,  we are also able to add extra data into the testimonials, such as images and names.

Long story, short – it worked! Very well!

Before we get into it, go ahead and add a Custom Post Type for testimonials to your site, and populate it with some data. I’ve used Pods to do this, which makes it very very easy, but there are other solutions available.

In my testimonials, I have:

  • The person’s name (which is actually the title of each testimonial)
  • The testimonial itself
  • The organisation name
  • A photo of the person
  • The organisation’s logo

Let’s break down the steps we need to take care of to make this happen:

  • Get the testimonials from our CPT and store in an array
  • Looping through the testimonials array and create new markup to include in the Testimonials module
  • Inject that markup into the module, replacing the previous content
  • Modify the settings form to allow yourself, or a user, to switch between manually inputting

Before we get started, if you’re a visual learner, I have also created a video for this – check it out here.

The first 3 items from the list above will be done inside the fl_builder_render_module_content filter, and then the final point we’ll use the fl_builder_register_settings_form to modify the form.

Getting started

Initially, we’ll setup the filter and then do our work inside there. So quite simply, in your functions.php file (or wherever you prefer to keep your code), create the following:

Now, you might be used to creating a separate function, and referencing that in the 2nd parameter of add_filter. like:

For code that you’re writing for your own projects that won’t be released publicly, I think this is perfectly safe (anonymous functions/closures were added in PHP 5.3 (2009)). The downside of using an anonymous function is that you can’t unhook it later, so if you’re writing code that other developers might need to work with in some way, stick the creating a separate function, and specifying the name.

Now, as we know we’re working with the testimonials module, we want to make sure that our filter only modifies that. To do that, we’ll put a check right at the top which will exit the filter early if we’re not working with the testimonials module.

Getting the testimonials from our Custom Post Type

Inside our filter callback (either the anonymous function, or the named function), let’s get the testimonials. We’ll use get_posts() to do this.

And that’s it. We now have an array that we’ve called $post_array containing up to 5 of our testimonials. Let’s now loop through these and output them in HTML.

Getting testimonials from WordPress

Below our get_posts() code, let’s create the markup that we need. It’s worth bearing in mind that I’ve retained the overall structure of the default testimonial markup, so that any jQuery plugins (in this case bxSlider) can still find the same DOM elements to create the slide/fade effect.

You’ll also notice some Pods-related functions as I’ve used Pods custom fields to create my testimonials.

Now, at this stage, we’re still not outputting anything.

This is where we use a PHP super-cool library to make some magic happen. Let’s see it in action.

Modifying the Testimonials module output

The first thing that we need to do is to include the HTML Page DOM library into our project. The recommended way of doing this is to use Composer.

composer require wa72/htmlpagedom

Once you install via Composer, you can simply require the autoload.php file into your project. Check out the previous video for more information on this.

That said, I am considering releasing a ‘utility’ plugin that you can simply install like any other WordPress plugin, that will give you these tools without installing via Composer. You’ll then be able to use them inside your theme’s functions.php file. Simple! Let me know if you would find this useful.

In the previous code snippet, we have all of our testimonials inside HTML markup, stored inside the $post_output variable. We now need to get this into the $content which we have access to via the filter.

First, we need to use the HTML Page DOM library to bind to the default module’s content, so we can use the jQuery-like interface for adding and removing HTML. We can then inject our new content in.

At this stage, you should be pulling in content from your CPT!

Wrapping up

Before we completely wrap up, let’s recap:

  1. First, we use the fl_builder_render_module_content filter, and create a callback function passing in the $content and $module
  2. Next we get our posts (in our case, testimonials) using get_posts()
  3. We then loop through these posts, and create some markup, storing it in an output buffer
  4. Finally, we inject our new content into the default $content using the HtmlPageDom PHP library, and pass back to the filter.

And here’s the entire code (note that I’ve added a few more checks at the top of the filter to be extra careful).

Pretty clean, right?!

We do have a little bit of a problem, however.

Currently, we’re outputting CPT data into the Testimonials module, but the Beaver Builder settings form is still displaying the old content. This for me is a little clunky, and not something I’d be happy giving to a client.

For that, we need to modify the settings form, and give the user the option of switching between CPT and manually-entered testimonials.

Stay tuned for part 2 – if you’d like to be notified of it’s release, be sure to sign up for the WP Developers newsletter.

Click here for a video version of this tutorial.

If you found this article interesting, I'd really appreciate if you'd share this article with people you think would also enjoy it.

1 thought on “Using CPT Data in Beaver Builder Modules – Part 1

Leave a Comment