Creating Meta Box Settings Page and using Meta Box Views to show the data in Oxygen Builder

[Music] hello everyone welcome to another tutorial going over metabox specifically using it inside oxygen builder today we're going to go over the metabox settings page and metabox views so this is something i came across actually yesterday and makes a big difference in using metabox and the different data that we have available and i think you guys are really going to like this and i think today we're just going to scratch the surface of what's possible with views and also even with the settings page so what i'm going to do today is we're going to take this template that i currently have and take our logo that's here and also in our header up here and replace that with our own logo and put a condition in there that if there's not a logo available that it's just going to show our site title then going back to our bottom here we're going to replace this email phone number and address down here along with our social media and then i'm actually going to take out this menu here on the bottom and replace that with hours and we're going to do that all from our settings page and views so let's go ahead and jump into that so i started out by putting in a logo in my media library but next i'm going to go over to meta box and we're going to start with our settings page so to get that started click on setting pages we're going to add a new settings page and we can call this whatever it is that we want in this case i think i'll just call it options page and this would be similar to acf's options pages as well so i'm going to call it options just so it doesn't get confused with wordpress's settings that are already there so i'm going to call it options and copy that and paste options here as well we can choose if it's a top level menu which we do want and where it's going to show so we want this to show i'm going to put it um after meta box and it'll fall between metabox and oxygen and we can choose our icon here i'm going to just change it to let's see here what do we have i'll change it to a wrench that sounds fun all right scrolling through the options here most of these you don't have to set but you can there are options to do tabs and different setups which it covers on the settings page but i'm not going to go through that today i'm just going to go over specifically the basic setup of it all right let me scroll back up here and i'm going to go ahead and hit publish and now you should see that we have an options over here so if i click that you're going to see that it's just empty right now so what we need to do now is come over to meta box and custom fields and i'm going to add a new group and in this one i'm going to call this site logo i'm going to add a field and in this one i'm just going to search image and just do our standard actually i want just our standard single image and that's only gonna allow one image and we're gonna change this to site logo size i'm gonna set it at large and the rest i am going to leave empty here go over to my advanced tab and we're going to leave that as well i'm going to click hit publish and then come over to my fields setting not to be conv confused with actual um custom field but the group settings and we want to change our post type to settings page and then choose options which is what we named it go ahead and hit update and now if we go over to our options page you'll see that we have our site logo here and i'm going to go back and just add a little bit of extra information in on this so go back to my custom field site logo and click over to my fields and we're going to put in a label description so i'm just going to add this description in here so we can see just have a little bit more information on that when people are looking at it so you can see here it says the sites logo please add your site's logo here if empty it will default to wordpress site name and that site name is just going to be what's found on the settings general right here in the site title so going back to our options i'm going to go ahead and click add media and you'll notice that it does allow me to either choose something from the media library or i can even upload something so in this case i'm going to choose to just add our logo that i already upped uploaded and you'll see it has that there in this case you're going to see that it's showing actually very large in size and if we go back to our meta box custom fields and site logo and we look at our image size here i set this at large and i did that just so i can show you guys what it did if you hover over this little question mark here it says image size that displays in the edit page used to make sure images are not blurry it's not meant to display image with exact width and height so basically what this is doing is just showing within that settings page what size you want it it doesn't affect what size we actually use when we're going to use it later so in this one i'm just going to go back to thumbnail so it doesn't take up as much space click update and now go back to our options page and you'll see that it actually took that out for me so i'm going to go ahead and reset that and you can see it's much smaller here not taking up as much as the of the page so next i'm going to come over to metabox again and do our next set of custom fields and now in this group we are going to [Music] do our email phone number and address so i'll call this business info again my settings set it to our settings page which is called options go back to our fields we're going to add new our first one was going to be email so if we type in email here we have an email field that we can use i'm just setting a different one just to make sure that our field groups are different than what we used previously all right next we're going to add our next field which is going to be phone number and then lastly lastly we're going to add in you can see if it has address and it doesn't so we're just going to do a text area to make sure that we have enough room and again these i'm going to change all to four as well so that they sit on that same line and hit publish another thing i'm going to quickly mention is if we go over to our settings here i believe it's going to let us choose let me just double check here i was gonna say look to see if it let us set where on our settings page it put it because it looks like every time we add them it's setting it to the top and i'm not sure on that so i'm gonna come back to that a little later i think just make sure i updated that and go ahead and refresh so again you'll see that we have this at the top go back to my page and i'm just gonna copy these and you'll notice that you can only put in the actual email address as i said in my first video if you try and do the full link it's not going to allow you to so i'm just going to take that out go back over here we're going to copy this phone number down and let's see if it lets us enter that yep it does and then lastly we're going to take the address and depending on how you want it to look you know in our case on this page it's going straight across if you do want it to be two lines just go ahead and hit enter but i'm going to leave it like this for now and click save settings make sure we save that and then my last group that i'm going to add is going to be is going to be our hours let's call this hours of operation and in this one we are going to add a total of seven fields one for each day and these are going to be text fields call it monday shrink that down add text tuesday wednesday thursday and i could duplicate these here as well but i'm just doing this so that the id automatically sets for me friday saturday and lastly we're going to get sunday oops gotta type text there not sunday pics and we'll put sunday here and then additionally i'm gonna set each of these to three this time for our sizing so let's get the rest of these opened and changed over and this is just going to make it so that it fits on the page a little bit better and it's not just stacking on top of each other and then the last thing i'm going to do when it comes to the actual fields themselves is i'm going to add a little bit of a description in for each of these and i'm going to only do it on one just for an example so for my label description i'm going to just paste this in which is hours of operation on monday and then what i'm going to do an input description is an example of what we'd want in there either this for our time or closed the reason i'm doing that is just so that if you have a client who's going to be going in there you're giving them a description of what this field is and what it should look like as in the default text that you'd want in there so that they know and they don't have to ask every time next i'm going to go over to my settings because we haven't done those yet change this to our settings page and options there and then come back to fields and actually i'm going to change this to box just so i can show you what this looks like so now i'm going to hit publish if we hit refresh over here we will see those in there and actually you'll see that the box didn't actually change on this one um let me take a look at that all right actually i'm just going to leave that as the default hit update and what i was thinking of was actually on a setting within the settings page which i'll quickly jump back to that so on the settings page that we set up if we go in there we can change our setting style right here to be boxes or no boxes and i'll just show you what that looks like now and now if we hit refresh here you can see it boxes each group together so again like i mentioned it's good to have these labels in here if you're going to do this for customer use i'm not going to do this for the sake of time but i just wanted to quickly mention that so now we can go through here and i'm just going to copy and paste this in here for most of them and we'll do just one different one just so we have something different and we'll say we're closed on the weekend all right so we should have all of our data in there that we want so next i'm going to go over to our meta box and we're going to set up some views what views are going to allow us to do is actually set up a kind of a template and i'm going to show you here so our first one that we're going to start out with um we'll call the logo call it site logo view and in here if i hit publish just get that set up so it's saved we're going to want to come down here and change our type here to short code and what this is going to allow us to do is take this short code and put it in a short code wrapper and use that to display our logo so i'm just going to hit update there again and now to build this out sitting on the template tab because you can see that you can actually add other information in here and again this is all shown on this metabox views page it's pretty long and has tons of really good info on here specifically towards the bottom using what they call twig which allows you to do all the different these code types here and basically lets you build something like this so speaking of that i'm actually going to copy this one because this is what we're going to use for our condition so if i come back over to our view what i'm going to do is insert field so what this does is brings up this option over on the side and you'll see that it has tons of things to choose from and what we specifically want is from our site page and you'll see our different groups are available here so in our case we want site logo so if i click that it's going to ask me what we want to use here so you can use thumbnail medium large i'm just going to do full size i'm going to do the standard image tag and click insert and now you see what it does is it puts a image image source tag and uses this short code to say we're using our site options page and our site logo full size and what that's going to do is put the url here and then it has our width height and alt text so in this case if you leave these as is it's going to set a specific size in here so where that could be tricky is when you get into mobile and if your image that you're using is large it's not gonna be responsive so what i did is just took this and changed width to 100 and height to auto and that's going to allow it to be responsive next what i'm going to do is just hit enter a couple of times and i'm going to paste in that code we used so before you saw this is what it automatically put in so basically what this is doing is if we place our shortcode it's going to use this for our template but now we're saying that in this case the one we use is if post thumbnail is what we're after but all we're gonna have to do is swap out this information here so i'm gonna go ahead and do that so we are going to take this and replace this we're going to take this whole image source and take this entire line here and i'm actually just going to cut it and paste it here and then in this case they were showing using a placeholder image i don't want to do that i want to set this to actually be our site title so you'll see on our site tab here i have site title so having this highlighted i'm just going to delete that and click site title and now you see it automatically puts that in so i'm just going to bring that all the way back up to the top you'll notice now that when i scroll you can't get to save or publish so just remember to hit the x on the insert field here to hide that and then you can click update so now you see i have this nice shortcode here so what i'm going to do is grab that copy it come over to our test page and this is the template that we're going to edit so i think i'll just click edit page here and edit with oxygen this is going to allow us to edit the page directly and actually i lied to you we don't want to be editing the page we want to actually be editing our main template i apologize there so i'm just going to go back to oxygen templates and main and i'm just going to click edit with oxygen to jump me right into that all right so here we are so i'm going to open up my structure here in my header i'm going to open that and we want the row left here so you'll see now that we have a link wrapper with our image inside it all i'm going to do is delete our image and leave our link wrapper and in this i'm going to put a shortcode and we want just the shortcode not the shortcode wrapper and i'm just going to paste in that shortcode that we have so you can see it pre-fills my logo in here and you still have all of the advanced options that you would want in this case we still have it as a link wrapper so we can set it to go right to our home page and just like we would with a standard logo and that way every time you would want to be able to change that out or allow your customer to be able to do that they can just do that right on the um options settings page and don't have to go into oxygen to update that so i'm going to click save so we get that saved there i'm not going to play around with the sizing right now but you will see um let's go to smaller size here and yeah you can see that it stacks vertically there just because we're using a pre-made template but we could certainly shrink that down if we needed to next i'm going to scroll down to our footer and we're going to use that same exact shortcode to replace this one here so again you'll see it's inside a link wrapper i'm going to delete this image and add in our short code again and just paste that in and you can see it pre-fills it there so i'm going to go ahead and hit save and now we are going to go over and make our next view so we're finished with this one and actually i'm going to show you guys quickly before we do jump on i'm going to jump to the front end so that we can see that you can see our logo is here and it's pulling in that same animation that the template had same here you can see that it's there and now if i go ahead and delete this here save settings and we go back to our page here if we hit refresh you can see that we're getting now our site title pre-filling there and here you can't see it just because of the color so you'd want to actually go ahead and style that i'm not going to do that in this video um just because that's not the main intentions of this but you can see that and actually i will do just a on our link wrapper here i'm going to change our type of typography color to uh white and up at the top here do that here as well go ahead and hit save and hopefully that should set that as white now yep you can see that it's there and again you can style that however you would want that to look if that was in case in fact taking uh up the area instead of the logo so i'm going to go ahead and put our logo back in on our options page just so that shows up like we wanted and again if you had your alt text in here this is my logo this is a logo and we click save if now i come in here hit save and i'm just going to go to inspect and you can see that it pre-fills my alt there so it's automatically going to pull that if you have that in there which is really nice so i just wanted to quickly show that we can close this out and now we're going to jump into our next view so and we're going to set up our next one which is going to be our business info all right so our first one is business info insert our field and in this case we have our email i'm gonna hit enter we have our phone number hit enter and our address and right now if i go ahead and hit publish which i needed to change set these to short code my apologies there now if i take this short code and come over to our editor here and i'm just gonna search for all right looks like we have all three of them there so again i'm going to add in a div here bring that all the way up to the top and inside there i'm going to do a short code and i'm going to enter that in and you can see that right now it's putting it all just side by side and the color is a bit off so i can go to advanced typography make that all white and you'll notice that nothing is clickable right now so what we can do is actually set that up on the view side so what i'm going to do is come back over to our view and as we saw earlier this does accept html so i'm going to put some in here so i'm just going to wrap these each in a paragraph tag and you can see that this has a compiler in there so it automatically and added my closing in there paste that in after each of these and then inside each of those we're going to put our a tag href equals our quotes around that close that off and then we're going to take this very center piece and just paste that right in there so basically what should happen is that it's going to automatically set our link to this and then it's going to use this as what shows up so in this case you can see that we have an email here so in our case i'm just going to add inside our quotes here male 2 and let's go ahead and take a look at that i'm going to hit update go over to our test page here i'll actually have to hit save here first refresh and you can see that it's linking to our email here now correctly so we're gonna do pretty much the exact same thing for our telephone number so i'm just going to copy and paste some of this in here to save some time do our quotes and this one we're going to do tell for our phone number close that off with a quote and close our a there and you can see that it added our other one and then we're going to copy this in between so that shows is our text for that and then lastly is going to be our address so this one i'm not going to link although you could if you want to link it to an internal page on your site that has either directions or a map or you could just also link it directly to a google map but in our case i'm going to leave that separated and the reason i put the these in paragraphs is again so that when it shows up on our front end here is that it's um side by side above each other instead of all in one line like we were seeing here so i'm going to hit save here again and then refresh this and that way it should show our new view here and we can delete out that other information and i noticed earlier that it sometimes gives me this information that the short code presented um is not actually there but i haven't seen any actual issues happening because it is showing here and even if i do hit save and go to the front end everything is still showing properly i'm not sure why this is showing i'll have to reach out to the oxygen oxygen team and metabox and see why that is happening but you'll see that everything is actually working so i've just been exiting out of that so now in our footer i'm going to delete out these other items that we don't need anymore and you can see we have these all here inside my div i might be able to change my typography line height change it to one so you can see it brings it down closer together and i think i'm just going to leave that as is certainly if you wanted to style that more you have that possibility i'm going to click save go back to our front end you can see it's all there so you can see it's linking to our email it's linking to our telephone number and here we just have our address listed out so next i'm going to come in and delete out our menu because we're going to replace that with our hours so now i'm going to go over to our next view click add new and this one we're going to call hours and there's a few ways we can do this i'm going to show you uh i'll show you both just so you guys have the option so what i'm going to do is add in each of those fields so we have monday tuesday wednesday thursday friday saturday sunday and i'm just going to put all of these on their own line and then what i'm going to do is put in some additional html here so i'm just gonna copy some of this over from a view i already made just bear with me one moment so what i'm doing is putting my paragraph tag again and inside that i'm putting a strong with monday and a space after it and are closing strong so what that's going to show is our it's going to actually output monday the space and then what our hours that we entered are so i'm going to do that for each of these just paste those all in right away and then change each of these make sure you don't delete your strong tag there otherwise it'll yell at you and sunday and then remember to put our closing paragraph tag in here otherwise we're going to get an error and we don't want that all right so i can close this scroll down change this to shortcode again and we're going to go ahead and hit publish now if we come over to here i'm just gonna add in a shortcode again bring that up above our button there sometimes it's a little tricky dragging that in the right spot there we go and then i'm going to put my short code which i didn't copy yet let me copy that now enter that in and you can see it puts our hours in here so now i'm just going to change my typography again like i did previously make that white and i'm going to put in some text above that drag that above double click in here and call this our hours i'll make that white we'll make that a little bit bigger call it uh perfect so we have that in there and you can see that it's pulling all of those you can keep it center aligned you can left align it if you want depends you know how you're trying to get it to look on your site i like the left align because then all of them are right next to each other and again if you're not going for a stacked look um you could always do them side by side or fit it into your site how you desire but in this case i just wanted to show how you could put them all in together and have it show both the day and the times so i'm going to click save here and we're going to refresh here and you can see that this is now pulling all of that information so i have my email my phone number our address and then our hours so if i go back over to our options page and we're going to say that mondays were closed and we're going to change our support email to sales and we'll change our phone number to five five five five five five five five five and i'm going to go ahead and hit save and now you can see if i hit refresh these are you'll notice that these change all right now you see we have sales our 555 number and that monday is closed so you can see that it's really easy for a client to be able to go back in and just edit those options right from our settings slash options page making it much easier for them to change little things like hours or their email or phone number or anything like that without requiring them to go into the oxygen builder to do that now the next way i'm going to show this is actually taking each of these and breaking them into their own view and i'm going to do that to show you a little bit different of a view all right so let's get that set up so i'm going to go to add new and i'm going to call this monday because i am only going to insert my monday field monday close that out going to change that to short code and hit publish it's going to do tuesday add my field close that out come down to here change that to short code again hit publish and i'm i'm going to do one more just so we have three but i'm not going to do all of them just to save us a little bit of time but you'll get the gist of what we're doing here so again i'm going to insert my field go to site and choose wednesday now and then come down here change that short code close out our insert field options there and hit publish now again if i go back to my views page you'll see that i have all my short codes available so jumping back over to oxygen builder what i'm going to do is right below here i'm going to actually minimize that down and add a section and put it inside that which we don't want we want it outside and what i'm going to do inside this section is put a div i'm going to put a heading in there and then another div i'm going to change our title to something like we're open and on my div here i'm going to pick this and we're going to give it a background color let's do this green color i want to pick our border radius set that just give it a little bit of styling not a lot here and then inside our div what we're going to do is be adding another div and you'll get to see why here in a moment and inside this div we are going to put text we'll call this monday and then we're going to add our short code and here we're going to grab our monday paste that in you can see that's pulling that is closed and now we're gonna have to set up some of our how this is stacking so we want this to be horizontal this we want stacked vertically we're going to give some spacing around this we'll go with 64 all the way around oops and i meant to do that as padding change that back here apply all i want to take my div here make this 100 make this div 100 percent and then i realized i am missing something in here i'm actually you can either do a div or code block or i'm just going to use a div in this example and what i want to do is we're going to set this to what's on horizontal we want middle and we're going to space between and in our div what we're going to do is set up some styling so what i want to do is first start in our sizing and spacing we're gonna set all of our height to zero and you're gonna have to do all of them otherwise it's not gonna work properly my margin i want to set a little bit of space to each side so i'm just going to do 10px 10 pixels on each side and then i'm going to come down to my layout and here we're going to set that as flex and then scroll all the way down to the bottom and do flex grow one and then next we're going to go to our borders and we want to do a border bottom we'll do a darker gray here you can set your width to whatever you think is necessary i'm going to do two for this one and then i'm going to choose dotted and what this does is if i click off this is it puts our line in between here and what this is going to allow it to do is actually get smaller bigger based on if we're typing you can see that and actually i lied to you it wasn't doing that there because it's pushing our entire size first but you can see when i was getting smaller there that it is actually changing so it's like i need to change a little bit more sizing here for this to fully be completed i'm going to go back up to my section we're going to center this we're going to take this div and let's make this 60 wide and again you can see that this automatically stretched out and i'm going to center this as well and give a little bit of spacing to our heading and to do that to the bottom there we go and now all i'm going to do is just duplicate this div here three times change these days tuesday wednesday and then i'll have to go grab my short code from my view we want tuesday bring that over click on tuesday swap in our short code there grab wednesday drop that in here and you can see those are filling and now as we go to a smaller size you can see that shrinks down just as we wanted and you'll have to make sure that when you get to smaller sizes specifically down to this side you can see it pushes off on the side unless we actually change our div up here let me just shrink these down so it's a little bit easier to work on and make this we'll call it 95 and that way that's wide enough for this and then you'll also see that we're getting a little push in there because we have so much padding here on the side so if i come back to that and change these down to we'll just do 12 on each side because we don't need as much so there you can see that it's fitting there and we'll go down to our last size down and we might have to change this a little bit more instead of 95 here i might go to 98. make a little bit bigger and you can see our actually i'm going to go 100 just because we already have some padding from our section that we put in there and now if we go all the way down you can see that this one's still going over a little bit but these other two are good we can play that play with that a little bit more as needed probably within our section just taking away some of this padding here so instead of 20 let's go down to 12 and there you can see that it's fitting in there now so that's just a nice feature i know people were asking about this previously so i wanted to drop this in here is another way to show your hours is making an hours card similar to this that's part of your main footer section whether you want to set it up actually within the footer or right above it similar to this and again this makes it really easy for your customer to go in and from the options page actually change the hours right there without ever needing to go in and set that up here so we got that saved and now you can see that it's showing up here and if i go to my hoverify let's go to responsive and we'll take a look here and you can see that is showing showing nicely and same with our other hours that we have here you can just kind of see what this is looking like and i think that's going to conclude today's tutorial thanks for watching um i think my next um video is going to be on relationship so you saw in my views that i have something in here for relationships and i'm going to go over that using again our views set up and relationships because i know there are some questions about that so check back for my next video which should hopefully be dropping soon thanks and i look forward to seeing you guys on the in the next videos

Channel: LocalSBM

Views: 2,187

Keywords: Meta Box, Oxygen Builder, WordPress, WordPress Dynamic Data, How to Use Meta Box, WordPress Options Page, Oxygen Builder 3.7, Meta Box WordPress Plugin, Meta Box AIO

Id: ObWQzVGmtes

Length: 49min 19sec (2959 seconds)

Published: Sat Apr 03 2021