Conditional rendering

How to use the conditional field rendering

First of all, click on the "Add Condition" button. A new condition row appears:

[img]

A condition has several inputs:

• The option type

• The operator

• The value

• The logic respects the previous condition

• Show on Back-End

• Show on Front-End

Let's dive into it.

The option type

The first thing you have to choose is the option type. There are several possible choices:

• Value - This means that you are going to compare the value of this field. are allowed to use value

• Post - Selecting this option means that you are going to compare the post where the field is rendered.

• Related taxonomies - This select group shows you every taxonomy associated with the custom post type associated with the meta field.

• Other fields- If there are other meta fields associated with the custom post type a select group called "Other fields" will show the complete field list.

Depending on this choice, the other form fields will dynamically change. Please note that every time you change the option type field, the other fields are cleared.

The operator

As previously said, the operator choices depend on the previously selected option type.

1. If the option type is value - The available operators are:

   • equals

   • not equals

   • like

   • not like

   • empty

   • not empty

   If the meta field type is one of:

   • Number

   • Date

   • Time

   • Currency

   • Weight

   • Length

   then four more choices become available:

   • less than

   • less than or equals

   • greater than

   • greater than or equals

   otherwise, if the field type is Select multiple or Checkbox, these two extra options are added:

   • included

   • not included

2. If the option type is post - The available operators are just four:

   • equals

   • not equals

   • included

   • not included

3. If the option type is taxonomy - The available operators are:

   • empty

   • not empty

   • included

   • not included

4. If the option type is other fields - In this case, the operator choices depend on the selected field type. Please refer to the previous if the option type is value section.

The value

The value form field strictly depends on the previous two fields.

1. If the option type is value - The value form field is an input text, allowing the user to manually type the value. Please note that if you are using the included or not included operator, the values must be separated by a comma (ex. foo, bar, boom).

2. If the option type is post - In this case, the value field is a select box. All the published posts (sorted by post title) are displayed. If you are using the included or not included operator, the select box allows multiple choices.

3. If the option type is taxonomy - The value field is a select box. All the published terms for the selected taxonomy (sorted by term name) are displayed.

   If you are using the included or not included operator, the select box multiple choices are allowed.

4. If the option type is other fields - The value form field is an input text.

   Please note that if you are using the included or not included operator, values must be separated by a comma (ex. foo, bar, boom).

The logic respects the previous condition

If the condition is not the last conditional field rendering rule, the logic operator select box appears.

It allows two possible values:

• AND

• OR

Rendering the field

Each condition can be applied to Back-End (the WordPress admin panel) and/or Front-End (your public website).

Here are some examples:

1. Basic example Suppose you have a CPT with a Number field.

   You want to display the field only if its value is greater than 50.

   You need to set just one condition on the field and then include it in your pages and/or templates.

2. More complex example

   You have one numeric field, and you want to display it only in "Portfolio" category if its value is between 3 and 10. To achieve it, you need three conditions:

   • category includes in Portfolio AND

   • value less than or equal to 3 AND

   • value greater than or equal to 10

3. Advanced example

   You have two fields, the first one is textual and the second is numeric.

   You want to display the first field only on post "About us", if its value is "hello" or if the second field value is between 100 and 1000.

   You need 4 conditions:

   • post is equal to "About us" AND

   • value is equal to "hello" OR

   • second field value less than or equal to 100 AND

   • second field value greater than or equal to 1000

   The field will be rendered only on "About us" page, and if one of these two conditions is true:

   • if its value is "hello"

   • the second field value is between 100 and 1000