Secret New Feature!
I recently introduced you to the Divi Display Conditions feature. And while we knew it was great, it was missing a seemingly #1 feature – settings for custom fields. As I watch the Divi changelog closely, I noticed something new appeared in version 4.14.3. I did all the work exploring it for you and am happy to report that this feature is what I was waiting for! In this tutorial, I will introduce it to you and show you how to use this new Divi Display Conditions feature to conditionally hide and how modules based on custom field values!
▶️ Please watch the video above to get all the exciting details! 👆
Enable Custom Fields In Divi
The first step before we can begin using this exciting new feature in Divi is to enable custom fields. Perhaps you already have custom fields set up, that is great! You can skip ahead. I do not want this particular tutorial to become a lesson on using custom fields. If you want a dedicated tutorial on that, you can let me know in the comments. In this tutorial, I’ll quickly explain two types of custom fields.
Built-In Custom Fields
WordPress comes with built-in custom fields by default. However, these are disabled by default, so you may not even know about them! They are also a bit limited in comparison to some plugins like ACF, but they certain work great for basic needs. You can enable these in four basic steps from any page or post.
- In the top right corner, click the three dots menu.
- Click on “Preferences” at the bottom of the panel.
- A popup will appear. Click on “Panels” in the tabs on the left.
- Enable the toggle for “Custom Fields.”
Awesome! Now the custom fields panel will appear below the content editor area on the page like this:
Note that turning this setting on once on any page will enable it on all pages and posts across your site, which is great.
Custom Fields Plugin
If you need a more robust system of custom fields, you will need to install a custom field plugin. Some popular ones include Advanced Custom Fields, Pods, Meta Box, and many more. In my video accompanying this tutorial I show you some examples using ACF, but it really doesn’t matter what method you use.
Exploring The New Custom Field Display Conditions In Divi
As I mentioned, the Divi 4.14.3 update brought several new Display Condition features (I also have a feeling more are coming). One of those caught my eye, the one called Custom Field. Why? Because it’s the #1 feature that we all expected in the Display Conditions, and was oddly missing. So it’s a big deal!
The new Custom Field option is easy to locate as soon as you click to add a new condition. In any section, row, or module, click on the Advanced tab and open the Conditions toggle. Next, click the plus icon to “Add Condition.”
A new panel will appear with lots of choices.
For this tutorial, select the “Custom Field” option.
Now, you will see a panel appear to help you narrow down your selection of the specific custom field and its value that you want to use.
1. Select Custom Field Name
The first dropdown defaults to “Manual Custom Field Name.” Below it, you’ll find an input field where you can enter the name of the custom field. What you do here depends on whether you’re using the default WordPress custom fields or a plugin like Advanced Custom Fields (ACF).
- Using default WordPress custom fields: I recommend selecting the custom field name from the dropdown. This way, you won’t need to type it manually, and you can ensure it’s selected correctly.
- Using Advanced Custom Fields (or other plugins): You’ll need to get the exact field name from ACF and type or paste it into the input field. You can go to your custom fields and copy the ID or name there and paste it into this field.
The options that appear in the dropdown will vary based on the custom fields you have set up. After selecting the field, you can move on to choosing the condition.
2. Select Condition
The condition dropdown defaults to “Is,” but you can change this to fit your specific needs. Here are the available options:
- Is: Matches the exact value.
- Is Not: Does not match the exact value.
- Contains: Includes the specified value within the field.
- Does Not Contain: Does not include the specified value within the field.
- Is Any Value: The field has any value (useful for checking if a field is not empty).
- Has No Value: The field is empty.
- Is Greater Than: The field value is greater than the specified value (useful for numeric fields).
- Is Less Than: The field value is less than the specified value (useful for numeric fields).
Choose the condition that best matches your requirements, and then proceed with setting the value to complete the setup.
A very common use case is selecting “Is Any Value” which is one I use personally all the time. I explain this further in the video, but here’s a brief overview:
For example, if you have a Button module with its URL linked to a custom field with dynamic content, you might only want the button to display if there is an actual link present within the custom field. In this case, you would select “Is Any Value.” This means the button will only be shown if there is a link available to click, and it will not show if no link is added in the custom field.
NOTE: When you choose “Is Any Value,” the last dropdown for selecting the specific value is not needed because you are only checking for the presence or absence of any value in the custom field.
3. Select Custom Field Value
Depending on the condition you chose in Step 2, this option may not appear, allowing you to skip this step.
If the “Select Custom Field Value” option does appear, you must specify the value you want to compare against. This section is similar to the custom field name setup, featuring a default option labeled “Manual Custom Field Value” and an input field.
Unlike the custom field name, I recommend using the input field to manually enter the value you’re checking for, which ensures you have precise control over the value used in the condition.
Optional: Using ACF Grouped Fields
If you’re using Advanced Custom Fields (ACF) with grouped fields, like with gallery images in our Divi Dynamic Helper plugin, there is an additional consideration to keep in mind.
When working with a parent group field and its child fields, you may encounter issues if you try to add either the parent or child field names directly in the Divi Conditions. However, there’s a workaround: you need to combine the parent field name with the child field name.
For example, if your parent group field is named gallery_image_group
and the first image field within this group is named gallery_image_1
, you should combine these names with an underscore in between. In this case, you would use gallery_image_group_gallery_image_1
as the custom field name in the Divi Conditions.
This combined field name should work correctly with the Divi Conditions as outlined in our tutorial.
Conclusion & Use Cases
There’s not much else to say, other than to go play around with this for yourself! I’m sure you will find even more ways to use than what I in the video. Be sure to watch that for several real-world use cases on our new family website: Miller Family Adventure.
Tell Us A Creative Use Case!
Let me know in the comments what use cases you are building with this new feature! I know there are a lot of creative ideas out there!
I know it is not built in but could there be a way to display a module, row, section….depending what they have as a CSS id? I have two forms on 1 page but I only want displayed what they select from a menu ie…. #esp. Thanks! Mark
Sure you could do this as imply as just #idname {display: none;} and when that ID is added then it does not display the element on the frontend. You could also use a class.
Hi Nelson
Thank you so much for this tutorial and all the others. I really like your work!
I’ve noticed the Gallery on your Adventure page. Would you mind to give me a hint on how that is set up as a gallery from the images uploaded in the custom fields. Did you use a plugin to make the gallery or is it coded or even set up the the conditions function? Hope my question makes sense 🙂
Hey Dorthe,
The gallery is Custom Created using PHP and Advanced Custom Field plugin. If you want to achieve that so here is a hint:
First, inside the field group that you have created using the ACF plugin, create a field of type group and under that add the subfields with type image. If you want to show 10 images, add 10 subfields and set the output as an array of the group field.
After that, you need to create a code to loop through that array to display the images, and this code you need to add under the function that will create it a shortcode and that shortcode you need to place inside the code module and you will have your images.
Please make a tutorial, for all. I understand the Idea, but not to do.
Thanks.