With Toolset you can specify the conditions under which elements of content should or should not be displayed.

For example, you may want to

  • display some text only when the value of a custom field matches a predefined value
  • change the style of a custom field depending on its value (e.g. render overdue tasks in red)
  • display alternative content if a field is empty
  • show different content to users with different roles

Toolset adds a conditional output button to the post editor which is used to generate wpv-conditional shortcodes that wrap the relevant content and include an if attribute that specifies the condition to be evaluated.

The source of the data that will be tested can be a standard or custom field, a Views shortcode that generates output (e.g. wpv-post-taxonomy) or other custom shortcode, or a PHP function that returns a value (including standard WordPress functions such as has-term()).

The value to be compared against can be a fixed value (e.g. a number or a string), the value of another custom field, the result of a calculation using fixed values or custom fields, or Views date filters (such as NOW()).

The conditional shortcode can include multiple tests, and conditions can be nested.

Complete details are available in the documentation linked to in the reading list at the end of this tutorial, but by way of a simple example, here is how we would add the string “URGENT!” to a template where the custom field ‘priority’ was 5.

  • In the template editor add the required string <p><strong>URGENT</strong></p>
  • Now highlight that same string and press the conditional output button
  • A dialog will appear where you can specify that the Types custom field priority from the current post equals 5, like so:
Dialog to insert conditional test for priority field

That will insert the conditional shortcode wrapped around the content, like this:

[wpv-conditional if="( $(wpcf-priority) eq '5' )"]<p><strong>URGENT!</strong></p>[/wpv-conditional]

(If you don’t previously highlight the content only the opening wpv-conditional shortcode tag is added, you will need to add the closing tag yourself, which you can do by pressing the conditional output button again.)

Learn by doing

In our Beyond the Basics training site we have an Events post type that includes custom fields for an event image and for the event date.

If you visit the event archive (from the menu choose Events -> All Events) you will notice that one of the events is missing its event image. We will add a conditional statement to test whether there is an event image, and, if not, display a placeholder graphic in its place.

For events that have already happened we will display the event date struck-through.

We will make these changes on the template for single events only, but you could make the same changes to the events archive and the events search page results. The template for events already exists, and we will edit it to add the conditions.

Display placeholder if event image missing

  • Go to the Toolset -> Dashboard page and click the link to the Layout for Events template
  • The event image field is added using a Visual Editor cell on the left. Edit this cell
  • Currently the cell contains just the Types shortcode used to output the image, namely:

    [types field='event-image' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='proportional'][/types]

    If there is no image field then it will not output anything, so we will leave the field intact and beneath it insert the placeholder graphic wrapped in a test for whether the event image is missing.

  • On a new line click the conditional output button
  • For the data type choose Types fields
  • Specify Event date as the field
  • For the comparison choose = (equals)
  • Leave the value empty
  • press Insert shortcode, which will insert just the opening shortcode tag
  • On a newline use the Add Media button to insert the greyscale ‘Open’ graphic from the Media Gallery (size Medium)
  • Press the conditional output button again to add the closing wpv-conditional shortcode tag
  • The content of the editor should now contain the following:

    [types field='event-image' alt='%%ALT%%' title='%%TITLE%%' size='medium' align='none' resize='proportional'][/types]
    [wpv-conditional if="( $(wpcf-event-image) eq '' )"]
    <img src="wp-content/uploads/2017/08/open_placeholder-300x180.jpg" width="300" height="180" class="size-medium" />

  • Save and close the Visual Editor cell

Strike-through event dates that have passed

Next we will use a conditional shortcode to test whether the event date has passed already, and if so add a class to the field so that we can use CSS to strike-through the date.

  • While still editing the Layout for Events, edit the Visual Editor cell on the right which outputs content from several event custom fields
  • Locate the line which outputs the field event-date and add a class of strikethrough to the p tag, like so:
  • <p class="strikethrough"><strong>[types field='event-date' style='text' format='F j, Y'][/types]</strong></p>

  • Now highlight the class you just added so that we can wrap it with a conditional tag to only output it when the date has passed
  • Click the conditional output button
  • Choose Types fields & Event date for the data origin
  • Choose less than for the comparison
  • Type TODAY() for the value, which Views will convert to today’s date
Dialog to insert date condition

Insert the shortcode, so that the line should now look like this:

<p [wpv-conditional if="( $(wpcf-event-date) lt 'TODAY()' )"]class="strikethrough"[/wpv-conditional]><strong>[types field='event-date' style='text' format='F j, Y'][/types]</strong></p>

  • Apply the changes and save the Layout
  • Try visiting the Drumming World Record event post on the front end and you should see the placeholder graphic in place of the missing event image.
  • Try visiting the Fashion Week event post and you should see the date is output with the text struck through.
Past event showing the date struck-through

Need help?

Go to the Beyond the Basics support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.

What’s next?

Step 4Re-use the same View with different settings