Oxygen: Conditionally Display Content Using Built-In Or Custom Conditions

the ability to conditionally display content is an advanced feature in the dynamic data toolbox conditional display is useful for membership sites for instance to only show certain content if the user is logged in it is useful for showing information based on user role the author the post category or tag or any number of other variable conditions the conditional display of content based on a date range is a common requirement to show if a business is open or not if a deadline is approaching to show holiday information or to show information about an active sale conditional display is not available at all in some builders and others you can get the feature using an add-on oxygen is one of the few that has conditional display options built in oxygen's conditional display feature is very robust with a lot of options available in the user interface as well as a published application programmer interface for creating your own conditions hi this is david mccann for webtng in this video we'll look at two ways for conditionally displaying content and oxygen based on a date range either by manually entering the dates or by coding a custom condition to read the dates from a custom post type and apply display rules so here's an oxygen test site on my local development server in our scenario we have a fictitious company where the marketing team has decided that they want to increase customer engagement and to do that they're going to have hangouts with customers so they'll be online for a couple of days and customers can come by and ask questions and get tips and share how they're using the product on the home page they have this notice that a hangout's going to be scheduled on may 4th and 5th now what they'd like is that when the meeting is actually going on a banner would show alerting people that it was happening right now that it was in progress and so here we are in the oxygen editor that same page now the problem is of course i've added the banner here but if i save it to publish it then it will show up every day not just on may 4th and 5th so how do you handle that one option of course is you could come in on the morning of may 4th add the banner and then at the end of the day remove the banner and repeat the process on may 5th that manual process of updating the content back and forth gets a little old after a while and oxygen has a really good conditional display system so we can use that to help us out and avoid having to make the changes just in time to access the oxygen conditional display options first select the section or div or content that you'd like to conditionally display you can make sure you selected the right one by looking in the structure pane and then there's this icon here which i think is supposed to be kind of a logical switch here and this opens the conditional display settings so this is the first screen of the conditional display settings and you have two options and or or conditions and you'd use these if you are having more than one rule so if you're going to have more than one rule then you use and which means they all have to be true or you could use or which means if any of them are true and then this is just what happens in the editor so if we click this button here we don't have any conditions yet but there's a reminder at the top what our rule is when we click to add our first condition then we get a structured interface and on the left is the list of built-in conditions so for example you can create a condition based on the number of posts maybe show a special message if there aren't any posts or the archive post type or taxonomy terms maybe show a different banner image based on the post type the author name maybe show a different author box then there's an other category kind of a miscellaneous and so you have date time day of the week day of the month cookies session variables that's pretty powerful get into php or dynamic data so we can say custom fields or some other built-in wordpress dynamic tag we have features of the post if it's a post id the parent post id for like pages title has featured image so you know like if it doesn't have a featured image you can put in a placeholder maybe comment count has excerpts and so on and then some user rules is the user logged in what's their role so for example if you're in a membership site and the members have a certain member role then you could conditionally show them a special message depending on that role okay so these are all of the built-in conditions and you can see there are quite a few of them let's for example choose date because that's what we're going to be making our condition for this middle section is where you have the comparison operators so for dates you have it's equal it's after or before but if we look at a different condition then you see they have different conditional operators so it's contextual what makes sense based on the condition so let's go back to date and then it's kind of hard to see because it's very faint but it says mm slash dd slash yyyy so they're giving you a hint of the proper format our hangout starts on may 4th right now there is an option here you can pull in dynamic data if you want to compare on a custom field or some other dynamic data then you would use this button you see you have a lot of the options that oxygen gives us of different types of dynamic data including here is the advanced you can use a php function return value so you can create your own php function as well and so that's very powerful we're going to go back to our date so since we have two days we could say the date equals may 4th or the day equals may 5th but i think it's going to be better to say the date is after may 3rd or the day is before may 6th okay so that gives us our fourth and fifth in between that range oxygen automatically saves this let's save the page and now let's go to the front end and the banner is showing and here you can see on my computer it's may 5th so the banner should show so i always like to do a little extra testing to make sure things are showing as you expect so let's actually go and put in a date range where it shouldn't show today to make sure that it it hides as well as shows as we think it should it's very hard to see but there's a light blue background to this button and if we go into set conditions let's change this to be if it's after today's the fourth so we'll say if it's after the fifth and before the seventh so it would only show on the sixth so if this is working it shouldn't show now when we look on the front end and it doesn't there's our example of it working for the date let's go back into oxygen and you know realistically probably the marketing team is only going to be available between 9 00 a.m and 5 p.m so i think we need this and and we'll want to add some hours as well let's go in back and set this again so it's after may 3rd and before may 6th okay so that's the fourth and fifth and then we have an option here for time and we'll say the time is after and you see there's a little hint there h h colon m m colon ss so it's after o nine colon o o for nine o'clock and it is before 17 for five o'clock this is putting it between nine and five since it's not quite five yet my computer clock's showing it's 358 we'll say 12 for our testing let's save this and and now let's go back to the home page and refresh and it does not show let's go back into our conditions here and we'll change this to five o'clock and save that and refresh and there's our banner okay so that's how you can manually enter the date and times to create a display condition in our make believe scenario let's pretend that the marketing team had great success with this hangout idea and they've decided they want to do more of them so they want to have a hangout with the support team and with a developer team as well so how would you handle that one option would be on this page that you duplicate these two sections and you manually enter a bunch of display rules so that one set of sections shows on fourth and fifth or whatever days that team is going to be active and another set of sections shows some other day but adding all that kind of content and duplicating all of those sections that's a lot to keep track of and it become pretty messy so i think that it's probably a better way of handling it would be to create a custom post type for hangouts with the information so we can abstract out these things like the headline and the content like about which team it's going to be and the dates and put those in a custom post type and then pull that information dynamically so what i did is i used the free custom post type ui cpt ui to create a custom post type called hangouts and so i have another video in this series called custom post types and theme builders and it just walks through that process of using custom post type ui in advanced custom fields so if we go back here's advanced custom fields so with cpt ui you create the custom post type and with advanced custom fields then you add your custom fields so i created a field group called hangout fields for this custom post type and in that i have two custom fields start date and end date and what we can see is it's a field type called date picker and acf has two display sections one is the format it shows in the editor and the other is the formats returned on the front end so i selected those and then an option of whether it's required or not and with dates you might want to require the date if you can because i noticed that advanced custom field seems to return today's date if you try to pull a date and it's empty but anyway here's my definition of the start date and the end dates the same just a different field name there and then if we go look at the hangouts we can see i created two of them one for support team and one for developer team and if we edit them the title that's going to be this right here the content area that's going to be this right here and then here's the start date and end date and we'll replace the dates there with those values okay okay so now we have our custom post type hangouts we need to create a single template for it so i go to templates add new we'll call this a single for hangouts and we'll inherit from the default and we will assign it to hangouts and we'll give it a priority of 10 and save that okay if you're not familiar with creating templates and oxygen i do have another post and video on creating a website with oxygen where we walk through those steps so i'm kind of assuming that you know how to do that because i'm not going to go into it in detail here let's go in and edit with oxygen and let's see what we have here okay let's add a section okay now rather than create this manually i'm just going to save this and i'm going to go back to our home page here and i'm going to edit that with oxygen it's generally a bad idea to have two things open in the oxygen editor at the same time but i'm just going to copy the content from the home page over as a starting place okay so i'm going to use i have an add-on installed called hydrogen that lets you copy these sections and content so i'm just going to do that here and paste okay and now i'm going to go back here and i'll copy this one let's make sure we've got the right thing selected and copy and i'm going to paste that okay and i'll delete this extra one okay and so i'm going to close this other one now so i don't get confused i only have one open in the editor alright so here we have our single template and you can notice that we've got the option to preview using either one of these hangouts so i'll choose the support team one okay but it still says marketing team yep that's because we're going to need to replace the static data this here the content and the dates with some dynamic data so what i'm going to do is let's go and add we'll go into wordpress and dynamic data and let's add the title here it is hang out with the support team so i'm gonna delete this one now let's style this we'll choose the color and let's make it a little bigger and we'll make this section let's say 70 and make this a little bit bigger let's go to typography let's do line height and let's change it to uppercase so that kind of matches what we had before okay so there's oops one more thing here it's a little padding on the side here all right so here's our title pulled in dynamically now let's do the content so this is a text field here and this is just static text and the way you replace that is let's just select it and then you see oxygen gives you this option up here to insert some dynamic data some dynamic tags so we'll open this and here's the content option puts that shortcode in and there it's rendered it so now we're says support team again and now for the dates let's highlight the start date again we get this option here to insert dynamic data now this is an advanced custom field from the post and there's the start date now you have to have a format and i looked on this page in the wordpress like codex or whatever and it has a lot information about different options for formatting the date so i looked through that and what i found is i can use f for the full month j for the day and capital s for the suffix so i'm going to insert that ah it's happening may 4th and now let's say instead of and let's say through and we'll do the same thing again for the end date it's happening may 4th through may 5th so we have our dynamic data mapped here so let's save that and let's go to the admin let's go to the hangouts so we were looking at the one for the support team and yes the dates are may 4th and may 5th so let's view this one okay and there it is it has doesn't say marketing it says support and it has fourth and fifth it says support here all right let's go back and look at the record for the developer team and it says hang out with the developer team and it's may 18th and 19th hang out with the developer team okay so our template is working but there's a problem this banner at the top is showing and it's not the 18th or 19th so now we need to add a custom conditional rule that we create for handling this banner dynamically across the different records oxygen has some documentation on this in their help section they have a video on it and this is showing using the conditions like we walked through already but if you go down further then there's a section on conditions api application programmer interface and it gives you a lot of information on how to create your own custom condition all right so you can come to this article and it's linked in the companion the text version of the video in our case our condition is fairly straightforward so i created that in php and it's right here and we can walk through this so oxygen doesn't come with the functions php because it replaces the theme and i'm using advanced scripts because i like this a little better it has a few more it has some nice features but a very popular option is to use code snippets this is a free plugin in the wordpress plugin directory so you can add your code snippet using this plugin as well if you don't have advanced scripts but anyway so i've created this custom condition and it has two parts the first part here is where we declare the custom condition and the second part is the callback or the javascript function that's run to perform the logical tests that we want to check our rules to see if it should display or not so the first part of this declaration is this if clause and it's looking for oxygen vsb register condition and this is like a safety check because if oxygen doesn't exist you'll get an error so by doing this check you're ensuring that oxygen is there and you can register a condition so that's always a good idea to do that we're going to do something similar again further down below and this is documented you know in this help doc then here is where we actually register the condition this first line we're giving it a name hangout is happening then we have an array of options and it's true false these are the values that people can pick in the oxygen condition gui i'll show you these in a minute this is the comparison operator that's allowed so equals this is the name of the callback function hangout callback and then other this is the category of conditions that this will show up in okay so now here's the callback this top part you see that it takes two parameters value and operator but our condition is so simple that we won't actually even use these but you need to include them so first line here is is happening a php variable i'm setting it to false so by default i'm saying don't show the banner that's the default and we'll have to prove truth and you can't do that it's a good programming practice if something isn't found or whatever you're going to default to the safest option and then this line is to get the post id normally we'd have to pass that in and usually in functions when you're working outside of the template but this function is being called from within the oxygen template so the post id is available and we're getting that and then this is defining using the php function to get the date and then we have an if statement here and it has two advanced custom fields functions get field start date and get field end date and that's an if statement because again this is like a safety check to make sure that the dates exist the fields are there and the dates have a value and then we have the start date get the start date with the current post id the end date with the current post id and so then we have another if statement we say if the start date is less than or equal to today and the end date is greater than or equal to today so if the date falls within that range then we get a date time value back and i'm sending in the time zone where the server is so that we make sure we're getting the right hour and we're just returning the hour from this variable and we're saying if the hour is greater than or equal to 9 and the hour is less than 17 so if it's between 9 and 5 then is happening is true and now we return that so it's a little complicated it's programming all right so i'm going to turn this on and now let's go back into oxygen templates our single for hangouts okay and now let's select this banner and we'll go to create the condition we'll add our first condition and look here's our custom condition hangout is happening how cool is that this is the only operator option that we defined and we have the option of true or false in the oxygen editor it's all very simple now we're not having to have a bunch of different conditions it's all being done in that function so we'll save this so now let's go and check our hangouts let's view this one and the banner's showing we see it's 4 54 so it's not 5 o'clock yet on the 5th so that falls within the range and it should show now let's go look at the other one and the banner is not showing and that's because this one is the 18th or the 19th so we see that our condition is working as we want it to one thing i wanted to mention is whenever i'm programming i try to do some good testing to make sure things are working the way i think they should and so for instance here you might do a little debugging and make sure that your hour that's being returned here actually matches the time on your server and one way i've done that is that there is the plug-in free plug-in in the wordpress plugin directory called bug foo and what this does is it outputs your php dump variables to the chrome console so let's go and try that just to show you this and this is kind of a useful thing if you're doing any programming and it put its menu here under tools you see it's on so the way you call it is you use this syntax and this is your variable there so i'm going to copy this go into advanced scripts for instance and let's paste this in and we'll put in our hour variable and save before we do this i just want to show you one of the reasons why i like this advanced scripts let's say i made a syntax error here and put in a colon instead of a semicolon you can see the error it marks it there but also if you go to save look it checks and it tells you that there's an error with code snippets if you have an error then you might lose access to the site there's a way if you look at the code snip its documentation you can set like a debug variable or testing variable and get back in but i just find this more convenient just wanted to show you that so let's save this okay so let's go and view this our banner's not showing it's after five o'clock now but let's see what we get in the bug foo dump here at semi hour 17 which is five o'clock in 24 hour you know telling you which function it called so that's just a nice way that we can do some debugging if you don't have a php debugger set up or if you're working on your server online you can use this plugin to do some simple debugging all right so now let's have a little bit of discussion and conclusions what i found was that the built-in conditions that come with oxygen are pretty extensive these built-in conditions are available for any site builder that's using oxygen the ability to add your own conditions provides a lot of flexibility so that you can use conditions in context of your site and your content with very few limits of course this requires some php programming knowledge you need to be a programmer or a power user that's willing to do some research and figure it out it's this kind of feature that helps oxygen stand out and appeal to developers and power users it's another power tool in the oxygen toolbox so this has been my walkthrough of the oxygen display conditions and creating a custom one there's a text version of the video available on the web tng website along with other walkthroughs reviews and resources i hope you found this video useful thank you for watching

Channel: David McCan

Views: 1,565

Keywords: oxygen builder tutorial, oxygen builder display conditions, creating a custom condition, oxygen custom conditions, wordpress, best page builder, oxygen builder, wordpress dynamic data, oxygen builder acf, webtng

Id: bpgZdk2N4wI

Length: 28min 17sec (1697 seconds)

Published: Sat May 08 2021