When we create an archive of things that we list and add ACF custom fields to it, not every post will hold all the data required, and may be null(blank), in those instances we need to hide those fields.

Some examples:

  • Not every team member will include a mobile number, or social media links, we need to hide it.
  • Not every property will have a price, we need to hide it.
  • Possibly you have some icons with links like LinkedIn, and when there is no URL we need to hide it.

Let's dive in on how to make it work using conditions with Bricks Builder, you may skip to the end where I have the JavaScript snippet code and explanation on how to use it.

Create Custom Post Type

If you have your custom archieve created, or using WordPress posts you can skip this step.

First, let's create a new custom post type, in this example, I will create "People" to display employees of x company.

You can use the Custom Post Type GUI plugin.

Creating custom post type People inside the CPT UI plugin

Ensure that you have the archive set to "True".

Setting archive to true inside custom post types UI

Add Custom Fields using ACF

Now I am going to include some custom fields for people, using ACF.

  • Contact Number
  • Email Address
  • LinkedIn
  • Short BIO
  • Experience

Assign it to Custom Post Type "Person"

Adding custom fields inside Advanced Custom Feilds

And finally, I'll add 3 random people to it with some information missing.

  1. Person 1(John Doe) will have all details included
  2. Person 2(Jane Doe) prefers not to have their phone number listed
  3. Person 3(John Smith) has no LinkedIn account

For person 2 and person 3, there will be some data missing.

Create a new Archive

Let's create a new archive for people, below are the steps.

  1. Bricks>Templates
  2. The title "People Archive"
  3. Template Type>Archieve
  4. Publish
  5. Edit with Bricks
Create n archive template inside Bricks

Add Query Loop

Let's add a new query loop from Bricks Builder.

  1. Add new section
  2. Inside container
    1. Add column and row gap to 20px
    2. Set flex-wrap to wrap
    3. Set Direction as horizontal
    4. Added Align the main axis to "Space Between", missing in the screenshot below

Adding container inside Bricks
  1. Add a div inside the container (or block to your preference)
  2. Select "use Query Loop"
  3. Choose post type "people"
  4. Add width 32% to div.
Adding div with query loop inside Bricks
  1. Add a featured image using dynamic data
Adding featured image

Add the following using dynamic data inside the div:

  1. Phone Number as the basic text block
  2. Email as the basic text block
  3. LinkedIn Icon
Adding telephone, email and LinkedIn to bricks query loop for people

Now we hit a slight issue with the data showing where we have empty values, the icon shown and also the <p> rendering which leaves not a nice gap.

Hide Data Conditionally

Because there are at present no conditions available built into Bricks that I am aware of, we are going to do some manipulation with JavaScript, and add .acf-class to items we will need to show or hide.

Add a new code block inside the section, as the last child item, and add the following code:

<style>
.hidden {
  display: none;
}
</style>

<script>
const acfHideFields = document.querySelectorAll(".acf-field");

function isValidHttpUrl(string) {
  try {
    const url = new URL(string);
    return url.protocol === "http" || url.protocol === "https:";
  } catch (err) {
    return false;
  }
}

acfHideFields.forEach((e) => {
  if (e.innerHTML == "") {
    e.classList.add("hidden");
  }

  if (e.tagName === "A") {
    if (!isValidHttpUrl(e.href)) {
      e.classList.add("hidden");
    }
  }
});
  
</script>

Ensure to click Execute code, and that you have code execution enabled in Bricks settings for Administrators.

Now we need to add the .acf-field class to elements where we think data might be missing, in this case, I will add it to number, email and icon fields.

adding .acf-field class to fields to set up a condition on them
It may not look correct in the back end.

The Result

Head back to the front page, and you should see hidden fields that have no data in them.

Result on the front end with the conditions
Note: Included their names.

It's always better to control the conditions with PHP, as nothing gets rendered on the front end.

Alternatively, you can use a code block, and write some PHP with conditions for ACF.

References: