Utilizing Meta Box Settings Page Data in Oxygen Builder

[Music] hello everyone welcome to the next video in this video we are going to be diving into metabox setting pages so i'm in the back end here and in the meta box menu we're going to choose settings pages i'm going to go ahead and click new settings page and we're going to do custom settings is what we'll name it and i'm just going to copy that and paste it here as well and we want this to be a top level show after we're gonna set this um down to settings just so it shows down here as well um default first submenu title i'm gonna leave blank my dash icon i'm going to set to a wrench but you can choose whatever you want and you can also use a custom svgs or a custom url to for your icon but i'm just going to use the dash icon of this wrench let's scroll down some more and see what else we can set here i'm not going to change the required capabilities or css for style you can choose boxed or no boxes i'm going to choose no boxes i'm going to leave it at 1 columns and next what we're going to do is set tabs up so i'm going to click add new we're going to enter our key here and i'm just going to do general and general settings make sure you spell that correct and i'm going to add one more tab here and we're going to call this company and company settings and you can add as many as you choose i'm just going to do two for now and we can choose our tab style whether you want it to be top or left i'm going to go with top just for this and i think that's all we're going to set here for this so i'm going to go ahead and hit publish and i'll automatically set our settings page id so next what i want to do is come over to my custom fields and we're going to add a new one and we're going to call this one um it's going to go along with our general settings so we're going to call this general settings group and for my settings we're going to come over in here and choose instead of post type we're going to do settings page and in our drop down here we're going to do custom settings and now you'll see that since we set tabs we do have to choose our tab in this case we're going to do general settings and now we can come back over to our fields and again you can choose your tab style here i'm just going to leave it as default and back over to fields we can start adding in our field groups so let's go ahead and start with our general we're going to do a a text field here first and i think for this one we're gonna do um footer copyright and i'm just gonna rename this as well leave it as text for a text description we can put something in here and say something like enter any footing text such as your copyright and i think we're going to be good with that field we can choose to change how many columns it is um in my case let's go ahead and bring it down to six which will take up half of the space so i'm just gonna make that a little bit smaller and we're going to jump to our next one which is gonna be i think we're gonna do a little fun one here so i'm gonna add a field here and i'm gonna add all the way at the bottom you can use um some layout things so i'm to do a divider here and just leave this as is minimize that i'm going to add in another field and we're going to go with um a switch here so it's under the advanced group here and i'm going to choose switch and what we're going to be doing is building out a header notice so i'm just going to label this enable header notice we're going to leave this as a switch and we can put in our descriptions if we need to but i don't think we need an any for that what we're going to do down here is we want to label our custom on and off so i'm just going to do enable and disable you can choose whether you want it to be on by default or not or required i'm going to just leave those blank and for this i am also going to set this to let's go with six so again that'll be half of our width once we get there i'm gonna now minimize this and we're gonna add another field and this one i'm gonna go all the way down and choose the wysiwyg editor under the advanced here and we're just gonna label this header notice text and the reason i am choosing the wysiwyg editor is so that we can actually put links in there where if we just use a text area it might only be a notice instead of letting us build in some sort of linking to a page so from here we can add in maybe an input description all right and i'm gonna change my columns to six and i think we're going to be good there i'm going to go ahead and hit publish on that and we are going to add our next one so in this group i am going to call this we were doing it for our company settings so we'll just name it company settings group under my settings i'm going to do the same thing under our location we're going to switch from post type to settings page we're going to choose our only one that we have set up which is custom settings and then we're going to set our tab which is going to be company settings now i'm going to jump back over to my fields um let's see here did yeah we left our tab style the default which is default is blank as well so i'm not going to change that like we did on the last one under our fields tab we're going to first enter um email so you can just start typing that in here and we're going to do company email address for a label actually we're gonna do an input description we don't have to do a default value and i am going to set my columns to 3. so that'll take up a fourth of the space when we get there next i'm going to minimize that one and we're gonna add a telephone number which you can search as phone and this one we're gonna do company phone number and we're just going to add in a label for input description we are going to set this to three as well i'm gonna minimize this next i am going to add in a text area and we're gonna call this one company address and again this one i'm going to set to 3 and you could choose to do the google maps field here but you do have to enter an api if you do that so i'm just going to stick with the text field or text area here i'm just so we can show the address so i'm going to go ahead and minimize that and we can jump to our next one next i'm going to again add in our divider i'm not going to change anything there i'm just going to minimize that and next i'm going to add in a checks check box list so let's go ahead and choose that and we can label this days that you are open and again you can label these how you choose to that just works for me for input description let's um put in a description saying check all days that you are open and for our choices what we are going to do is just do monday tuesday wednesday thursday friday saturday and sunday make sure you spell those correct and you will see that you can also um set your values like this if you so choose but if you do just put in one it does um both for the value and the label so i'm just going to do the one like this i am going to do a display toggle all button so that's going to allow us to i'm just click one button to check all of the boxes and for this one i'm going to set its width to or columns to three and we're gonna come back here in a little bit so i'm gonna minimize that and next we are going to enter in just a text field and we're gonna do monday hours actually i'm going to do monday open hours for our input description we're going to say enter your hours for monday and let's see here let's set this to three and actually i'm gonna do enter your hours for this day just to save myself a little bit of time here because what i'm gonna do is just duplicate this a bunch of times so i've got two three four five six and seven so now i can open up my next one here and we're gonna do tuesday hours and that way i only have to type a little bit less so i'm going to minimize that and we can do this let's delete out the copy and we can do all right and so on and so forth if we didn't duplicate this as i label these the id would change automatically so that is one downside to duplicating as it won't do that anymore all right only two more here and our last one all right so we are good to go on those so what we're going to do now is on each of these days we're going to jump back into them and we're going to go to advanced and we're going to do conditional logic and we're going to add a rule and what we're going to do is leave it as visible when any conditions match what we're going to do is we're going to set a field here and we're going to have to come back up to our days open i'm going to copy this and we're going to paste that in there and we're going to do match and what we want to match is our label so because we put them in as making our value and label the same we do want to make sure that it is capitalized so you see that we have when days open match monday we're going to show show this field and we're just going to repeat this for each of the days now let's go down to tuesday let me minimize this first and i suppose i could have done this before i duplicated everything but this way you get to see a few more times that how we set this so again we want it to be visible when any condition matches and we're going to paste in our field here and then we're going to type in the day as it matched in our checkbox field so i'm going to go ahead and minimize that one and we're just going to continue to work our way down here add our conditional logic paste in our field we're going to set to match and we're going to type in the label and you'll see once we get to our settings page exactly how this is going to look did i do friday already we did it all right only two left and you do want to make sure that you get your spellings matched here correctly otherwise it's not going to work and our last one all right so we got all of those in there and now we can go ahead and hit publish so now let's jump over to our actual actual settings page so you'll see that right under settings where we added our page it is showing as custom settings so i'm going to go ahead and go in there and you can see that because of how we set this up we have it set to it was a column of six so it's only taking up half of that area and we have our two tabs at the top here so what i'm going to do is i'm going to copy over just some data for our copyright field because i don't remember the how to make this symbol i just copy it every time and you could set this to be whatever you want and um typically in my case i i use oxy extras which has the ability to put in the copyright dynamically to always have the current date so that's typically what i do but i have seen a lot of themes have options to add in your footer copyright text so i just want to show you how you can do that here so we did that and then you see we have our enable header notice and i can either enable or disable and that's showing as what we put in for our labels here and then here is the field for that so what we could do is say you know type any type of thing this is a notice for more info please click here or please visit our info page and we're just going to highlight our info page and if we click this little toolbar toggle we do get more options here but all i'm going to do is click insert edit link and in our case i'm just going to put a hash here since i don't have an actual page but you would put your link in there just like that and now i'm going to come all the way down to the bottom click save settings now let's jump over to our company settings so you will see right now that none of our hours text fields are here but if i go ahead and click monday monday shows up if i click tuesday tuesday shows up and i can also do toggle all and they all show up for us so what i'm going to do is just fill all of these in i'm going to do email at company.com for our phone number we'll just do we'll do 555-555-5555 two three main street we'll do new york and why i don't know what the actual zip code is there but we'll just enter it like that and again if you're in a different country you can enter your address as need be but i'm in the u.s so i'm going to do something like this and now for our hours we're going to go ahead and just go through and set all of these so i'm going to do let's do 8 am to 5 pm and we're going to just copy and paste this through all the days monday through friday and then saturday let's do 8 a.m to 12 p.m and we'll do the same thing here and again you could also put closed here and maybe i'll just do that or you could also just choose to hide this field it's up to you how you want to do that but i just wanted to show you the options here of what it would look like if you wanted to conditionally show these all right so we have all of our data in our two tabs here all filled in so now let's go ahead and jump into oxygen so i'm going to go to my templates and i'm going to add a new template and we'll just do pages for this one and i'm going to go ahead and hit publish and now typically what i would do is set this as my main template that inherits everything else but since i already have one for this site that i made i'm just going to start with a brand new one here but in this case this is how i'm doing it so i'm just setting you know as for my example here doing settings page template so let's go ahead and dive into oxygen and while this loads up metabox did a really good job of integrating with oxygen the team did it made it very easy to do so let's go ahead and um start by adding in and i'm gonna pull in some things from our library i think i was using the hosting before so we'll do sections and elements and i'm going to do a header and we'll choose this one and we'll also add in a footer i'll go with this one and then i'm going to add in my inner content and i'm just going to set that between the two here so we have that in there and the one thing i didn't mention that i probably should have is there's one thing that um in settings pages that is currently not working and i'm guessing it's something that oxygen and metabox are going to um get working before the full stable release we are still in the alpha version so it's the first first integration where everyone gets to test but they recommend not putting it on a live site yet so one of the things that i would also have put on my in my settings page is a logo field so that a person can just upload their logo right there and we could pull it in but when we do that it doesn't actually work properly it just shows as empty so that is why i didn't do that in this tutorial but i did want to mention that and i do expect as i mentioned as the next versions come out from oxygen i expect that to be resolved so most of what we did was things we're going to put in our footer so i'm going to start down there and then we'll come back up to the top for our notice so you can see we have four columns down here in my second column here or third column i apologize we have our heading and i'm just going to change this to company info and you can see we have two three text links i'm gonna delete one of them and we're just gonna add in a text field at the bottom in our first text link we are going to go ahead and double or triple click in here to highlight it so we can do insert data and now we'll come over to metabox field and you can see any of our fields that were put into our settings page get this blue color to them so this lets us know that these are from our settings pages so what we want to first do is add in our company email address and i'm going to click insert and done and you can see that showing there we also need to do the same thing on our url so i'm going to click data meta box fields and again you see that they are blue here and we're just going to choose our email field and we have that set i'm going to come down to our text link and i'm going to click into insert data meta box field and this one we're going to choose company phone number insert and what i'm going to do is copy all of this because as i mentioned in my last video the telephone link is a little bit um funky compared to the email it doesn't um operate how i would expect it to and it is something that i brought to the attention of the oxygen team so we will hopefully see that fixed in the later releases as well so i copied this short code and i'm going to click done and you can see our phone number does show up there and when i come up to data and meta box field you can see that our company phone number does not show up here and this is what i'm talking about that i would expect this to show up just like email does but it doesn't so this is why i copied that short code so that i can paste that in here and what i'm going to do is scroll all the way to the front here of my short code and we're gonna just type in tel with our colon all right so we got that set and now we can come down to our text area here so we can double click this insert data metabox field and we're going to go to company address and we're just going to insert this and click done and you can see it's showing up as a different color so we can see what they set here for our class so i'm just going to do actually i'll just set the text color here which i think they go with this gray here so that way it matches everything so i'm going to go ahead and click save just so we have that set and let's go ahead and dive to the front end got a critical error i'm not sure what's happening here all right so what i ended up having to do is just go to my home page which is what we are previewing here and i just needed to render the page using the template that we're using i'm i was trying to pull two templates which is why we're getting that error so once i set it to settings page template and clicked update everything was showing properly here so you can see that we have our email here and when we hover it in the bottom left hand corner it is showing our mail to link when we do the same thing with our telephone number we're getting our proper tell link in the bottom left corner and we have our address here so let's go ahead and jump back in here and see what else we can set so i have this open i'm going to go back to my settings page here um we did want to also set our footer copyright so in here i'm going to um change it down here so in our oxygen builder i am going to double click this area and we're going to still leave the text that's below it insert data meta box field and footer copyright and insert and done and you can see now it is pulling that in correctly so again i'm going to hit save we're going to refresh this on the front end and you can see that changed for us and again that is pulling from our custom field here and so far we have our company email address phone number and company address next let's go ahead and add in the hours so jumping back into oxygen builder what i'm going to do is actually delete this fourth div and i'm going to duplicate this one and i need to go back and fix my columns here because it made them all 33 percent when i deleted that all right so we should be good here and what i'm going to do and this one i'm not sure why it's showing the fields here and not here but what i'm going to do is just delete out our text links here and just leave our text that we have on this one what i'm going to do is type in monday colon insert data meta box field and we're going to choose monday hours and insert and done and you can see that it is pulling that data in you can also choose to just bold monday so let's go ahead and do that and you can see that jumps out a little bit more so next i am going to duplicate this six more times so that i have every day showing here and what i'm going to do is just double click we're going to change this to tuesday and it looks like i may have broke it let's try this again i'm going to just hit undo here and see if we can't fix that i'm not sure why it's putting those inside here let's just go ahead and delete all of these and you can see this this is why they have alpha versions come out is so when you get some goofy things going on like this um you're not breaking your actual site so let's just start over here i'm just going to add in a text field we're going to again click in to insert our data we're going to type monday i'm gonna bold that right away make sure i'm at the end i'm gonna hit space insert data meta box field monday open hours and insert click done and again i'm going to change my text color to this gray and let's go ahead and duplicate that this one we're going to change to tuesday highlight that short code insert meta box tuesday hours gonna insert and done and again we're going to duplicate this and just continue until where we've got all of these done and again you can see it jumped my monday around here so i'm going to do hit save here and refresh on the front end i just want to see what shows up here all right so we do have our monday and tuesday showing properly i'm going to hit refresh in oxygen here when i was doing this and testing it out initially i did not run into this issue but i don't recall if i was actually duplicating the field or if i was just adding a new one each time so let's try this again i'm going to hit duplicate i'm going to copy everything insert data meta box i'm going to choose wednesday insert and now i'm going to go ahead and type in wednesday and we'll highlight that and again we're going to bold it and click done let's go ahead and duplicate again and again you can see it's bumping it around on me i'm gonna hit refresh all right we'll try this one more time yeah it seems like when i try and duplicate we're getting an issue um so i'm just going to hit refresh and i'll just add text fields in individually going forward so we don't have to waste time here but you can see sometimes you get some goofy errors and again that's why oxygen releases things in alpha and beta versions first is just to ensure that if there are issues they can get them fixed before the official stable release so i'm just going to again click add in our text field and in here we're going to type in thursday colon space insert data meta box thursday and insert i'm going to come up to my text and make this gray right away so i can see everything and we're going to make this bold and done so we have that there let's come back up to our div add a text field i'm gonna make this gray right away and we're going to double click insert metabox field friday and insert jump before my short code and we'll make that bold again and done and only two more here so just bear with me and you might be using classes if you're doing this instead of just setting the text color every time that's typically what i i would do but i'm not doing this for design purposes right now i'm just showing you how to actually pull in all the data and let's get our last one in here all right so we have that done now and you can see we have all of them in here i'm going to click save jump to our front end and we can see that all of them are showing up so now what we can also do is come in and set some conditions so i'm going to do just sunday for our purposes here i'm going to come up to our condition symbol up here and we're going to set conditions add your first condition choose our drop down here and we're going to go to dynamic data and we're going to choose metabox field and sunday hours and insert and all i'm going to do is in our center field here is set this to is not blank we don't need to add in a custom value at all because as long as it's not blank we're going to show it so i'm going to click this x and click save and if we go to the front end and hit refresh you can see it see it's still showing there but now let's go back to our actual settings page and i i'm going to just delete out this value and i'm going to uncheck sunday so it's not showing and i'm going to click save settings and i'm going to click refresh and you can see sunday disappears now so what i would do is just repeat that on all of these and actually if i was building this out on a site on the stable version i would do it on the first one and just continue to duplicate everything and then just change my custom data as my text field here so again you set your condition add your first condition choose condition which is going to be dynamic data metabox field and this one is going to be saturday hours again you want to choose the one for the day that you are editing click insert and in our center we're just going to do is not blank then you can click the x and we can hit save and you can also set these in our conditions here to show hide based on conditions so it's actually going to hide it based on the actual condition so you can see sunday actually disappeared here for us and saturday is still showing because we do have data there but if i go in here and now we delete out saturday and it even if i i'm not going to uncheck the saturday check box because it the condition isn't pulling there that's just whether we show this field or not but when we go to our front end you'll see here that now saturday disappears as well all right so we've covered all of our fields on our company settings we have all of our hours covered address phone number and email so now we're going to do our final one which is our enable header notice so i'm going to do is just enable this so that it is on and i'm going to click save and in our oxygen builder i'm going to hit save and i'm going to refresh it just to make sure that we're pulling that in properly all right and what i'm going to do is add in a section and i'm going to drag this all the way to the top i am going to choose a background color and we're just going to choose um this nice red and in here i am going to add a text field and for my font weight i do want to go a little bit more than just your default 400 and for font size we'll set it to 18 pixels as well i am going to set some padding on my section here we'll just do um one rem we'll see how that looks that should probably be fine so now i'm going to double click in here we're going to insert our data meta box field and we're going to choose our header notice text go ahead and click insert and done and you can see that pre-fills i am actually going to go to my section here and we're just going to center this up a little bit and you do see that when we are pulling data in from our editor and or a wysiwyg we do get a little bit extra padding around that you can take that out but you do have to actually go into your style sheet to do that but i'm going to leave it in there just to save us a little bit of time here but you can see this is our notice and it's showing and we do have our link i'm going to click save jump to our front end and you can see that's it that's up here and you can see our link is working down in the bottom left here so now let's set up our actual conditions for this and this is going to be done on the actual section so again we choose our condition settings set conditions add first condition choose conditions and again we're going to choose dynamic data meta box field and this time instead of the text we are going to choose enable header notice and we're going to hit insert and we're going to leave this as equal to and we're just going to type in true so go ahead and click the x on that and save we're going to jump to the front end we hit refresh and you can see it's still there and that is because we do have it actually enabled so i'm going to disable this now and click save and when we come back up here hit refresh you can see that it disappears so that's a nice way to be able to have a header notice to quickly put in without having to go into the oxygen builder in the current day and age you see a lot of companies have a notice like this going over covid information so that could be where you are actually linking to on your page is a covid page or anywhere else that you see fit based on your specific needs i just want to show you a way to use a couple different field types in our settings pages so that we can enable and disable on the back end here and again have some different settings here to toggle on multiple fields and get it to actually show up on the front end so again we pulled in our hours we pulled in her address phone number and email and we even pulled in a header notice and again i'll enable that again just so we can click refresh and see that show back up so i hope you guys enjoyed that video i apologize for some of the errors we ran into while duplicating some of these fields and again that is sometimes how things happen but i'm going to go ahead and leave all that in the video just so you guys can see how i worked through it if you guys have questions please let me know leave them down in the comments below and we'll see you guys in the next videos

Channel: LocalSBM

Views: 915

Keywords: Meta Box, Oxygen Builder, WordPress, WordPress Dynamic Data, How To Use Meta Box, WordPress Relationships, Oxygen Builder 3.9, Meta Box WordPress Plugin, Meta Box AIO, Meta Box Custom Fields, Meta Box Custom Post Types, gallery, Settings Page, Options Page

Id: bKsMA57tGxM

Length: 47min 35sec (2855 seconds)

Published: Sun Sep 12 2021