Beaver Themer has an amazing feature called Conditional Logic which allows you to control the visibility of rows, columns and modules on the front end based on some conditions. For example, you can hide a row for hero area if a post doesn’t have featured image. With the new version of Meta Box – Beaver Themer Integrator, you’re now able to show or hide rows, columns or modules when a Meta Box’s field has a specific value.
Let’s say you have a post layout created in Beaver Themer. And you set the layout to display post details (post date, post author, etc.) and sidebar for all posts.
However, your client want to hide the post details or hide the sidebar for some specific posts. How to do that with Beaver Themer?
With the help of Meta Box – Beaver Themer Integrator, you can do that quite easily without coding. Here are the basic steps:
Step 1: Create a meta box with 2 custom fields: one for control the visibility of post details and one for sidebar
Step 2: On the front end, edit the layout, and edit the Post Info module. Go to tab Advanced → Visibility → Display and select Conditional Logic. Then click Open Conditional Logic Settings.
Step 3: In the popup, select Meta Box → Post Field, and enter field ID and field value into the inputs:
Now the post details appears only when you set the field Display Post Details to Yes in the meta box.
Here is the video tutorial:
The Meta Box – Beaver Themer Integrator supports not only post custom fields for conditional logic. It also works with term custom fields, user custom fields and global settings pages. In the video tutorial above, I also showed an example with user settings.
So, you can set advanced rules like:
- Whether to show a module site-wide (based on global settings in a settings page).
- Allow users to have their own preferences (use user custom fields) to show or hide a module.
- Or simply let clients select which element to show or hide per post.
The cool part of Beaver Themer’s Conditional Logic is you can combine rules to create more advanced rules.
And when the rule is not satisfied, the module or column is not displayed. That also means no empty div is displayed, which is cool. It’s worth noting that previously, without conditional logic, when you output an empty Meta Box field, all the module’s div tags are still outputted.
This is the first version of the Conditional Logic integration. Although it works pretty well, we’ll improve it in the future. The next thing is transforming the text input for field ID to select dropdown, so you don’t have to remember the field ID.
We hope you like this improvement. And if you have any question or feedback, please let us know in the comments!