How to use Meta Box Cloneable Fields in Oxygen Builder with OxyExtras

[Music] hello everyone and welcome to my next video in this video we are going to walk through um using metabox within oxygen builder and i'm throwing in using another third-party plug-in called oxi extras it is a component library built specifically for oxygen and with this we're going to use oxi extras specifically for two components which are their dynamic tabs and pro accordion this is going to allow us to pull custom field types which are going to be a repeater group from metabox and use it on the front end within oxygen it's going to allow us to use that repeater data where without oxygen's direct integration with metabox like they have with acf it's going to be a little bit more difficult to use repeater data so using oxy extras it just helps us bridge that gap using again either a pro accordion or dynamic tabs the first thing i'm going to quickly mention is that on oxi extras you do have to be on version 1.3.3 or later if you're on something before that you're not going to have the direct integration with meta box so just make sure you're on 1.3.3 otherwise you may not see some of the options in my case i have a brand new install here that is completely bare besides these plugins that you see here um the first thing i want to do is go over to the oxy extra settings so i can either click that here and or it over under the oxygen and oxy extras out of the box none of the components are going to be enabled so we are going to do that before we start and the first one i am going to look for is our dynamic tabs and then we are also going to be looking for a pro accordion certainly you can go ahead and enable all of these if you're going to be using them on your site but in my case i'm only using these two for this instance so i'm just going to enable only those so i'm going to click save changes and next i'm going to come over to pages and i'm going to create two new pages my first one is going to be frequently asked questions i'm going to go ahead and click publish and then i'm going to add one more and we'll call this one our services go ahead and click publish and we can jump back once we have that set up let me just close out these other tabs i have up here and next we are going to jump over to meta box and before i do that i'm just going to quickly mention that i set these pages up just so that when we get over to meta box we have these already set up to set where we want our custom fields to show so go over to meta box and then custom fields and we're going to add new and we'll call our first one free frequently asked questions it's very hard to type and talk at the same time so i apologize next we're going to click on add field and in our search bar here i'm just going to start typing group and we want the group that is showing under layout and what that's going to allow us to do is group together a couple of fields so this one we are going to call faqs and we want to next come down to this option here which is cloneable and if i hover over this little question mark you're going to see it says make field cloneable repeatable so i want to go ahead and click that and that's going to enable us to set it up as a repeater field now i'm going to come down to my sub fields and click add field and for my first one i'm just going to add text and we are going to name this one question and i can go ahead and minimize that and add another field and this one i'm going to use a text area so again you can just type that into the search there and it'll narrow it down and this one i'm just going to call answer next i'm going to come all the way up to the top here and we're going to add edit our field group settings and here we have post type and right now it's showing post but i'm going to click x on that and then choose page and then next i'm going to click advanced location rules and we're going to add a rule here and it's going to show as post and if i click my select it's going to show us one of our pages that we set up had we not had that set up nothing would show here and we'd have to come back and reset this after we make that page so that's why i did that first so go ahead and click our first one which was frequently asked questions and i'm going to go ahead and click publish and now i can go ahead and click add new because we're going to do our services next so we'll do our services i'm going to add my field and again we're going to do group on this one i like typing it into the search because it narrows it quicker and i don't have to look around for it because i don't have it memorized where everything is so i'm going to label this group we're going to call this our services and we are going to again choose our cloneable checkbox here and now we're going to add our first field which is again going to first one we're going to do text and this one we're going to call service name go ahead and close that and we're going to add our next one and this one we're gonna again use our text area and this one we're gonna call uh service we'll just call it desk for description and now we can go all the way back up to the top and do our settings and again we're just gonna set our post type to page add our second rule and select our services page and go ahead and click publish so now if i go over to my pages we can start with our frequently asked questions and in here if i scroll to the bottom of this page you will see our custom field group showing up here so i'm going to go ahead and just copy and paste some things in here that i already have that way i didn't have to try and think of something on the spot and i can click add more to add my next one again i'm going to copy this over and i'm just going to do a total of 3 here 3 always seems like a good number for examples all right so i have those all in there and i can go ahead and click update now i'm going to jump back to my pages and we're going to do the same thing on our services so again if we scroll down to the bottom here we'll see our services and i'm going to go ahead and copy and paste these in again i have three here again and we'll get this last one added in all right perfect i'm gonna go ahead and click update and the reason that i set to the pages within my field group is so that on our services group only shows up on the services page and you'll see that i don't have the faqs on this page just like we didn't see our services on the faq page let's just make sure that no one is getting confused by fields that shouldn't be showing up on every page but instead we want them specifically for any given page so now that we have that updated i'm going to go in and jump into edit with oxygen on our services page all right and i just have a completely blank template here again i didn't make a main template to inherit i just started completely blank i'm going to go ahead and open my structure panel and click add and we are going to add a section followed by a div followed by a heading and this we're going to change to our services i'm just going to expand out my section and div here my section i'm going to set to vertical and center and then i'm going to do the same thing on the div set that to vertical center and then i'm going to set this to 100 and then still having my div selected i'm going to click the add in the top and then on the left hand side you'll see we have a new option here called extras so if i go ahead and click on that you're going to see now i have the ability to add my two oxi extras components and certainly if you had others enabled it'll have more showing here but in my case i want to use the dynamic tabs for this one so i'm just going to go ahead and click that it's going to add it in you may have to move it around a little bit and i'm not going to focus on styling at all here you can see that just put some example text in there so now on the left hand side here you can see i have dynamic data and if i click this drop down it's going to let me either do acf repeater or metabox clonable group so i'm going to do metabox and now it's asking for my field group so i'm going to go have to go back and grab that quickly so i'm just going to click save here just so that saves and open my admin backup makes it easier to copy and paste if you have to open here and i'm just going to navigate back to my metabox custom field group and we are working on our services so i'm going to start with that one and what i need to do is under our fields tab grab our our services main id which is the id for our field group and go ahead and put that in our group field and then next we're going to scroll down and grab our first one which in my case is going to be service name and again we want that id and just go ahead and paste that into the tab subfield and then lastly we are going to grab our services description id and this one we're going to put in the content field so you see i've pasted all that in and nothing's changed over here in order to do that we have to scroll down a little bit and click apply params and now you can see that it's pulling my data and it shows all three that we had set up so i'm gonna go ahead and click save and we're going to go ahead and take a look on the front end open that in a new tab and while it does that i'm going to go back to the admin here so now on the front end you can see that we have all this here and again i'm not focusing on styling at this point just purely function so you can see that i have all three tabs here and if i click on on each of them it is showing that data for each tab now if i go back to the back end of our services i'm just going to show you how quickly and easily it is to add um another option so we're just going to go service or and again um i apologize for trying to type and talk at the same time it is not easy all right so we got that in there click update go to the front end hit refresh and we have our fourth one showing automatically so if i go ahead and click on that you can see it's showing that content now and again we have now four of them after we edited that so you can see that it was very easy to go in here and add another option without having to go into oxygen and change any settings at all so it's very easy for a client to be able to come in and either change out data in these fields add a new field and or take out a field so again now if i come over and click this little x on the right hand side it takes out my fourth one i click update and if i jump back over to the front end and click refresh we should see that one disappear in a second here and maybe that didn't finish updating completely before i clicked refresh so let me try that again seems like the system here on the sandbox is going just a little bit slow all right so you can see that it disappeared now so we are back to our three so again this is just a very easy way for clients to be able to go in and edit data using metabox custom fields because our dynamic repeater data so now that we have that one done i'm going to jump back to our pages and we are going to move on to the frequently asked questions all right so i'm going to go ahead and click edit with oxygen and in this case we're going to do almost exactly the same thing i'm going to open my structure panel add a section add a div and add a heading and we're going to just change this to faqs and i'm going to open all these up and just make sure i have everything centered here and make my div 100 and now i'm going to come and click on add and go down to extras and this time we're going to use the pro accordion so you can see that it adds one in and again it has some filler content in there and on the left hand side you can see we have a bunch of options again you can choose um to change your in edit mode to collapse the accordion and or keep it expanded and we can choose our type we can either set up individual ones and manually edit them you know by clicking in and editing data or we can click our drop down here and choose our dynamic items for metabox so that's the one i'm going to choose and again now you can see it's pulling in some fields here that we have to go and grab our field ids for so i'm going to jump back to my custom field groups and this time we're going into faqs so i'm going to grab this one again if you saved when you're on your settings you'll just have to click your fields tab again to get back to this and now i'm going to choose faqs drop that into the cloneable field group scroll down click on questions copy that id paste that into my header text field and then lastly we are going to grab my answer again needing the id for that one and we're going to paste that into the content field we can go ahead and skip the subtext field in this case and now i'm just gonna do the same thing like we did before scroll down and click apply and now you can see that it automatically added two others in here that we did not have before so i can go ahead and click save jump to the front end and then i'm also gonna go to the back end on this well the front end opens and you can see that we have all three of them here if i click on the top one you can see it opens i click on the next one it closes the top one opens the second one i can also close it and then i can open the last one so it's very easy to add that in there and you can see again i'm gonna go to the back end now and we're just going to add another question and i'm gonna click update now that we're updated i can come up here and click refresh and you can see that it adds that in and again i can click on any of these and open as needed and if i want to go back and delete this one can come back in click this x right here click update once that finishes now i can jump to the front end and click refresh and you can see that one now disappears so it's very simple to be able to add that dynamic data using the metabox repeatable fields within oxygen builder using oxy extras they did a great job bridging the gap with those integrations making it very easy to do i highly recommend checking out oxygen extras or oxy extras they have a ton of great components and it's a great plug-in i highly recommend it on top of getting metabox if you have not already also as always i highly recommend oxygen builder it is a great builder i hope you guys enjoyed my video and if you have questions go ahead and leave them down in the comments i hope this video helped you guys learn a little bit more of using metabox within oxygen builder and even checking out oxy extras a little bit more again thanks for checking out my video and i look forward to seeing you guys in the next ones

Channel: LocalSBM

Views: 1,355

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, Meta Box Views, OxyExtras Meta Box Repeater, Meta Box Group

Id: zCQ-ImU4YGw

Length: 21min 8sec (1268 seconds)

Published: Tue Apr 20 2021