Getting Started With Meta Box in Oxygen Builder

in this video we are going to walk through the basic setup and use of metabox with oxygen builder currently metabox has a lifetime deal on appsumo it runs for i think roughly 25 more days and i see that there's been a lot of questions within the oxygen builder facebook group so i wanted to make a video to walk through just the basics of getting started with metabox and using it within oxygen i'll leave some links into the description for more once we're in within wordpress i'm going to start just under the plugins tab here you'll notice that if you do install the main all-in-one meta box plug-in that you get when you purchase the lifetime deal off appsumo or if you've previously had it you will need to also have metabox the free version included and it will automatically prompt you to install that if you haven't had it installed yet so let's move back over into metabox and look at some of the things we have here just first on the list you'll see that it has post types here this is going to be exactly like custom post types ui um in place of this it's all built into metabox so you don't have to have another plugin just to do your custom post type we can do that right here again you can do custom taxonomies as well so what i'm going to do here is show you guys what we're going to build we're just going to recreate something very similar to this which is going to be a team page using a repeater and custom fields that we're going to make from within metabox and i'll go through that starting here so first thing we're going to do is do a post type once we click that we'll click new post type and we're going to name that so here our plural name do teams singular name team and you'll notice that it automatically fills in the slug for us um we'll come across two labels on the top i did not change anything in here just left this all standard to what is showing under the advanced tabs is where we have more options again if we scroll down we can choose where we want it positioned on the page so i'm going to go ahead and choose right under right after posts and you'll also see that it gives you the option to choose your dash icon right within here as well so i'm going to just pick one in here go with this one and then scrolling down a little bit more you can choose what the capability type is and if it has an archive which i do want then we can come over to supports to choose what options we want on the page i'm just going to leave this with outcomes and with our taxonomies we can choose what we want there as well and we are going to come back to this once we create our custom taxonomies as well so now i'm just going to go over and click publish now i'm going to come over and choose taxonomies and create my taxonomy for this and for this one i'm going to go with positions for the plural name and position for the singular name and again it makes my slug for me i'm not going to change any of the options here i'm just going to leave all of these as they are what i do want to do is choose what post type i want to use and from here you can see that teams is showing up so i'm going to go ahead and check that box and click publish now i want to come back over to my post type just to make sure that it is showing there as well so i'm going to click into team again and my taxonomies and now you'll see that positions is not checked here as well so i'm going to go ahead and click that check box and we can update next we're going to come over and create our custom fields for this we currently have none set up so we're just gonna click add new and you can title it appropriately i'm just gonna say team member info and come down to this add field and you'll get this little box here that lets you choose all different types of options and it even has a search type so you don't have to scroll you can just type in like let's say we're going to say a text area for our first one and we can go ahead and rename it what i'm going to do for my first one is about me and again you'll see that it makes our id and you do want to uh keep in mind what you are using for this because we will need that i need to remember that for a little bit later additionally you can decide if you want to include a label um or description for this i'm going to leave them blank for now that's up to you whether you want to use that or not and then you also do have advanced options here which again you can add custom classes if you need to and some other things that i'm not going to get into in this video because we're just going over the basics today um so now i'm going to go ahead and add my next field so we did the about me which is just going to be the blurb about the person um next what we want to do is going to be our email so you can again type email in and you'll see that it has an option here so again i'm going to put rename it to my email just to kind of keep in line with what i was doing previously and those are all the options i'm going to do for that one as well i'm going to add my next field and this one is going to be a url and you see it accidentally took me to the top here so i want to make sure i'm on the correct one so i'm going to rename this one to my facebook and sometimes it'll change the id sometimes it will not you can always change that yourself if you need to so in this case i want to because it did not change it like it did on the other ones i'm going to add another field and again we're going to do a url and on this one we are going to do my linkedin and again that one changed my id for me and i think that's all we're going to do for these so i'm going to come back up and click publish just so it saves it right away and then once we've done that we're going to come back up to our settings tab up here and this is going to let us choose where we want this to show up so in this case we want to choose our location which is going to be a post type and i'm going to x that one out and click it'll give us our drop down here and we can come over and choose team it'll let us decide where we want to position it after the content we're on the side we want a high priority and the style of it as well and those i'm just going to leave as it was so again i'll click update just so it saves and you'll see on our left hand side here we have teams i'm going to go ahead and choose add new since we don't have one yet and i'm going to put the name as the title so i have these saved off screen here from what i showed before they just copied this so we're gonna do lisa hoover for the title here and then we're going to choose picture as the featured image now i already added some to my library here so i'm just going to choose an image here as my set it as my featured image and that's what we're going to use and then you'll see our custom fields from metabox are showing down below here so we have the about me the my email my facebook my linkedin so what i'm going to do is go ahead and just copy in some just some lorem ipsum as a placeholder for the about me i'm going to copy in a facebook link here and i'll put a one after it just so we can see that a little bit later and i'll do the same with linkedin again i'll put a one after it and email i will copy that in as well for email it will only let you put in an actual email if we try and set it as a male 2 link it's going to give us an error when we try to save so what i'm going to do is go ahead and click publish and publish and now you can see it says please enter a valid email address so just know that it's only going to allow you to enter just the normal email so now we can go ahead and click publish and you'll see that is now live and go back to wordpress here add another one i'm i'm going to start us out with three just to get started so our next one is going to be leo copy that again oh and it actually copied our image not what i wanted we just wanted this and i'll set my featured image and next we'll bring in some more lorem ipsum copy and email is going to be this grab my facebook link as well and we'll add a two after that one and then my linkedin and add a two after that one as well and now we can go ahead and click publish we're gonna add one more on this one we're going to again copy the name here paste that in set our image and one thing to note is i am using the featured image in this case because using an image within the meta box custom field type is a little bit more tricky and i'll cover that in another video i think but to make our lives easier we'll utilize the featured image since we weren't doing anything with that already anyways so here again i'm just showing basic fields whether it's text fields or links you can always you can also use a date picker if you wanted to add a birthday things like that as well all right i'm going to copy over my lorem ipsum into the about me copy over email and facebook and linkedin now we can go ahead and click publish and back to our admin dashboard and next i'm going to come over and add position since i didn't add those in yet it would have allowed us to do it right within um so i'll do that for one of them but i'll set two of them up here so our first one we're going to do is set up as ceo we'll do co as the slug as well and then the next one we will do developer and then the last one will set up directly within so back to my all teams and we'll go into lisa to start clicking the name to edit here and we want to come over on the right hand side and right above featured image you'll see that we have positions there's an option here just clicking in the box if you start typing it should it's not yep there it is it should bring it up if you have a match here so i'm going to go ahead and click that click update and go back to our admin go to leo and for him we're going to choose developer sometimes you may have to type most of it out for it to recognize it doesn't have it recognizing it with the first couple letters so just go ahead and type it in it should show it and last but not least we're going to add position for helen and this one we're going to use one that's not in there yet so we're going to go with project manager and just hit enter and it'll automatically add that as a custom taxonomy for us as i said that was not already in our list but you can add that as you choose here all right so that was the side of entering all the data within the meta box custom fields and getting them set up now what we can do is go over to oxygen and i had already set up a basic header and footer already just to save us a little bit of time here um so from in oxygen templates you'll see that i do have my main there and i'm going to add a new template and this one i'm gonna title teams i'm gonna choose that we use our main to inherit our design and we're going to choose an archive and post type and then from here we can choose our post type that we want to use which is team so this is going to allow us to pull in the archive for all of the team members go ahead and hit publish so that i can actually edit within oxygen we are going to jump into oxygen and to start we're just going to pull in some items from a design set so i'm going to go to add library design sets and proteus was the one i used for the header and footer so i'll just you stick with that go to section elements and people and then choose this team tile and once that's in there i'm going to add another section and then a repeater with the repeater open i'm going to just bring in some items um from one of these so i'm going to start with the image and pull that down and then the heading once we get all these down we can start going into some of the settings all right perfect it looks like our heading is above our image and it's not supposed to be all right so i'm just going to set this to single mode for now so we don't have multiples at once then i'm going to go to grid enable grid and i'm going to set this to 3 because that's what we had set up above you'll see it's looking pretty close to what we had so now i'm just going to select our image whether you just want to click on it or come over to the right hand side here and choose data since we're using our featured image for that i'm just going to go ahead and select that and leave this as default you can also choose a size if you want to but i'm just going to leave it as default all right so we have our first one there and then we will click into our heading here if you double click you're going to get this bar up here that allows us to choose insert data and now from here we're going to go to title and in this case i'm going to choose link just so it does link to the actual team profile you're going to now do the same thing in project manager if you double click and then come up and click insert data and now this is where we're going into our custom fields so you'll see that in our options here under the post we want to navigate to the custom fields slash meta options now this is just a standard option within oxygen it's not something that gets added when you have metabox but it does using this we are able to grab the data so from this key field you'll see it has a drop down and if we choose that we'll be able to navigate down and choose what we want and i'll actually just realize we're looking at the position so i messed up there and for that we just want to choose our actual taxonomy my apologies there so again choose the taxonomy drop down and position and set a separator if you need to in our case we do not so i'm just going to insert that and now double clicking into our text field again we can come up to insert data choose our custom field meta options again and now this is where we'll choose our key and you'll see this top one says about me and then it pre-fills here and if i click insert and click off that it should pre-fill that for us which is perfect and i know we had our email as well so i'm actually going to just take our text field here and duplicate it and double click in here and before i put anything in i'm going to type in email me and leave a space in there and then i'm going to insert my data choose my custom field the key and now we're going to have to navigate down and find that in our list here that should be my email and click insert now you will see that it has added that in there for us next we can go to our social icons and this one you'll see that it has some of these pre-filled in um i'm actually more of a fan of adding icons all by themselves so i'm gonna just actually delete this and add in a div followed by an icon and then i'm just going to duplicate that right away i'm going to set my div to horizontal just so they're next to each other and then my first icon which was facebook we're going to just search facebook and we'll choose this first one and our color we'll choose we'll just use this blue and you'll notice that it has a circle around it right now but we can ignore that because it's not going to show once we click off of it but coming back to this one and if we're going to want to actually set a link for it we can come up and just click this little link icon here and this is going to bring up insert link edit link you can just click the x on that and then you'll see over here it allows us to actually choose the dynamic so here i'm going to do and again we'll choose our meta custom field and scroll all the way down until we find my facebook and then we can insert that and that's going to automatically pull that dynamically now we're just going to do the same exact thing on this one this one we did linkedin choose our first one here change our color and make it into a link and here the reason we're exiting out just because it doesn't let us do that dynamic link there so fixing out of it allows us to do that here and we want my linkedin so now you'll see that we have all that data pulling in dynamically if we want to style that up a little bit we can add a little bit of spacing here between these we'll do just a little bit above and below on each of these and the one thing i do want to mention about this quickly is the email is not set up to be a link right now if you want to do that we can cover that i think in a different video but again we can change our coloring on everything here if we so choose because that's all just styling within oxygen i'm not going to spend time doing that in this video if you guys want to learn how to style everything within oxygen should check out some more videos from the oxygen team within youtube they do a great job of going over all that i'm just going over how to pull in your data on this one so i'm going to go ahead and click save here just to make sure that saves for us and what i'm actually going to do is delete out these columns from before and now we should be left with just our title above here i'll reduce this so we don't have so much space between there and i'll hit save again and we're going to go to the front end and now you should see that it pulls all of these and here you'll see that we have the three different names their images pulled with them their titles pulled their emails all pulled correctly they're different bios and then if we hover over our links here you'll see we have facebook slash three linkedin slash three slash two and slash one so you'll see that it's dynamically pulling all that for us from what we set up within metabox and that's just a quick basic overview of using the meta box data within oxygen again we're doing that by again if i double click in here depending on the field type sorry it's not letting me do this here once you double click it again you'll get that insert data if it's going to be a text field choosing our custom field option and that's the most important part choose key in this case we had the about me on this one and it pre-fills our custom and just clicking insert will insert that in so it's very easy for the majority of the types there are going to be a few items that don't work this easily one being images those are a little bit more tricky so those will cover in another video but at least now we have a basic idea of how to pull some of this basic items in from a custom post type into a repeater or even just a page if needed certainly if you guys have questions put them in the comments below and i'll happily try to help walk you through but that was like i said a quick overview of using metabox within oxygen thanks for checking this out and hope to see you guys in the next videos

Channel: LocalSBM

Views: 4,747

Keywords: Meta Box, Oxygen Builder, WordPress, WordPress Dynamic Data, How To Use Meta Box, Oxygen Builder 3.7, Meta Box WordPress Plugin, Meta Box AIO, Meta Box Custom Fields, Meta Box Custom Post Types

Id: 9s2DCteAGYw

Length: 27min 27sec (1647 seconds)

Published: Sun Mar 28 2021