Highlighting entries about to expire "today"

Occasionally, you want to add a visual indicator to your View results to bring attention to an entry where the action is needed or its expiration time is due "today".

Here's how to achieve that using the [gvlogic] shortcode and a Custom Content field.

In this tutorial, we will use a very simple form containing just two fields: a Task Description field which is a Single Line Text, and a Task Due Date which is a Date type field. 

This is what our initial View looks like:

Let's add a Custom Content field to our View and write three [gvlogic] shortcode statements inside:

Here's the code:

[gvlogic if="{Task Due Date:3:mdy}" less_than="{date_mdy}"]
    <span class="gk-task gk-task-expired">Expired</span>
[/gvlogic]

[gvlogic if="{Task Due Date:3:mdy}" is="{date_mdy}"]
    <span class="gk-task gk-task-expiring-soon">Expiring Soon</span>
[/gvlogic]

[gvlogic if="{Task Due Date:3:mdy}" greater_than="{date_mdy}"]
    <span class="gk-task gk-task-on-time">On Time</span>
[/gvlogic]

Notice that we added one logic for each of three possible task statuses: Expired, Expiring Soon, and On Time.

The date field Merge Tag {Task Due Date:3} is using the :mdy modifier to modify this date to the MM/DD/YYYY format so it can properly compare against the {date_mdy} Merge Tag, which pulls the current date (today).

We also used some CSS classes to style each status according to their urgency:

.gk-task{
	color: white;
	padding: 5px 15px;
}

.gk-task-expired{
	background-color: red;
}

.gk-task-expiring-soon{
	background-color: yellow;
	color: black;
}

.gk-task-on-time{
	background-color: green;
}

Here's our View:

Amazing, right?!

We can also enhance our View by showing Dashicons instead of texts for each status. We just need to replace the CSS classes used and remove the texts:

[gvlogic if="{Task Due Date:3:mdy}" less_than="{date_mdy}"]
    <span class="dashicons dashicons-no"></span>
[/gvlogic]

[gvlogic if="{Task Due Date:3:mdy}" is="{date_mdy}"]
    <span class="dashicons dashicons-flag"></span>
[/gvlogic]

[gvlogic if="{Task Due Date:3:mdy}" greater_than="{date_mdy}"]
    <span class="dashicons dashicons-yes"></span>
[/gvlogic]

And here's the resulting View: