Oxygen Builders Full Integration with Meta Box. Building Team Members and Testimonial Post Types.

[Music] hello everyone welcome to my next video we're going to be diving into using metabox with oxygen oxygen yesterday released their latest version which is 3.9 alpha 1 and in that version they are now integrated with metabox fully so it functions just like advanced custom field is they've been working on that for pretty much all year so i'm very excited that it's finally available so i wanted to jump in and show you guys how to use it so in this video i'm going to cover two different custom post types that we're going to make one is going to be team members and the other is going to be testimonials so this is what the finished product is going to look like um don't care too much about the actual design um what we do care about is just the function of getting all of our data to show properly and then let me jump over to my testimonials here and again don't worry about too much about the design but let's look at the function of it one of the very fun ones that we're going to play with is going to be the rating with our stars here this is something that's going to be a little bit different than anything i've gone over in the past but i think it's a fun way to utilize all the different options within oxygen and metabox so let's go ahead and take a look how we did it all of this so i already have it all built but i'm just going to walk through how we did everything so i'm going to start with our post types so within oxygen in metabox i created a new post type and meta box so you just hover over metabox click post types click new post type we'll start with our team members from here you can go ahead and name it i set mine to team members for the plural name team member for singular name and the slug just automatically pulls from the singular name so it that is one thing to keep in mind i typically like to use the plural name for my slug but i didn't catch that when i made these so i wanted to point that out right away if you change it after the fact you will lose all of your data so i do not recommend doing that so in my case i'm just going to leave it as is you can come over to your labels and change these if need be i just leave them as they are default i come over to advanced and here i will set my dash icon you can choose whatever you want here you can also set um an svg or custom url if you want but i usually just stick with an existing dash icon that is there and the next important thing is to scroll down and you want to make sure it has an archive which is the default setting but i just wanted to point that out that it is very important to make sure that we have that set as has archive the other important thing is making sure that in our actual settings under permalinks that we have those set to post name so if yours isn't go ahead and change it there and click save mine already were but i just wanted to point that out and then any of these other settings i leave as default in here certainly you can determine what is necessary for you and your use cases but i would bet that typically the default is going to be everything that you need you can even change where you want them to show up on the menu here typically they show up right under comments um if you go with the default values if you click on supports you can choose what the custom post type has available i leave these as default which is these three options but if you didn't want the thumbnail or the editor you can uncheck those and then you can also set your taxonomies you can choose to use the categories which is the default for wordpress or you can add your own custom taxonomies within metabox as well i did not for either of these two cases because i don't need them but you certainly can if you wanted to so once you've done that you can go ahead and click publish or update and that is going to be saved so let's look at our next custom post type which is testimonial and again you just add in your plural name your singular name and it'll automatically generate your slug from your singular name again i would personally add the s for the plural name but i didn't do that when i set these up and i'm not going to go back and change them because i do not want to lose my data so i'm just going to leave those as is i didn't change anything under labels left everything the same under advanced again i changed my dash icon and that was all that i changed here i did verify that it has an archive setup and i come up to support and left these as default as well as the taxonomies once you've done that you can click publish or update and your custom post type is set up next we'll go to our custom fields and here we'll start with team members when you create your custom field group you'll want to name that accordingly and then i start with the settings tab first and you want to set your location of post type and choose your custom post type here typically this defaults as post when you click on it so you just click the little x here click your drop down and choose what you want so in our case we want team members position after content the other one is on the side so i usually stick with the defaults here of after content high and standard now we'll go back to our fields you can see i have a few different field types here i have text text email telephone text area and single image so let's walk through each of these under the first one which is a text field i have it set to team member it automatically generates my id and i added a description so that we know exactly what this is for and i left everything else default did the same thing for position we labeled it as team member position it's a text field as well i put in a label description and left everything else default next is our email field which shows up under the html 5 list here so again that's email on this one set it to team member email and left everything else default next is our phone number and this one also shows up under the html5 list and just choose phone number set it to team member phone number i left everything else default besides the naming next we have our about the team member this one i have set as a text area and just changed my label you could also set um the wysiwyg editor which is stands for what you see is what you get editor and that's going to give you the ability to add numbering or any other data if you wanted to so i in my case i'm just going to stick with our text area and i don't need to change that but certainly you can use the wysiwyg if you wanted to that would be the next closest to it all our other settings are going to be the same or default i should say and lastly is going to be our team member image this one i just labeled as team member image reset it as a single image you'll notice that metabox has a handful of different options for images in our case i know we only need one image for our team member so we don't need the ability to upload multiples so that's why i chose single image in this case i left the image size default as thumbnail so it doesn't take up too much space on the back end this doesn't control the size of it when we actually use it this is just the size of how it shows in the back end so those are all our fields for the team members once you have all of those in there or if you want to add other ones you can just click add field and choose them via here or you can type in what you're looking for i usually type in what i'm looking for just so i don't have to scroll through and look for it but that's how you add additional fields as well and once you have everything in just go ahead and click publish or update next we're gonna go back to our custom fields here and we're going to look at our testimonials so again the first step is put in your title for your field group click on settings set your location for post type to your custom post type in my case it's going to be testimonial and i left everything else default jumping over to our fields we're going to look at the different fields we have here i have mostly text fields and text area which we're familiar with from before but i'll walk through each of them so we have our customer name which is a text field everything else is default we have our customers title which is a text field and just change the title we have our customers company which is also a text field and again just change the label leaving everything else default next is our new field that we haven't looked at yet which is a range so i call this one star rating and it's a field type range which also happens to be under the html5 list so just go ahead and choose range here i added a description saying please rate out of 5 stars i set my default value to 5. you can leave default value blank but in my case um we're assuming that probably most testimonials that we're going to have on our site are going to be 5 stars so just leaving it at default of 5 means we're not going to have to change it as often we set our minimum value to zero our max value to five and we're gonna go in steps of one so meaning you can choose zero one two three four and five there's not going to be any partial steps like a half star or quarter star just full steps so we have a full integer and i did not set any other settings besides those next we're going to move on to the testimonial snippet which is a text area and our last one is going to be test or full testimonial and i'll jump into why i have both of those when we actually go and look at the custom post types which we're going to jump to in just a second here so once you have all your fields in again if you need to add other ones you can click add field search for them or scroll and look for the what you want once you've done that click update or publish and we can jump and start adding our data into our custom post types so since we started with team members we'll go there first so on the left hand side just find your custom post type you would click add new or add new here my case i already have some examples in here so we'll just jump into one and take a look at what we have so i added their name as the title i'm going to minimize this just to save a little space here and you can see all our custom fields are at the bottom here you can choose to drag this up above oxygen if you want and to close it and open it so you can see our field group here we have our team member name which i added the name here i usually like to have that broken out besides our title of the page here just in case i want to add more information like i did here i have the their position with our description down below we have our email here and our phone number you can see that both of these are just the actual email and phone number i don't need to include any link information we have our about text area and then the image so when we're adding our image i apologize i meant to click the x here it just has an add media button here so when you click that it's going to open your media library and you can either drag stuff in here from your computer desktop or choose what you have in here already in my case i already uploaded them and just go ahead and choose the one you want click select and then hit publish one other note is if you're new a newer user of gutenberg this is something i recently learned is the typical view is going to be your full screen view which it means you have to click the w to get back to the menu adding multiple clicks in order to do stuff but if you come into this top corner and see these three dots if you choose that and uncheck full screen mode you can see that now we have our menu over here so instead of clicking the w and then coming over and clicking add new we can just simply add new right away making it much easier i'm not going to go through the other team members because it's all the same layout and everything just different information that i put in each of the fields next we're going to look at our testimonials so again hover over it click add new or you can just click on the testimonials page and add new there in my case we're just going to go into one that we have existing here again i have my title put in here nothing in the actual content area minimize that we have our field group down at the bottom here again you can drag that up if you want so it's above oxygen we have our customer name their title the customer's company and now you can see this range slider that we have so this is what i'm talking about so you can see that it defaults to five here and we can either drag it and it automatically steps down to whole numbers or you can also just click to different areas and it'll jump up as well so i'm just going to leave this one at 5 because that's what it was saved as then i have my two text areas here and this is where i'll explain a little bit more so i like to do just a partial part of the testimonial because when we create our um archive page or if we're going to do a testimonial slider on a home page or something we want the sizing of the text to be very similar so that way we don't have one testimonial that is you know short one sentence and then we have another one that's a full paragraph and now we have a vast different size of our testimonials which really throws off our design so by just adding a snippet we can choose to add in just a single line in this case you can see it's not the first sentence but um almost a full line here and we do the same thing in our other ones which i'll jump to one other one just so we can see so i'll go back over to testimonials and we'll look at this top one and this one you can see again that our our first line item is about the same exact length this one you can see i have a different rating just so we can see different things on the front end so once you have all your data in you can go ahead and click save and we'll jump over to oxygen now so i'm going to go to my templates and we'll start with our team members first thing we want to do is set what our template is going to be for once we've named it in my case we want to do archive click our check box for post types and then click in here and choose our team members for this one then you can click update or save and now we'll jump into oxygen all right so i'm going to open my structure just so we can see everything in here so i just added one section for this area i added our heading and again don't pay attention to the design here that's not as important i just wanted to get the data in here and have it show um in a somewhat appealing way certainly this is not how i would leave it if i was designing um for an end product so what i did is added a div inside my section just so i can make it so it's not full width but it's taking up most of the area next i put in my repeater i set my query um i did not want to use the default i went to custom and i set my post type to team member and the reason i did this is so that i can choose my order and i ordered it by date and i said set it to ascending this way is because the president is the first one that i added i want them to be showing first so that way um the most important person is showing first rather than the last person that i added so certainly if you don't need to worry about order you can use the default or choose custom if you need to but in this case i set it to the custom one just so we can set the order once you've done that click apply parameters i also set a grid and i put it at two so you can just see we have side by side here and everything else i just left default in here next we'll jump inside our actual repeater because i went with a card i did add a div inside of our repeater div and inside this div i set a background of gray i set some padding all the way around just so we have some spacing and the other thing i did is i made a utility class for rounded corners just because i used that a lot so you can see i added that to give our rounded corners next we'll look at our image so here you can see that we are pulling our image in directly from our data field so if you click data meta box and here you can see we have our team member image and if you select that it gives you the option to choose your sizing you can choose what's necessary for you what i did in this case is chose medium and click insert and i didn't set a width or height at this point just because i'm using the sizing from the source set certainly you can change that as you need need to and again you'd want to add your alt text if this is going to be an add product but i'm just showing you how easy it is to pull that data in again we just clicked on data meta box field shows up just like ox or advanced custom field would if we had that plug-in instead so again it's very easy to just choose our image choose our size and insert next i have another div here just containing all of our text over here that way i have a side by side horizontal div is how i set this up here i did set some spacing here put my rounded corners on the image as well but again we don't want to worry about the actual design too much we're just looking at the actual setup of this so going down here inside this div we're going to start with our link wrapper which i have set to go to our permalink here again in my url i just click data and permalink and it automatically sets that in here i have a heading set to an h2 and if your global styles don't have your links set up exactly how you want you can set those up directly here in my case i did put a text decoration of underline on here as it was not pulling in so that way you just have more indication that it's a link here and for this data if we double click this we come up to insert data click our metabox field and we want our team member name so let's go ahead and find that here which is this one and we're going to insert and then click done and you can see that's still there we'll work our way down to our next field here which is our next text box again if we double click here we can choose our insert data meta box field and team member position and that will fill in for you what i also did is i came to the front of this and i typed in position and then i came up here and clicked bold and that way i just have the position right in front of it filling in and you can click done and you can see how that shows up now the president is what is actual the dynamic data where position is not dynamic that's just static data for the next fields i did it a little bit differently i added a div did set it to horizontal took a text field added our email again if you double click it you can do your bold then what i did for the email is i put in a text link again if we double click this we can come up to insert data choose our meta box field and we're just going to set that to team member email and click insert then you can click done or you can just click off of it next thing you need to do is set your url so you come over to the url click data meta box field and we are going to set that to email and you do not need to do anything else it's all set there very similarly we did our next one which is our phone number so i also added our text field and made that bold then i put the phone number in a text link again we double click that highlight that all click insert data and set our phone number then just click insert and done and it puts our phone number now when i come over to click data and meta box you'll notice that phone number is not showing up here i think this is probably a bug i did bring it to the attention of the oxygen team so we'll see if that gets fixed in later releases if you're watching this later down the road you may not be seeing that issue as you're going through and doing this so what i did as a workaround in the time being is i just copied this short code right here and just pasted it into the url and then in front of it i just added the tell to the link whereas the email i did not need to do that so i just wanted to show you what my work around was here just in case that isn't a bug and this is how it has to be done going forward but in the case that that is a bug and oxygen comes back and fixes it i expect it to work just like the email did where we can just pull our data directly in and we are good to go next is our last text field here which again is just a normal text field i inserted data and chose our about team member click insert and done and our data is all there because we're in a repeater it fills in all of our other team members as well and we can go ahead and click save and when we look at the front end this is the outcome that we get so now you can see that when i look at our email for any given team member in the bottom left hand corner here you'll see that it has the mail to in front of the email and on our phone number you'll see because we added the tell it's also showing in front of the phone number and that holds true for all of these other team members as well and we also have the link to go to the individual team member which i haven't built out because it's all the same exact process of adding the same data it would just be a slightly different layout so i didn't want to take up too much time doing that next we're going to look at our testimonials so i'm going to jump back to our admin go to oxygen templates and we're going to look at our testimonial archive and again i set my post type testimonial once we do that we can click update or save and we're going to open sometimes oxygen thinks i have another one open but you can see that i don't so i'm just going to go ahead and click open anyway in my case you do want to verify before you do that that you don't actually have it open somewhere else but i know i don't because i'm the only one working in this and again i'm going to open my structure panel and i'm going to actually click expand all and again i added a section and then my header which i have set as an h1 for testimonial just like our team members i added a div and set it to ninety percent width just so it's not taking up all of the area and inside that div i put my repeater and in this one my query i just left as default for um our query just being the archive for our testimonials so you can just click apply parameters because i didn't need to worry about our order at all next i set my grid to 3 and i did set it to stretch so that they do a better job of being the same height and then we'll jump inside our our repeater div here and again i added another div inside that just so we can build out our card and in here i started at the top you can see this one i have set to i believe is our default vertical and in our next div you can see that i actually have an icon here a text field followed by an icon so the reason i put that in a div is just so i can still stack the rest of this with having um a horizontal setup here so in here i set my icon you can set those as you see fit i made them a little bit smaller than what they were just added my quotes and i set my color and opacity to be a little bit lower than normal and the big design difference i did here is on this one just to push it to the bottom under my sizing and spacing i set my margin top to auto so what that's going to do is automatically push it all the way to the bottom so that way i have one at the top and one at the bottom showing an opening and closing so i'll close that div and next we're going to look at our rating so now you can see that i have a total of six stars showing in here what i did is first added my text field inside that div and just set it to rating again i double clicked it and cho chose to make it bold and i started off putting one icon in i set my color to a goldish yellow i set my size in my case to 25 and i chose my star that's open to start and then where this gets fun is we come up to our conditions up here if you click on this i icon we can click set conditions and what i did here is if you click your drop down here we can scroll down to dynamic data and metabox field and in this one we want to search for our star rating and click insert next i changed this drop down and the default is equal to and i set it to less than and then i typed in the number one so basically what it's saying is if this custom field is less than one we're going to show this icon so once you've done that you can click this x and it applies your condition you can see that it's glowing here so that's how you know it's there so basically what we're saying is if our value in the back end is less than one which our only option is zero it's going to show this icon otherwise it's going to hide it so what i did from there is i just duplicated it five more times and then actually i duplicated it once i apologize and changed it to a full star everything else being equal and on this one i again came up to my conditions set conditions left my data exactly the same and i changed my middle drop down from less than to greater than or equal to and in this case i set it at one so what this is saying is that this star is going to show if our rating is equal is one or greater going to our next one we'll check our conditions again i left the greater than or equal to and just changed the value to 2 and did this same exact thing all the way to the top which is set at five again the data is the same and the greater than or equal to is the same and what this does is as long in our case on this last one if our rating is five this one's going to show this one's going to show this one's going to show all all five full stars are gonna show because they're all greater than or equal to one but this bottom one is not because it's less than one is when it shows so that way you can see we get different ratings and that's how the range field works and how you can utilize it within oxygen so again you can duplicate each of these icons to save yourself a little bit of design time next i came down to my name and i set that as title or i apologize i set that as the name and i changed the styling a little bit but again you just double click choose insert data meta box field and testimonial name or customer name and insert then you click done and it fills in and lastly we did the same thing for owner i set insert data metabox and we set our customers title click insert and we have that as well i don't remember if i showed the actual snippet again you would just double click in here insert your data choose metabox field and testimonial snippet and click insert and click done or you can just click out and it'll pull in your data so that's how i made these and again we used our range field which is a new one that we haven't played with yet and it just gives us another design option to show a star rating within our testimonials as well and now you can see that all of these are roughly the same size looks like two of them are four lines and two of them end up going to five lines by a couple of words certainly we could play with that a little bit to get them closer if we wanted to but they're not drastically different um because we don't have one that has a full paragraph versus one that only has one um you know a sentence or two if we once we went to the actual full testimonial which i would probably put in either just link the full card or add a button in here as well which you know we could do let me just minimize these and here i could add a let's do a text link in my class i have some utility classes in here and if i double click this and it highlights i can change this to read full testimonial i can come up to insert data and we're going to set actually i know i apologize we're not setting custom data there we are going to set our custom data in the actual url field so data and permalink so now you can see that i have a button here that's going to take us directly to our full testimonial which again i might add some spacing here just so we have a little bit more again i'm not paying attention too much to design here i'm just the actual function of it so now i can click save you can come back to the front end hit refresh and you can see we have our button here so right now you can see i can click it it's just going to take us to a blank page because i don't have a template set up for that but that would be our next move and again you can see that we have our different how our different stars show up based on what we entered so this is indicating that they rated us zero this is a one star four star and five star five star is the default setting for it so again that's why i set it that because i figure most people would be adding five stars to their website choosing you know the best testimonials to to show their customers so again i didn't pay attention to design too much just more on the function of how to use these different data fields and how easy it is now that it's fully integrated with oxygen if you have questions do let me know i'm going to be making more videos going through different field types and doing more difficult things than just text fields like most of what i've showed today but again it's pretty simple now and i hope you guys enjoyed and we'll see you guys in the next videos

Channel: LocalSBM

Views: 1,147

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

Id: HrBEyVVbqa0

Length: 40min 44sec (2444 seconds)

Published: Sat Sep 04 2021