Conditional HTML Output in Views

Views lets you control the HTML output based on post content. You can craft complex expressions that evaluate values of different custom fields.

On this page:

Introduction to conditional output in Views
Checking for empty fields
Checking other post attributes
Checking for a featured image
Checking for post taxonomy
Checking for Types checkboxes field
Checking for the current user
Checking for taxonomy attributes
Checking if a parent exists
Examples
Important notes

1. Introduction

Let’s start with an example.

I want to list todo items and strike-out items that are already completed.

Todos list with items striked

You can see what I’m actually trying to do is wrap the title with <del> … </del> tags.

To do this, we need to check which todos are complete and add these tags around their titles – when we output the View (obviously, we don’t mean to edit the title of the todo and add these tags to the database).

Edit the View, go to the Layout section and click to edit the Meta HTML.

Meta HTML editor with conditional output

This is the meta HTML segment that we used to produce the <del> tags around the title:

[wpv-if completed="wpcf-completed" evaluate="$completed = 1"]<del>[/wpv-if]
[wpv-post-title]
[wpv-if completed="wpcf-completed" evaluate="$completed = 1"]</del>[/wpv-if]

The wpv-if shortcodes are Views’ way of executing conditional logic inside Views and View Templates. This is how it works:

[wpv-if

  arg1="FIELD1_NAME"
  arg2="FIELD2_NAME"
  arg3...

  evaluate="EXPRESSION USING ARG1, ARG2, ..."

  condition="true|false" debug="false|true"]
<conditional-HTML>
[/wpv-if]

The arguments can have any name that you choose. If you call the first argument ‘arg1′, you will use it as $arg1 in the evaluate expression.

The condition (default=true) indicates the expected value of the evaluation. You can use ‘false’ values to display the output when the evaluate function fails. This way, you can implement if/else logic.

The debug option lets you understand what’s going on. It will output the error code, in case there is a problem parsing the expression in the evaluate function.

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

Variables defined as shortcode parameters starting with a dollar sign
Integer and floating-point numbers
Math operators: +, -, *, /
Comparison operators: <, >, =, <=, >=, !=
Boolean operators: AND, OR, NOT
Nested expressions – several levels of parentheses
empty() function that checks for blank or non-existing fields

2. Checking for empty fields

You can check for fields that are blank or that don’t exist using the empty function.

Testing if a field is blank or empty:

[wpv-if url="wpcf-url" evaluate="empty($url)"]
    No url given
[/wpv-if]

Add the “NOT” operator (!) in front of the empty function to test if a field is “NOT” empty:

[wpv-if url="wpcf-url" evaluate="!empty($url)"]
    The url is: [types field="url"][/types]
[/wpv-if]

Note:
You can’t use hyphen in the variable name (e.g my-website-url variable). So this one is not correct:

[wpv-if my-website-url="wpcf-url" evaluate="!empty($my-website-url)"]
    My website url is: [types field="url"][/types]
[/wpv-if]

Instead, use underscores:

[wpv-if my_website_url="wpcf-url" evaluate="!empty($my_website_url)"]
    My website URL is: [types field="url"][/types]
[/wpv-if]

3. Checking other post attributes

You can use any Views shortcodes, starting with wpv-post, such as [wpv-post-title] or [wpv-post-taxonomy] in the evaluate expression. This allows you to use conditional logic on the output you get from [wpv-post-xxxx] shortcodes.

[wpv-if evaluate="'[wpv-post-type]' = 'post'"]
    This is a Post!
[/wpv-if]
[wpv-if evaluate="'[wpv-post-type]' = 'page'"]
    This is a Page!
[/wpv-if]

The wpv-if shortcode does this by first evaluating the output of the shortcode and then adding it to the evaluation function.
For example:

[wpv-if evaluate="'[wpv-post-type]' = 'post'"]

gets changed to:

[wpv-if evaluate="'xxxx' = 'post'"]

where xxxx is the current post type.

So if the post type is a ‘post’ the function becomes:

[wpv-if evaluate="'post' = 'post'"]

which will evaluate to true.

* Note the single quotation marks around the [wpv-post-type] shortcode.

4. Checking for a featured image

WordPress stores the featured image as a custom field called “_thumbnail_id”. You can test for this with code like this:

[wpv-if image="_thumbnail_id" evaluate="!empty($image)"]
    <div class="my_featured_image">
        [wpv-post-featured-image size="full"]
    </div>
[/wpv-if]

5. Checking for post taxonomy

You can use the [wpv-post-taxonomy] shortcode to test if the post has any taxonomy before trying to display it.

[wpv-if evaluate="'[wpv-post-taxonomy type="post_tag" separator="" format="text"]' != ''"]
    <li class="my-tax-list">[wpv-post-taxonomy type="post_tag" separator=", " format="link" show="name" sort="none"]</li>
