5 Advanced Uses of Toolset’s Conditional Block in WordPress

   Agnes Bury

How to

August 10, 2021
15

The Toolset Conditional block allows you to control the visibility of any WordPress blocks you put inside it. You can create conditions based on custom fields, taxonomies, user roles, and other options.

You can use the Toolset Conditional block inside posts and pages, templates, lists of posts, or archive loops. This makes it a powerful way to customize your site without programming.

What You’ll Learn

This tutorial teaches the following 5 applications of the conditional block:

How Conditional Block Works

It’s super simple: 

  • When the condition you set is met, the contents of the block are displayed. 
  • When the condition is not fulfilled, you won’t see anything of what you put inside the block.

Here are 5 interesting applications of using the Toolset Conditional block that will help you understand the power it brings to your website development. You can easily use these ideas as starting points and customize them in any way you need.

#1 Label Some Posts with Special Text

You can use the Conditional block inside the Toolset View block that lists your posts and make some of them stand out or display important, additional information. 

In our example, we used the Speakers and Events demo site. We display a list of upcoming events and flag those that are free with a green label. At the same time, events that provide live streaming are marked with a red label.

List of events where free and live-streaming ones are specially marked

How-to Steps

Events are a custom post type on our site and here are the steps to display conditional labels:

  1. Add a custom Checkbox field to your post type. We named ours “Live stream”.
  2. Edit the posts you want to feature, and put a check in that custom field.
Custom Checkbox fields when editing our event posts
  1. Create a View or a WordPress Archive for displaying events.
  2. Insert the Conditional block inside your View Loop and click to add new conditions.
  3. In our case, we set up the following condition:
    1. In the first dropdown, select Post data.
    2. In the Post Source dropdown, select Current Event.
    3. In the Source dropdown, select our Field Group for Events.
    4. In the Field dropdown, select our “Live stream” checkbox field.
    5. In the middle dropdown, select the equal operator because we want to check when this field is equal to a specific value.
    6. Finally, in the right hand dropdown, select Static value and then type in the number 1. This is because selected checkbox fields have the value of 1 saved in the database.
Adding a condition that checks if a custom Checkbox field is selected

So, our condition is saying: show the contents of this block only if the current post of the loop has the “Live stream” field checked.

  1. Add the Toolset Heading block inside your Conditional block with the title of your choice, reflecting the meaning of your custom field, e.g. “Free entry”.
  2. Set up and style the heading block according to your needs. For example, you can set it as a paragraph with a green background and rounded corners
Editing a WordPress Archive for events with a dropdown showing block hierarchy

#2 Feature Some Products with a Best Seller Label

You can display a custom label in the same way as above but this time, do it for WooCommerce products. For example, you can create Amazon-like layouts featuring best-selling products:

Custom list of WooCommerce products where some products are marked as best-selling

How-to Steps

The steps are very similar to the ones described above:

  1. Add a custom Checkbox field to the Product post type. You can name it “Best Seller”.
  2. Select a few products you want to feature as best sellers, open them for editing, and check the “Best Seller” field.
  3. Create a custom archive for your products.
  4. Insert the Conditional block field and click to set up the conditions:
    1. Toggle the NOT option on the top left. This time, we’ll check for posts that do not have an empty value saved for the “Best Seller” checkbox.
    2. In the first dropdown, select Post data.
    3. In the Post Source dropdown, select Current Product.
    4. In the Source dropdown, select our Field Group for Products.
    5. In the Field dropdown, select our “Best Seller” checkbox field.
    6. In the middle dropdown, select the Empty operator.
Adding a condition that checks if a custom Checkbox field is not empty

To sum up, our condition will be true for posts that do not have an empty “Best Seller” field.

  1. Insert the Toolset Button block with the “Best Seller” label.
  2. Style your Button block the way you want. For example, you can use the border section to round the top left corner of the button
Editing a WordPress Archive for products with a dropdown showing block hierarchy

#3 Display a Submission Form Only if the Logged-in User Hasn’t Submitted Any Posts Yet

You can use the Conditional block to prevent the logged-in user from submitting more than one post of a given type.

In our example, we used the Dog Walkers demo site. Here’s an example of an account page with the form for submitting user’s personal information.

The form is displayed only when the user doesn’t have any posts yet

And here’s the same page when the current user already submitted the form so the page displays the user’s information.

View displaying a post submitted by the user

How-To Steps

Follow these steps:

  1. Create a View that lists posts you want. In our example, it’s “Dog walkers”.
  2. Select the View block and expand the Content Selection section. Click to add a query filter that displays only posts of the currently logged-in user (the author is the same as the current post in the loop).
  3. Insert the Conditional block inside your View but outside of the View Loop block.
  4. We can check if the View has returned any posts at all. Set up the condition as follows:
    1. In the first dropdown, select Views Shortcode.
    2. In the dropdown that appears, select Number of items found in Views.
    3. In the middle dropdown, select the equal operator.
    4. And in the right dropdown, select Static value and type in 0 (zero).
Adding a condition that checks if the View returns any posts

The condition checks if the number of the items returned by the View is zero. If so, the condition is met the Conditional block will display anything you put inside it.

  1. Insert a submission form inside your Conditional block.
Conditional block as it appears in the hierarchy of our View

And that’s it, this setup will display the form only if a user hasn’t submitted any posts yet. It will prevent users from posting more than one post.

Note that you can use a similar condition to prevent a user from submitting more than X posts. Simply compare the number of items found with the number of your choice.

#4 Feature Posts With a Specific Taxonomy Term

Another handy thing you can do with the conditional block is to test against a specific taxonomy term (or a category name) and style it the way you want.

In our example, we used the demo site with a directory of therapists. There, we have a taxonomy called “Type of therapy” with the following terms:

  • Couples
  • Family
  • Individual
  • Teenagers

We want to display the “Family sessions” label and an icon only for posts that have the “Family term” assigned.

List of therapists with a special label for those that provide family sessions

How-to Steps

We use the following steps:

  1. Create a View for displaying your therapists.
  2. Insert the Conditional block inside the View Loop.
  3. Set up the conditions. In our case, we need the following:
    1. In the first dropdown, select Post data.
    2. In the Post Source dropdown, select Current Therapist.
    3. In the Source dropdown, select Post Taxonomies.
    4. In the Field dropdown, select our “Types of therapy” taxonomy.
    5. In the middle dropdown, select the Contains option.
    6. Finally, in the righthand dropdown, select Static value and then type in “family”. 
Adding a condition that checks if the current post’s taxonomy features the “family” term

The condition checks if any of the terms assigned to the post equals to “family”.

  1. Insert the Toolset Button block inside your Conditional block. Set a label of your choice followed by some text, for example, “Family sessions”.
Conditional block as it appears in the hierarchy of our View

#5 Display Additional Information Only for the First Item In Your View

The Conditional block lets you check the current index of the View loop and display the content of the first item differently than the other posts.

This allows you to create interesting layouts of your posts. For example, you might want to include the product description and skip the Add To Cart button only for the first product on your list.

Custom list of products displaying different information for the first item

How-to Steps

To create a layout as in the picture above we will use the Collage type of the View output combined with the Conditional block checked against the “Current index in the Views loop”. 

We follow these steps:

  1. Create a View. In the second step of the View-creation wizard, select the Collage loop style, click Design to create your own layout, and arrange its items as follows:
Creating a custom Collage layout for the View
  1. Select the View block, expand the Limit and offset section, and under Items to display choose 5.
  2. Insert the Conditional block into the View Loop.
  3. Set up your Conditional block as follows:
    1. In the first dropdown, select Views Shortcode.
    2. In the dropdown that appears, select Current index in the Views loop.
    3. In the middle dropdown, select the equal operator.
    4. And in the right dropdown, select Static value and type in 1.
Adding a condition that checks if the current post in the loop is the first one

So, our condition checks if the current post of the View loop is the first one. 

  1. Insert the Single Field block inside the Conditional block and set it to display the product description or excerpt. This block will be displayed only for the first product returned by the View.
  2. Add other blocks to your View.

If you want to hide the Add To Cart button for the first product you will need to insert another Conditional block. It should check that the “current index in the Views loop” is not equal to 1.

Conditional block as it appears in the hierarchy of our View

Wrapping Up

As you can see, the Toolset Conditional block is an extremely powerful way to customize your pages, Views, templates, and archives. And just like Toolset itself, the best part is, you don’t need to do any coding.

Do you use Toolset Conditional block? Did you know any of the things described here? Want to share an interesting use case with everyone?

Let us know in the comments!

There’s More! 

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

 

Comments 15 Responses

  1. Great tutorial! Is there any way to dynamically/automatically set the best sellers for #2, based on actual sales figures?

    • We’re happy to hear you like it. There is no built-in feature in the Conditional block that would handle this automatically. There is the total_sales query filter for Views that allows you to, for example, list products with the number of orders greater than X but this is something else. You might want to try to create a custom shortcode and use the get_total_sales() function from WooCommerce, register your shortcode and then use this shortcode inside the Conditional block. I haven’t tried that though.

  2. Thanks Agnes,

    Some interesting design scenarios that are good to know about.

    On another note…

    I am noticing when I load some of the Toolset news posts in Safari that some images are loading really small with the captions 1 character wide in a long column underneath. I tested with Safari Technology Preview and the same thing happens. Unless there is something wrong with my computer config, I would check this out. I have notice a lot of issues with lazy loading lately, images slow to load or not loading at all to the extent the only lazy loading that is working reliably is the one that is built into SiteGrounds Optimiser plugin.

    • Thank you Stephen for bringing that up. I opened a ticket and asked our developers to look at it.

  4. When I look at this post in Safari on Mac the lazy loading does not work. On Chrome it works after small delay. Maybe lazy loading and Safari is the problem? Better not to use lazy loading until Apple fixes this? I don’t know…

    • Thank you Martin! You are right, I can see the problem you are describing in Safari too which makes it even more problematic. Our devs will look into it. Thank you.

  5. Is there a way to display the custom field with the highest value out of a group of custom fields?

    For example, CF1, CF2, CF3, CF4, CF5. Compare all five custom fields then show the value of the custom field with the highest value.

    • Hello Stan, there is no built-in “max” function/feature but I’m lacking a bit of context here to better understand what you want to achieve. Feel free to open a ticket on our support forum, describe your case and our supporters might point you in the right direction with some workarounds.

  6. Nice to see a cool example of a conditional statement in a collage layout.

    I would like to suggest that conditional statements being used for individual block parameters. Maybe something that would work like the screen size variables.

    If I want to display a container and change the border or the background depending on a conditional statement, the only way to do this that I can think of is to have separate conditional statements for every possible condition. If my container is going to contain a lot of information/fields, etc, then I have to create multiple copies of the same thing for every possible condition. I guess I could use a template, but that still adds needless complications.
    https://p119.p3.n0.cdn.getcloudapp.com/items/7KuEWvvm/06b9b536-3ab8-4a73-a3e0-207dfbe08b51.jpeg?v=c4ce9224dafac7724f5b37b34ab78129

    • Yes, recreating almost identical content can be tedious. You might want to try reusable blocks unless your content doesn’t include dynamic fields. I cannot think of any better ways now but I find it difficult to picture a real-life scenario of why you need something like this – what are these ‘possible conditions’ in your case? are these some complex expressions involving a few values each?

    • Vladimir we don’t have any comparison table with the “If-So” plugin but after taking a quick look I can see that this plugin is more general and access-control oriented while Toolset’s conditional block allows you to check custom fields, taxonomies etc conditionally.

  8. A real world use case would be the job listings on one of my sites.
    Currently I’m using Views to display a Bootstrap card and I’m changing the colour of the border depending on the job listing’s status (new, in progress, filled, cancelled, etc).
    Each job listing has multiple custom fields that also have conditional statements controlling their display.

    I’m in the process of changing the site to blocks but ran into a few roadblocks with the conditional requirements, taxonomies, etc and just stopped until Toolset catches up for anything beyond the very basics.

    • Darryl, thank you for sharing your example! Makes perfect sense. I think that for such cases it’s better to use the classic Views (where you can control HTML and CSS). I haven’t tried it but I’m thinking about creating a separate class for each status and then using the conditional output feature to provide the div with each class depending on the status. This way you define different versions of the wrapper (HTML divs, one for each status) and the actual output (the most complex part in terms of designing) just once. Maybe that’s exactly what you did. This method doesn’t work with blocks. Using classic Views versus blocks-based ones – both have their pros and cons.