In this guide, we’ll go through some real world examples of using multiple conditions on elements where it may be confusing to set up or where it seems we need both the AND / OR condition type and ways to workaround it.
If not from a developer background, conditions can be a bit tricky, especially when applying multiple conditions to the same element, the logic may not make sense at first.
The main thing to remember is that all the conditional statements that we add to an element are separate things that can only either be True or False. Are we on a page? Is the user logged in? Does the current post have an ID of 22. etc
They are not linked. If we have a condition for ‘after the 22nd May’ and then a condition for ‘after 12pm’, this doesn’t automatically mean after midday on the 22nd of May. These are two separate statements and it’s up to us to put them together in a way that gives us the results we need.
For most situations it’s obvious, but there are some that can be more confusing.
Adding Multiple Conditions in Oxygen
When adding multiple conditions in Oxygen, it matters if we choose the AND or OR condition type. This applies to all the individual conditional statements that we add to this one element.
The ‘AND’ condition type means that all the separate conditional statements need to return true for an element to display. The ‘OR’ condition type means only one (or more) of the conditional statements need to be true for the element to display.
We are not currently able to mix AND/OR condition types in Oxygen, but there is are ways of achieving the same thing.
Let’s walk through some examples..
Date / Time Opening Hours
Here is an example of when we’re trying to mix and/or condition types on one element.
Let’s say we have a little box at the bottom of the viewport that reads ‘Hey, we’re open now, call us’ to entice users to contact the business when they know they will be open. The business hours are 8am-4pm Monday to Friday, so that’s when we need the element to be visible.
The conditions in Oxygen that we’ll need to use for this are ‘Day of the week’ and ‘Time’.
We may be tempted to do this;
This would be wrong.
If this was set as an AND condition type, then this will always be false no matter what and the element will never be displayed. This is because it can’t both be Monday AND Tuesday, so the element will never be displayed.
If this was set as an OR condition type, then this would make sense for the days of the week, but not for the times. This is because no matter what time of the day it is, it will always be either after 8am or before 4pm. Even if it’s a Saturday at 10pm, the second to last condition (is it after 8am?) will be true, so the element will always show (as only one condition needs to be true).
The issue in this particular situation is that we need OR for the days of the week, but we need AND for the time of day. This isn’t currently possible in Oxygen, but there are ways of doing it.
Flipping the AND/OR by Using Negatives
One solution in these cases is to ‘flip’ one of the condition statements around to the negative. Doing so will mean we can then use AND instead of OR, or vise versa, to get what we want.
Let’s flip the days of the week so instead of mentioning the days that we want the element to appear, we’ll focus on the days that we don’t want and then switch to the negative operator ‘is not’.
So instead of having these statements;
- It is Monday OR it is Tuesday OR it is Wednesday OR it is Thursday OR it is Friday
We instead can use the negative using AND..
- It is not Saturday AND it is not Sunday.
It’s exactly the same thing, being true for weekdays and false for weekends, but we’ve written it in a different way.
Now we can fill in the conditions like this using the AND condition type;
Times That Pass Midnight
Let’s say we have an element that we need to display when a business is closed, something telling people to not call right now and instead fill out a form maybe.
These ‘closing hours’ could be 8pm until 6am. In spoken language we may say something like ‘we’re closed between the hours of 8pm AND 6am’, so it can be tempting to use AND if not thinking it through properly.
But using the AND condition type here is incorrect, because it’s impossible for a time to be both after 8pm and before 6am. If it is 10pm then it’s definitely after 8pm, but it’s not before 6am. Choosing AND would mean the element would never be displayed as both these conditions need to be true.
So we need the OR condition type in this case. Either the time is after 8pm (covering 8pm until midnight) OR the time is before 6am (covering midnight until 6am).
Wrapping in a div Method
Sometimes we need a mix of AND and OR, where there isn’t the option to flip to the negative.
Let’s say we wanted to show a call to action box just on pages or posts that contain the word ‘Tutorial’ in the title. Only on pages or posts, not on products or any other custom post type.
We’d add our element to our catch all template and may start entering in our conditions like this;
but this won’t work with either OR or AND. If AND, it will never be true as we can never be on both a post and a page at the same time. With OR it will return true for all posts, all pages and also any custom post type that happens to contain the word ‘tutorial’. This is the opposite of what we want.
One solution is to create our own custom condition, which Oxygen allows us to do with the Conditions API, with exactly the parameters we need. But there’s a simpler way if we don’t want to dig into PHP.
We can wrap a div around the call to action box and then have separate conditions applied on this container div. The first condition will need to be true to make the container div display. The call to action box will have it’s own condition needing to be true.
It would look like this;
For the outer container div – Does the current post title include the word ‘Tutorial’?
If so, then the container div is displayed, but the call to action box has a seperate ‘test’ to pass in order for it to be displayed. Are we on either a post OR a page (not any other custom post type)?
If true, then both our separate conditions have been true, so our call to action box will be displayed in only the places we want it to.
Feature Request
There is a feature request (with hardly any votes at the moment) asking for both AND/OR condition types to be allowed together inside the condition settings. This would remove the need for this type of workaround and make it much easier to have more control over displaying elements.
For a better understanding of how to create custom conditions in Oxygen, there is a tutorial walking through the code of the Conditions API. There is also the official documentation, which is worth a read also.
For site members, code for adding common use-case conditions using the Conditions API, not included in Oxygen can be found on the site with the ‘conditions‘ tag.