[/wpv-if]

* Note that the format used in the evaluation is “text”. If you leave this out then the [wpv-post-taxonomy] will generate links which causes problems in the evaluation expression.

6. Checking for Types checkboxes field

The Types checkboxes stores the state of multiple checkboxes in a custom field. Because of the way it stores the states you can’t use the empty function to check if any checkboxes are ticked. You should use the types shortcode and add it to the evaluate function instead and then compare the output with an empty string.

[wpv-if evaluate="'[types field='building-features' separator=''][/types]' != ''"]
    Building Features: [types field="building-features" separator=", "][/types]<br />
[/wpv-if]

7. Checking for the current user

Use the [wpv-current-user] shortcode to find the current user and display text based on who he is.

[wpv-if evaluate="'[wpv-current-user info="login"]' = 'bruce'"] Bruce is logged in [/wpv-if]

You can find a list of the available values for the info parameter in the wpv-current-user documentation.

8. Checking for taxonomy attributes

You can use the [wpv-taxonomy-xxxx] shortcode when querying taxonomies to test if the taxonomy matches the desired value.

[wpv-if evaluate="'[wpv-taxonomy-title]' = 'My tax'"] This taxonomy is My tax [/wpv-if]

You can find a list of existing [wpv-taxonomy-xxxx] shortcodes in the Views shortcodes documentation.

9. Checking if a parent exists

When using post relationships you can check if a parent exists by comparing the id returned for the parent and the id returned for the current post. If a post doesn’t have a parent it will return the current post instead.

Assume we are displaying a “Car” post type that usually has a parent “Maker” post type. You can use the follow to check if the car has a parent:

[wpv-if evaluate="'[wpv-post-id id="$maker"]' = '[wpv-post-id]'"]
The maker is [wpv-post-title id="$maker"]
[/wpv-if]

10. Examples

Evaluate the value of a string field

[wpv-if strfield="wpcf-somestrcustomfield" evaluate="$strfield = 'content'"]

Check for ages larger than 13 and color green

[wpv-if age="wpcf-age" color="wpcf-color" evaluate="($age > 13) AND ($color = 'green')"]

Display the correct contact details of Views consultants


<p>Location: [wpv-if location="wpcf-consultant-location" evaluate="!empty($location)"][types field="consultant-location" class="" style=""][/types][/wpv-if]
[wpv-if location="wpcf-consultant-location" evaluate="empty($location)"]The Internet[/wpv-if]</p>

<p>
<strong><a target="_blank" href="[types field="consultant-website" raw="true"][/types]">[types field="consultant-short-name" class="" style=""][/types]'s Website</a></strong>
[wpv-if phone="wpcf-consultant-phone" evaluate="!empty($phone)"] &nbsp; | &nbsp; Contact: [types field="consultant-phone"][/types][/wpv-if]
</p>

This code will display the contact information that we have. We check if the location field is populated (not empty). If so, we display it. Otherwise, we say The Internet.

Then, for contact methods, we check if we have a phone number and display that field if it’s not empty.

11. Important Notes (got problems? read these first)

I. Field names must be the same as appear in the database

The name of the field that you enter in the wpv-if shortcode must be the actual name of the custom field in the database.

Types appends “wpcf-” to all field names, to distinguish them. If you’re using this logic on custom fields that were created originally by Types, remember to add this prefix.

For example, if you’ve created a cost field, Types will save it in the database as “wpcf-cost”.

Otherwise, if you’re applying conditional logic on custom fields that were created somehow else, you shouldn’t add this prefix.

II. Use only lowercase letters for variable names

This is not going to work, because the variable name uses uppercase characters:

[wpv-if targetURL="wpcf-tgurl" evaluate="!empty($targetURL)"]

This works fine:

[wpv-if targeturl="wpcf-tgurl" evaluate="!empty($targeturl)"]

III. Nested wpf-if shortcodes wont work

Views uses the WordPress shortcode processing for the [wpv-if] shortcode. WordPress has limitations on Nested shortcodes.

Therefor the following wont work:

[wpv-if target="wpcf-tgurl" evaluate="!empty($target)"]
   [wpv-if details="wpcf-details" evaluate="!empty($details)"]
       <a href="[types field="tgurl" raw="true"][/types]">[types field="details"][/types]</a>
   [/wpv-if]
[/wpv-if]

This should be processed with a single wpv-if shortcode:

[wpv-if target="wpcf-tgurl" details="wpcf-details" evaluate="!empty($target) AND !empty($details)"]
   <a href="[types field="tgurl" raw="true"][/types]">[types field="details"][/types]</a>
[/wpv-if]