0:00:00
What’s up everybody? Welcome back to the channel. So today we’re going to cover something I feel like is extremely practical and useful and valuable. Let me explain the context. So every oxygen website you build, oh by the way it’s easy to do. It’s going to feel like it’s hard, but it’s very easy to do and it’s very quick to do. So every oxygen website that you build is going to have a primary page template and that’s going to have your header. It’s going to have your navigation. It’s going to have your footer. It’s going to have footer links. And when I build sites, I also tend to create a footer call to action section, which is the businesses primary call to action for their website. I put that just above the main footer so that it’s at the bottom of almost every single page that we build. Now, as you build more websites, you’re going to run into a bunch of different situations where you know some of these elements are just not appropriate for the page that you’re building. For example, the navigation, you may want to be able to turn that off or hide it like make it go away so that people can’t navigate the page. This is going to be very important on certain types of landing pages. You also may just want to be able to hide the entire header in general. There may be situations where you want to hide the entire footer or that footer call to action for sure you want to be able to turn that off on certain pages. You might want to keep your footer, but just turn off the footer links row, right? You’ll see what I’m talking about in just a minute. So what people tend to do in order to accomplish this is they create a bunch of different page templates to govern these different situations. Except page templates, in my opinion, are a little bit messy, a little bit clunky inside of oxygen. You get into situations where you need template priority control. And are you inheriting things from other templates? And what about elements like the navigation that are going to be shared across different templates? It gets very messy. It’s much cleaner, much faster, much easier and much better for the client as well. You’ve got clients who might be editing their website to simply add the functionality to turn elements on and off.
0:02:08
No switching page templates, no template priority control, no nothing. You just say on this page, I want to hide the navigation. Click navigation is gone. Hey, on this page, I want to hide that footer call to action. Click footer call to action is gone. If you want to know how to do this and do it quickly and easily, then let’s jump into the tutorial. Let’s take a look at the little homepage that I put together here. I’ve just used a bunch of Oxygen Ninja layout packs. I’ve got the header here. It’s got a sticky header. It’s got this hamburger navigation. We scroll all the way down. We’ve got our footer. Here’s our footer links row. Here’s our footer call to action that I was talking about as well. I want the ability when I’m creating additional pages on this site, to hide this navigation menu if I want to. To hide this entire header if I want to. Definitely to hide this footer call to action section. To be able to hide the links so that the branding and the tagline and the copyright notice stay here, but the links go away. Maybe I want to hide this entire footer altogether. I want to control all of these things independently without worrying about creating additional templates. For this, we’re going to use advanced custom fields. You can get away with the basic version. You don’t need the pro version. We’re going to use Oxygen conditions. Let’s just go ahead and dive right in. The first thing I’m going to do is I’m going to go to my admin, my dashboard. I’m going to go to custom fields. I’m going to create a new field group. I’m going to call this primary template control. One important thing here. Before we add any actual fields, you’re going to determine in advanced custom fields where these fields show up inside of WordPress. By default, it’s on posts. I want to change this to pages. Now, caveat here, you can actually assign this functionality to wherever you want. If you want this functionality on posts, if you want this functionality on custom post types, you can certainly assign it to all of those places. You would just hit and or whatever or say, or if you need or you add the rule down here. You can say post type is equal to post. Now it’s pages and posts. That’s that. It’s pretty simple. Before right now, just to keep things easy, we’re going to stick to just assigning this to pages.
0:04:38
Now, what I’m going to do is hit add field. I’m not actually going to add a field. I’m going to add a group of fields. Which is kind of odd because you’re already adding a new field group. Now, I’m going to add another new field group. Inside this one, they need to work on this terminology a little bit. So under field type, I’m going to scroll all the way down and I’m going to choose group. Now, I believe that you can do this in the free version. If you can’t do groups in the free version, I haven’t used the free version in a very long time. If you can’t do groups in the free version, you do not have to do this in a group. You can just do it without a group. Just do the normal field types that I’m going to show you in a minute. The reason I do groups is because this may not be the only set of custom fields that I add to pages or posts or custom post types or whatever. So this is specific functionality. I want all of these things grouped together in their own section. So I created group and when you create a group, it’s going to create these sub fields area right here. So this is where you actually add the custom fields to. So I’m going to add a field. We’re going to call this header because we’ll be for controlling the header. I also need to give this field group a name, by the way. So this field label. We’re just going to call this elements. Alright, cool. So I have header and field type. I’m going to go down and I’m going to choose. There’s actually a bunch of ways to do this. You can use a select field. You can use a check box. You can use a radio button. You could use true false. I’m going to use true false because I think this is the best from like a UI UX standpoint. I think this is the best way to do this. So I’ll select true false. And I’m going to hit this is not required. Do not make it required. And then in the message field, I’m going to say hide header question mark. You’re going to see how all this works in just a second. I’m going to click the button to stylize the UI. And then it’s going to be yes and no. Okay.
0:06:35
And before we go any further, I’m going to go ahead because I want to make sure that this looks the way that we want it to look. I’m going to go ahead and hit publish on this. And then if I go to my homepage and I edit my homepage, we should see the field group down below. Okay. So hide header. If I click that toggle, you’re going to say that it’s yes. It is hidden. Okay. This is the functionality that I want. I want the toggle when it’s on to make this statement true. Right. So yes, hide header should hide the header. The reason I have to do it this way is because the default is no. And we want we need the default to be no. All right. So and then this little message here just makes this toggle makes sense. So you know, if you just have a yes, no to the header, it’s like, well, what am I doing? I’m hiding it. I’m showing it. Like what am I doing? The default is no for hidden, which means the default is the header is going to show up. That’s basically what we want to have the default as if that made sense. Hopefully that made sense. You’ll see this more as as we get into actually building this. So now that I’ve seen that this is the way that I want it on this. Let’s just drag this to the top for a second. So it’s not hidden down there at the bottom. So primary template control. I have my elements and I have my header. So what we need to do is add our other elements. Do not add more elements. Just duplicate the one that you’ve already created under elements. We have header duplicate that. All right. Now that everything is set the way that you want it. I just have to change the labels. So this is going to be navigation and I’ll call this navigation. And then I’ll come down and just make this statement say hide navigation question mark. Okay. So I’m going to close that and we’re going to duplicate it. This is going to be footer CTA. Footer underscore CTA. Hide footer CTA. All right. Perfect. Everything else is good. Close that field. And then we’re going to duplicate that. And this is going to be the footer. We’ll actually do footer links first. So footer links hide footer links. All right. Perfect. And duplicate that. And then this will just be our footer in general.
0:08:49
All right. Hide footer. Yes. No. Okay. Perfect. Let’s go ahead and hit update. And let’s go back to our homepage. We’re editing our homepage now. It did not remember that I wanted this up there. Okay. Let’s update that. And let’s refresh. Is it going to remember? No. Okay. All right. Anyway. So we put it down here. Maybe I can minimize oxygen. There we go. All right. So you can see how how much control this is going to give us. Literally, we’re just going to be able to say, yeah, on this page, I want to hide the header. And I click the button. This page. I want to hide the footer CTA. And I want to hide the footer links. Right. And that’s that. No templates. No template priority. No nothing. All right. Super simple. So what I’m going to do is I’m going to set this navigation one. That’s the first one we’re going to work on to yes. Hide it. All right. Because I want something to work with when I’m editing my template on the back end. So I’m going to hit update here. So now technically on our homepage, the navigation should not be there. Now nothing’s going to happen yet. So we haven’t actually added the functionality. That’s what we’re going to do right now. So I am editing my primary page template. I’m going to go ahead and refresh all that new stuff that I just put in there shows up inside of oxygen. All right. So the editor has loaded. I’m going to go ahead and select my navigation. I’ll just do this in the structure panel. So we have main header. Actually, I’ll just click it. It’s going to open it and then I’ll close it again. Okay. There you see it right there is the menu. And we actually have two of them. We have one in the sticky as well. So we’re going to need to make sure that we control both of these because if I turn it off in the main header and I don’t turn it off in the sticky when somebody starts throwing down the page, they’ll still have access to the navigation. So we don’t want that to happen. So with this menu selected, I’m going to go ahead and click on this icon, which is the condition settings icon in oxygen. And I’m going to click set conditions. And then this allows us to show and hide elements based on certain conditions, obviously. And the default is to your controlling the condition to show the element. Like you’re creating the rule. If the rule is true, the element will be shown. So under this box right here, I’m going to select dynamic data. Anytime you’re working with advanced custom fields, you’re going to want to select dynamic data. And that gives you access to the advanced custom fields area. So I click advanced custom fields. And then you’re going to see all of my elements are grouped together in this group called elements. So if I click elements, now I get access to all of my elements. Well, what is the element I’m currently trying to show or hide? It is the navigation. So I’m going to choose navigation. That’s why I named things the way that I named them. Right? So you make it all makes sense in the back end. So I click navigation and then it says if set output custom on off text instead of true false. So remember when we were creating our field, I’m going to go down here to navigation. I checked this box stylized UI, which gives me access to creating custom text. Yes or no? That’s exactly why I need to be choosing this check box on this step.
0:11:56
So I’m going to hit otherwise it’s going to just say true false. Okay. So I hit insert and then I’m showing the navigation if that equals no. Because remember the statement was hide it. Yes. So if it’s yes, it needs to be hidden. If it’s no, it needs to be visible. Right? So this is showing the element if it’s set to no, which should be exactly the way that we want it. So I go ahead and close that out and hit save. And now we’re going to check out the front end, which for some reason there we go was having trouble loading. Okay. Somebody is texting me and I don’t want them to be texting me. Okay. It’s showing up on my computer. Okay. So remember we already turned off the navigation on the homepage. Now look, if I toggle this back to no and hit update, we should see a navigation. There it is. Right? How easy is that? So I do want to hide it. But I also remember I need to take take care of my sticky menu. So I’m going to choose this menu down here, which is actually in the sticky side of this. And I’m going to create the same exact condition. So we’re going to go to dynamic data. We’re going to go to advanced custom fields, elements, navigation, check the box, insert, and then put no. And then save. And let’s go back to home. Okay. It’s hidden. It’s hidden in sticky. Look at that. We’ve effectively in two clicks or really one click. But in like, you know, two minutes, created the ability to turn our navigation on and off. How amazing is that? How about our actual headers? I’m going to grab the entire header row, set the condition on that. Add your first condition, dynamic data, advanced custom field, elements, header, check the box, insert, no. Save. Let’s refresh. I have a header. I sell the sticky header. But if I go to my home and I edit it and I turn off my header and hit update. We don’t have a header anymore. How fantastic is that? Right? So I’ll turn that back on because I do want to header on this page. And I refresh. And there is my header. And my sticky header is back as well. Now let’s target this footer call to action section. So I come down here and grab this section. Add a condition, set conditions, add, and dynamic data, advanced custom field, elements, footer, CTA, check the box, insert, custom value equals no. Save. Okay. Let’s check it. It’s still there. Let’s turn it off. Hide footer, CTA, update. No more footer, CTA. Right? Now you do get the situations like this where you may lose some separation. But that actually still looks nice and clean. It’s actually not a problem at all.
0:14:50
But it’s not going to create any like just gaps or anything like that. It’s going to make that area go away completely. Okay. So next is, let’s go and turn that back on just so we can see our footer better. So hide footer, CTA. Let’s take that off. Refresh. There we are. Okay. Now I’m going to turn off this footer links section. So I’m going to grab this wrapper here. Make sure that that is the full wrapper. Yep. And I’m going to go to the second dishes, add first condition, dynamic data, advanced custom field, elements. This is footer links. And then insert, no. Okay. And I’m not going to go test this. We’re going to just do this whole entire footer as well. So I’m going to go set conditions on the footer, add condition, dynamic data, advanced. You can just kind of see like how easy and quick this all is when you when you don’t have to sit here and explain it. So I’m going to hit no save perfect. Now we refresh. So I should be able to turn off the links. Let’s hide footer links, update. There they go. So I’m left with my branding, my tagline and my my copyright notice down there. That’s all good. Let’s go back to edit. Let’s let’s let’s turn that back on. Let’s hide the entire footer update and entire footer is gone. I just finish out with a footer call to action. If I wanted to hide that as well, how easy is that? Footer call to action, hide yes, update. And that’s gone as well. And we just finish out nice clean page, whatever I you know I would build something custom for that page. Obviously to kind of finish the page off. But the this level of control, let me go back to camera here. This level of control is phenomenally valuable. Like I said, especially if you have clients editing stuff where it’s like you don’t want to teach them about templates and all of that. You just want to give them simple toggle switches where they can say yes, no, like turn it off, turn it on. That kind of thing. Other team members as well. So there’s less kind of like getting somebody involved in how a website work, how the templates are set up, what the templates do. You just give them toggle switches. It’s so much easier. And then think about your own websites that you’re creating, even though you created templates. If you finish a website and you start building other websites and you come back to this website six months later, your brain is not going to remember what all the templates were for and all of that. But they will remember toggle switches that have labels and you can say, oh yeah, turn that on, turn that off. Right. You don’t have to remember which templates you’re supposed to use on certain pages. So I just think it’s an overall much, much, much better experience for controlling things that we need to control on pretty much every website. I think it’s a really great solution.
0:17:45
Tell me what you think in the comments. And if you found this valuable, definitely hit like, hit subscribe. Just even if you don’t have a question, drop a comment of support below to show that you are engaged and that you’re loving what we’re producing. If you want to request a tutorial or training, you can drop those requests in the comments as well, but that’s it for today. All right. I’m out. Peace.
