We’re looking at this sticky menu that we just created using PHP for this Genesis website. But there is one thing that’s not that great about this menu and now you can see it.
Allow Menu to Collapse and Remove from Mobile Devices
See, it doesn’t have the ability to collapse and it would be great when it’s viewed on a mobile device not to have that menu at all.
Use Conditional Statements to Achieve our Goal
This is a spectacular little tool for the desktop but it seems to me we need to radically restyle it or get rid of it for the mobile device. And that brings us to WordPress Conditional Statements.
What is a Conditional Statement?
A conditional statement essentially asks if a condition exists and then if it does exist then it does something. It’s essentially an if statement, if this then that.
4 Types of Conditions
There are really 4 major types of conditions.
- If something is true
- If something is not true
- Else if something is true or
- Not true and then else
We are going to use a conditional statement asking if the device that is viewing the site is a mobile device then don’t display the menu. It’s very simple in concept.
WordPress Conditional Tags
It turns out, WordPress has a ton of conditional tags. The conditional statement is the if then statement. The conditional tags are a set of pre bagged conditions that WordPress has.
For example, if it’s the blog page, if it’s the front page, if it’s an admin page, if the admin bar is showing, if it’s a single post, if it’s the single post with the name of ‘Irish Stew’, if it’s a single post with a slug of ‘beef-stew’, if it’s sticky post, if it’s a post type archive, if it’s a page, if it’s page 42 and so on and so on.
You can see there are all kinds of conditional tags in here. We’re going to use a simple example right now but in later examples we’re going to take a look at more complex uses of this.
When to Use Conditional Statements, Example
Up to this point in this Customizing the Genesis Theme Using PHP class everything we’ve done so far happens everywhere. We removed the ‘genesis_do_subnav’ and put it to the top. That happens on every single page period but what happens if we only want that to happen on a certain number of pages? That’s where the conditional statements come in.
Create a Conditional Statement for Mobile Devices
Well, what we’re going to do is create a conditional statement that only does this action when it’s a mobile device and that’s a little bit trickier. Now, is_mobile is a WordPress conditional tag although it does not show up here but it is actually a conditional tag that WordPress has.
And is_mobile essentially looks for every device that’s not a desktop device, so is_mobile fires for tablets and smartphones. I don’t think it fires for Chromebooks, I think Chromebooks are considered desktop. Now we’re going to create the code to Remove the Sticky Menu from Mobile Devices.