Using Meta Box With Oxygen: Creating A Settings Page

hi this is david mccann for webtng in this video i'm looking at using metabox with oxygen when it comes to working with dynamic data oxygen is known for being one of the most flexible and powerful builders it has long had support for advanced custom fields and tool set oxygen is now adding support for metabox in version 3.9 and the beta was just released metabox is lightweight and modular and has been a favorite of developers the core metabox plugin provides the framework and then there are a large number of optional extensions that add features such as user interfaces for creating custom fields custom post types post relationships and more one of the features of metabox is the ability to easily add a settings page to the wordpress admin in this walkthrough i'll show you how to add a settings page for business contact information and hours of operation and then how to display this information on the front end using oxygen i've set up a test oxygen site we look at the plug-ins you can see i have the oxygen three nine beta one installed i have the metabox core plugin installed and then the metabox all in one plugin this is a helper convenience plugin that gives you quick access to all of the extensions i have wp reset pro installed to reset the site between testing cycles i've gone ahead and created some templates oxygen disables the theme so you need to have some templates in place the main template provides the header and footer and uses oxygen's placehold content element then there's an all archives template which applies to all archives and their specific one for blog posts and this one applies to the blog post index then there's a template for single posts and single pages this is a new install of metabox and have not yet created anything with it it has here the option for creating a settings page if you don't see this option then check under extensions where you can enable or disable any of the features that you like and here for example is the settings page so i'm going to start by creating a settings page and we'll call it site settings and i'm going to name this over here site settings also so we want it to be a top level menu and we want it to come after settings it has this drop down here which makes it very easy to choose where you want your custom post types and in this case settings pages to appear and it shows you the dash icons here so it's easy to choose one for your settings and i'll just go with the cog then this is the capability of who has access to it and edit theme options is often one which is reserved for admins so i'll just go with that you can add a custom class id you have the style for the meta boxes on the settings page the number of columns if you want tabs tab style and whatnot if you want custom submit buttons and messages and whatever and i'm not going to need any of these if you want to have some relationship with the customizer then you can click those or the network okay so i think this is good was just a simple settings page in the introduction i mentioned that meta box is a favorite for developers and this is one of the reasons why in many places you'll see the option to get the php code which you can put into your own plugin if you don't want to have the gui extension active so that's a nice feature okay then the next thing we need to do is we want to create the custom fields for our settings so i'm going to go here and the first thing i'm going to do is go over to the settings and it's going to be where it's settings page and site settings okay so that's where we want this to show and then we'll go and we'll add our fields the first field we're going to add is one for phone number and you can see it's generating the label and id there but we'll have it be phone number and you see as you type this it generates the id for you you can override that if you want but there's probably not any reason to do that then i'm just going to go with all of these defaults here you have required read only prepin the pin text and whatnot cloneable which we'll use in a minute but down here there's the option for number of columns and metabox by default is going to show the settings in a 12 column grid so if i make it six columns this should be kind of a half page a two column option so that's the first field and now the second field we want to add is for email remember this is the contact information we're adding so i'm going to call this site email and i'm going to again go with all the defaults except at the bottom we're going to go six columns so this should share a row with the phone number and then the final field i'm going to add is going to be a text field and let's call this open hours and we want this one to be clonable okay and so what that means is like sometimes when people list hours they list it you know monday you're open nine to five tuesday you're open noon to five or whatever and by having just single line text fields that are cloneable who's ever responsible for this site can easily go in and change the hours without requiring a developer to come in and help them okay i think we're about finished here let's give it a title of site setting fields and we'll name give it a group id the same site setting fields and let's check it's still that's still correct so i'm gonna save that and here is the settings page we just created okay so that was easy and here are our fields so we'll start by adding phone number and a site email and then the open hours so we'll say monday through friday nine to five and i'm gonna save okay so we've got our site settings now how do we show them on the front end well when we looked at the front of the site here we see there is a page for the home page and you set that up under settings reading you know you create the page first and then you can assign it but it has no content other than just the words this is the home page so let's go add our contact information there and we can just take that out now and let's edit it with oxygen here we are in the oxygen editor and let's add a section okay and inside of that section let's add two columns and then in this column let's add an image and i've prepared an image already so we'll get it from the media library okay and then we'll center it okay so there's our first column and then in the second column we'll start and we'll add a heading and under that we'll add a text field and in this text field we'll start and we'll say phone number and now you notice there's this option here for dynamic data so let's go and grab some of this metabox data and here's a metabox field now this isn't post data but this gives us access to that site data and you see here we have phone number here are our metabox fields so we select that and insert it okay there's our phone number that was easy now let's add another text field let's do the same thing and we'll go and get the dynamic data the site email address and there's that okay now let's go and get the hours first let's put a another heading and we'll change this one let's change this one to bnh2 okay and we'll say store hours and then under that we'll add another text field and we're just going to remove the content and go insert data and this time we want the open hours and there's the option here to have a separator and it is a clone field so i'm going to add a br tag and insert it and there are hours so let's save this and go out and look at our home page and there it is okay we were able to get this contact information and show it very easily now let's go test out the cloning ability and remember i was hoping that this is going to be easy for someone who works at the shop who's not a developer to come in and change the hours we can see they could easily just edit this but let's say they decide they want to be open on saturday so we'll save that and we'll go to the home page and that shows up automatically there this is a clone field and handled that and it's on a separate line because we added that br tag okay so that's our walkthrough just a bit of discussion and conclusions in this example i added the contact us information to the home page but it would be just as easy to add it above to have a row above the header for the phone number and email or to add the store hours into the footer or to create a template part that you could add into pages where you wanted to so i just did this for simplicity's sake but obviously you can use the site settings wherever you want advanced custom fields also has the ability to create a settings page but it's not as easy as this and we can see that oxygen's metabox integration is working real well it's easy to pick the fields and it's handling the cloneable fields automatically so i think there's a lot of excitement about metabox coming to oxygen and it looks to me like it's going to be a winner this is out now in beta if you're a meta box user or you have a meta box license i encourage you to go and try it out and give feedback to the oxygen team if there's anything you see that could be improved or any ideas you have so there's a text version of the video available on the web tng website along with other walkthroughs reviews and resources hope you found the video helpful thank you for watching

Channel: David McCan

Views: 1,000

Keywords: meta box, oxygen builder, wordpress dynamic data, meta box wordpress plugin, how to use meta box, meta box aio, oxygen builder 3.9, settings page, meta box wordpress, meta box plugin wordpress, oxygen builder tutorial, webtng

Id: KfqpzT0VQ8c

Length: 12min 24sec (744 seconds)

Published: Sat Oct 09 2021