Beaver Themer conditional logic
Beaver Themer Version 1.2 has a new conditional logic feature, which gives you the power to fine-tune Beaver Builder layouts in ways that previously required code.
With Beaver Themer installed, you can set conditions that control the visibility of:
- Themer layouts
For example, you could display one Singular Themer layout when the post contains a featured image and a different Singular layout when the post doesn't have a featured image.
- Rows, columns or modules in both regular and Themer layouts
For example, you could hide a row or column when an ACF field has no value, or display a row only when a user has a specific user capability.
In particular, this beta release contains the following functionality:
- Added an all new conditional logic system with rules and rule groups.
- Added conditional logic system to the Themer layout admin screen. Removed old user rules.
- Added a new conditional logic visibility setting for rows, columns, and modules.
- Added rules for posts, archives, authors, users, and custom fields in the Advanced Custom Fields (ACF) plugin.
Let's unpack these one at a time, and then see the examples for some common ways you can use this new feature.
Conditional logic system with rules and rule groups
You can add one or more rules to form a rule group. You can add as many rule groups as you want. Rules operate with AND logic. Rule groups operate with OR logic.
For example, you could have two rule groups with two rules each for the following conditions:
Display this module if a particular ACF custom field isn't empty AND the post category is "news"
Display this module if a particular ACF custom field isn't empty AND the post category is "events"
Conditional logic for Themer layouts
When you edit a Themer layout the User field has been changed to a Rules field, which includes a much larger variety of settings for users, ACF custom fields, and post or archive settings, depending on the type of layout.
The following screenshot shows the user settings available in the Rules field. You can select not only logged-in vs. logged-out and user status, but also user properties such as user capability or even a specific username, as shown in the following screenshot.
In Singular-type Themer layouts, you can also set conditions that control whether layouts appear depending on the value or status or items in the post, as shown in this screenshot.
In Archive-type layouts, you can set conditions based on archive properties.
Visibility setting for rows, columns, and modules
In any Beaver Builder layout, you can set conditional rules on rows, columns, and modules by going to the Visibility field on the Advanced tab. The rules you set there determine whether the row, column, or module is visible or not. See the next section and the examples below.
Note: You can use conditional logic in any Beaver Builder layout, but conditional logic is only available when Beaver Themer is installed.
You can set rules for various aspects of posts, archives, authors, users, and ACF custom fields. The items -- for example, Post Title, Post Excerpt, Post Featured Image -- have some or all of the following operators:
- Is set/exists or is not set/doesn't exist
Used to show or hide rows, columns, or modules if the value is set (such as a featured image) or exists (such as a custom field)
- Equals or does not equal, starts with, ends with, contains, doesn't contain
Used to evaluate text values for a particular item.
Conditional logic examples
There are a huge number of ways that you can use conditional logic, but here are a few common use cases.
Display a Themer layout only when users are Editors and they are logged in
Suppose you want to provide special instructions to Editors when they are logged in, such as how to open the page they are viewing for editing in Beaver Builder. You could add these instructions to a Part-type Themer layout that appears at the top of the page, for example.
In this case, you can set the rule in the Themer layout editing screen, as follows.
- Create the Themer layout that you want to display.
- Click Edit to open the layout for editing.
- In the Rules field, set two rules in a single rule group: one for User Role and the other for User login status, as shown in the following screenshot.
- Click Update to save the edits.
Show a fallback image when a featured image doesn't exist
Suppose you have a Singular-type Themer layout in which the first row's background photo is set to the Post Featured Image, and the Post Title and Post Info are displayed in this row, as in the following screenshot.
If a post doesn't have a featured image, you want the row background to display a fallback image, such as the texture shown in the following screenshot.
Here's how to do that.
- Create a Singular-type theme layout.
The default Singular template displays the row background set to the Post Featured Image.
- Open the row for editing and click the Advanced tab.
- In the Visibility section's Display field, choose Conditional logic.
- Click Open conditional logic settings.
- Click Choose in the left column and choose Post featured image, then set the right column to is set.
- Save the module.
- Duplicate this row by clicking the Duplicate icon in the row's toolbar.
- Open the duplicated row for editing and go to the Advanced tab.
- In the Visibility section, click Open conditional logic settings.
- Change the right column's value to is not set.
- Click the Style tab and go to the Background photo section.
- In the Photo field, click Remove photo, then click Select photo and choose the fallback photo you want.
- Save the module and publish the layout.
Tip: You can make the conditional logic even more sophisticated by adding different fallback images for different post categories or custom fields. To do this, duplicate the row for each post category or custom field that you want to assign a fallback image to. To assign a post category, choose Post taxonomy term in the left column, then equals in the second column, Post category in the third column, and choose the specific post category in the fourth column.
Display a button only when a specific ACF custom field has a value
Suppose you have created an Advanced Custom Fields (ACF) field for posts so that you can display the company title below the Author's name in the post title row. But company title is not a required field, and you want to display the row or column containing it only when the company title field has a value. For example, here's a screenshot of a post that has the company title in a column layer below the author name:
And here's the same page when the ACF field is blank:
While the difference is subtle, the column layer containing the custom field without a value is no longer displayed, and the rest of the text has recentered vertically. The need to hide a row is much more obvious in the following case, where the lack of the custom field value would leave an empty blue band.
The solution is to set a normal field connection to the custom field in the module and then add conditional logic to the row or column containing it to display the row or column only when the custom field value exists. Here's how.
Note: With this procedure, if you have any other content in the row or column in addition to the custom field, it will also be hidden when the custom field has no value. Plan your rows and columns so you'll be showing and hiding what you want.
To hide a row or column containing an ACF custom field that doesn't have a value:
- Create a module to display your ACF custom field.
For example, add a Heading module, and in the Heading field, add a field connection to the ACF field. See the Related Articles for how to do this.
- Open the row or column containing that module for editing and go to the Advanced tab.
- Go to the Visibility section, and in the Display field, choose Conditional logic, then click Open Conditional logic settings.
- Click Choose, scroll down to the Advanced Custom Fields section, and choose ACF post field.
- In the second column, enter the field name of your custom field.
- In the third column, scroll down and choose is set.
This means that this row or column will display when this custom field has a value.
- Click Save.