Conditional HTML Output in Views

Conditional HTML output, in the Views plugin, lets you display sections according to logic conditions. This is similar to if/else statements in programming languages, just without having to write PHP.

Setting up conditional output using the user interface

Toolset Views provides a graphical user interface for setting up conditionals, making the process easier for you. You define your conditional output by filling out relevant input fields using a dialog.

If you setup your conditions using the user interface:

• You do not have to remember the exact names of your custom fields used in your site. The interface will provide you with a complete list,
• You will see a complete list of Views shortcodes that can be used in your conditions.
• You can register your custom shortcodes and functions via the interface.
• And more.

Once your condition is defined using the user interface, you can manually update it, if needed. More about setting up conditions manually.

Where the user interface is available

The user interface dialog for defining conditional output is available in all your WordPress editors.

In the Block editor for posts and pages:

• add Classic editor block, locate the “if” icon (as displayed in the picture)
  

In the WordPress classic editor for posts and pages:

• if you work in the Visual mode, locate the “if” icon (see the picture)
• if you work in the Text mode locate the conditional output button
  
  

In all Toolset editors (Views Loop Output and Templates for This View sections, Content Templates, WordPress Archive, etc.). Locate the conditional output button.

Entering the condition to display

You can start defining conditions using the user interface in two ways:

1. By selecting the conditional output first:
   1. In your editor,use your mouse to select the area you want to display conditionally. It can be any piece of content, a shortcode or a group of shortcodes.
   2. Click the “conditional output button”.
   3. Set your condition by filling out the input fields provided by the user interface.

Your output will be wrapped automatically in the conditional shortcodes.

2. By defining the condition first
   1. In your editor, position your cursor where you want your condition output to be displayed.
   2. Press “conditional output”
   3. Set your condition by filling out the input fields provided by the dialog
   4. Add the output you want displayed conditionally.
   5. Close the condition by pressing the “/conditional output” button.

Once the insertion dialog opens, specify your condition in the Conditions tab by filling out the provided inputs.

A basic condition is defined by setting up the following sections:

• Field
• Comparison
• Value
• Relationship

Field

Start defining your condition from setting up the Field. Data origin consists of one or more Field dropdowns.

• In the first one you choose custom fields, shortcodes, taxonomies or functions. Custom Shortcodes and Custom Functions will appear only if you have any custom shortcode/function registered in the Front-end Content tab of the Toolset Settings page.
• The value that appears in the second dropdown will depend on what you have selected in the first dropdown and possible relationships

All options are summarized in the list below.

Table 1: Possbile sources for Filed dropdown

Comparison operator

The interface provides you with six comparison operators: =, !=, >, <, >=, <=.

Table 2: Operators that can be used in the Comparison section

Note that you can use the comparison operators with different types. You can compare:

• strings
• numeric values
• boolean (true/false) values
• date fields

If you are using taxonomy as a field you can use include the term and don’t include the term operators.

Table 3: Operators that can be used for taxonomy terms in the Comparison section.

Value field

Usually in the Value field you will use text or numeric constants (‘red’, 500) but you can also use custom fields and more complex expressions together with mathematical operators. This table summarizes what can be used in the Value field:

Table 4: Value section of the Condition Output dialog

Connecting conditions

The Connecting conditions section of the dialog allows you to evaluate more than one condition in one if-statement. With the relationship operator (AND, OR) you can combine two or more conditions:

• the budget is greater than 1000 and the budget is less than 5000
• the work-experience is greater than 20 or the age is greater than 40

To use more than one condition in your if-statement use the “Add another condition” button. By default the conditions are AND statements.

You can use different options in the left side dropdown of the data origin for each condition, for example Types field together with Views shortcodes:

• the post excerpt (Views shortcode) is not empty and the gender (Types field)  equals female

Setting up conditions manually

You can also set up or update your conditions manually using the wpv-conditional shortcode.

Typical cases when you will manually update your condition:

• to add some attributes to shortcodes or custom functions used in your condition
• to quickly add the debug attribute (to enable the debugging mode for your condition)
• to test some special cases that are not supported by the user interface, such as checking for a featured image or to test if a post has a parent
• to evaluate more complex expressions.

Syntax

The basic syntax for wpv-conditional shortcode is the following:

The basic syntax for wpv-conditional shortcode

[wpv-conditional if="(expression)"]
	What will be done if the expression is true
[/wpv-conditional]

If the expression is true, then the meta HTML between the [wpv-conditional][/wpv-conditional] shortcodes will be executed.

The shortcode takes the following attributes:

• if (required): it is the evaluation string and holds the actual condition to evaluate

Inside the evaluation expression, you can use any of the following:

• Types fields
• Custom fields
• Views shortcodes
• Custom shortcodes that had been already registered in Toolset -> Settings -> Front-end Content
• Views Date filters
• Custom functions functions that had been already registered in Toolset -> Settings -> Front-end Content
• WordPress native functions that had been already registered in Toolset -> Settings -> Front-end Content
• Integer and floating-point numbers
• Strings wrapped inside single quotes
• Math operators: +, -, *, /
• Comparison operators: < or lt, > or gt, = or eq, <= or lte, >= or gte, != or ne
• Boolean operators: AND, OR, NOT

The shortcode attributes

[wpv-conditional if="( $(wpcf-budget) lt '50' )" ] Your output [/wpv-conditional]
[wpv-conditional if="( '[wpv-post-excerpt]' ne '' ) AND ( $(wpcf-consultant-gender) eq 'female' )"] 
Your output [/wpv-conditional]

More examples in the Example pages.

• debug (optional): it can be set to true or false and controls whether to display debug information for administrators. The default value is false

Debug

[wpv-conditional if="( $(wpcf-budget) eq '50' )" debug="true"] Your output [/wpv-conditional]

• evaluate (optional): it can be set to true or false and controls whether we want the condition to be met or not. The default value is true.

Evaluate

[wpv-conditional if="( $(wpcf-budget) eq '50' )" evaluate="false"] Your output [/wpv-conditional]

Debugging conditional output in Views

Debug output lets you quickly find why conditional logic isn’t doing what you expect it to do. When you enable debug output, site administrators (and only them) will see full details of the fields involved in the conditional logic and the way they are evaluated.

To enable debug mode, add the debug=”true” attribute to the wpv-conditional shortcode. For example:

Debugging conditional output in Views

[wpv-conditional if="( $(wpcf-budget) eq '500' )" debug="true"][/wpv-conditional]

You can also enable debug mode when you create the conditional expression. To do this, click on the  Conditional debug tab in the dialog for inserting conditional output:

Visit the “Using debug mode – example” subpage to see a detailed example.

Examples