Awesome New Filter for Beaver Builder Plugin – Control Module Forms More Granularly

This is probably the worst title for any blog post, ever in the history of the internet.

Although overall I’ve been unsuccessful in what I was originally trying to achieve (although, I thought I was – I’ll explain shortly), I am excited (perhaps too much) about a new filter that’s been added to Beaver Builder that Justin from the core team kindly helped with.

Before I go into the nuts and bolts of this new addition, I do want to highlight the awesome support from the core team.

You are probably bored of me saying this by now, but I think Beaver Builder deserves to be recognised not only as a great page builder for WordPress, but as a development platform.

To build a solid community of developers, you need to have a solid product, and provide support to developers (which will of course have different skillsets and experience) that will feel comfortable falling back on – otherwise, it’s a lot to risk.

That’s what I would call the barebones benchmark.

While it might sound like I’m over-excited about a filter and am gushing a little bit (which, maybe I am) – I have to hand it to the Beaver Builder team for going over and above that benchmark.

Here’s the most-definitely-not-a-support-ticket support ticket I sent to them on January 6th:

beaver builder support email

Now, I’ve sent many an email which are much less ‘demanding’ (for want of a better word) to support teams of many other plugins, only to wait weeks for a reply, or to get flat out rejected (“sorry it’s not on our roadmap”), which is why I’m so tentative to ask.

Don’t get me wrong – support is HARD, and processes and boundaries need to be put in place – I fully understand that.

So, I’d exhausted every avenue I could personally find to solve my problem and concluded it “was impossible”. I was fully expecting to see “Sorry Doug” as the opening line when I opened the reply from Justin @ Beaver Builder (a mere 4 days later), but was delighted to instead see this:

Justin ‘got’ what I was trying to convey, and then offered an awesome solution, that worked perfectly…!

Like I say, perhaps I’m over excited, but I’d put a lot of my very limited brain power into solving this over the course of a couple of days, and to see it solved was great!

So with all that said and done, I should get back to the point of this article, which is explaining this new magical filter called fl_builder_render_module_settings

This allows us to access the $module object and it’s form.

Why is this unbelievably cool?

Here’s a glimpse in not-very-polished GIF:

beaver builder conditional fields

So let me explain what’s happening:

  • We have a row containing 2 modules (buttons)
  • When you set the row to full height, an additional field is then added (conditionally) to the button modules within the row which allow us to choose positioning

(I’ll post some more code soon with how I find the modules within the row.)

Why is this cool?

The positioning thing in itself is very useful – a number of people on Slack and Facebook have mentioned this as something they want – but actually, beyond that, it opens up a number of possibilities for clean user interfaces that display settings fields according to external factors (such as another setting applied elsewhere, like a row).

So back to positioning.

Once I had got the fields to appear, I needed to add the styling to make the positioning ‘work’.

Now, I need to confess at this point… Getting the fields to appear within the correct modules was kinda tough, and perhaps I was in a ‘battle-ready’ mindstate, but after looking at the styling for Beaver Builder modules (which use Flexbox) I immediately went head to head with it, thinking that was the only way to position this stuff.

Needless to say, with little Flexbox experience, I wasn’t very successful.

Flexbox – I appreciate you, but I don’t understand you.

So after conceding defeat, and thinking there’d be plenty of other use-cases for my new favourite filter, I thought I’d park it.

However, as if by fate, today (the day after Justin provided the solution) someone else in the Beaver Builder Slack channel posted a problem that required exactly this brand new filter!

So I began to explain how it worked, and people said (again) that if the positioning worked, it would help them.

Not one to back down from a challenge, I took responsibility, and ‘roped’ someone else (@guy_b on Slack) into my conversation, with the hopes of offloading this entire thing on to him:

It was a very good question indeed. I’ve been using the CSS ‘position’ property for YEARS, yet it didn’t occur to me even ONCE to try it. I assumed Flexbox was now the magical overlord of all DOM elements’ positioning.

And it worked!

So now, we can achieve this:

beaver builder modules multi alignment

Now, of course, you could have added a CSS class to the bottom module, and then written custom CSS, but I feel this is a bit more user-friendly.

Besides, this isn’t the only use case. There’s lots of scope to do other very cool things, which I’m sure we’ll explore soon.

3 important things worth mentioning:

  1. This filter isn’t currently available (Beaver Builder version 1.9.2), but as you’ll have seen above from Justin’s email, it’ll be included in the next Beaver Builder update.
  2. I’ve had a couple of glasses of red wine tonight and I’ve not fully tested the styling side of things. I’ll do so when I get a chance later this week to see what’s possible, and then post a tutorial and some code snippets so you can implement this yourself.
  3. Sober or otherwise – don’t hire me for your Flexbox needs.

If you’ve got any further thoughts on how you might use this filter, and want me to try something out, just drop me a note below and I’ll do so.

Bye for now!

4 Comments

  1. David Waumsley on 11th January 2017 at 5:10 am

    Doug, I appreciate you, but I don’t understand you. Kidding! I love your writing style.

    At the moment I have nothing of value to say, but I am loving this content. Just wanted to say that.

    • Doug on 11th January 2017 at 9:34 am

      Ha! Thanks, David (particularly on the writing style feedback – improving and honing it is one of the main purposes of this blog!)

  2. natethegreat on 14th January 2017 at 8:35 pm

    This is eating the elephant 1 bite at a time – thank you for making what is already awesome moaweosmer.
    thank you.

    • Doug on 15th January 2017 at 12:09 pm

      Ha!! Thanks Nathan 🙂

Leave a Comment