Using Meta Box Color Picker to Set Global Colors for Oxygen Builder

[Music] hello everyone welcome to my next video in this one we are going to dive in using meta box settings pages and color pickers so you can see i have two colors set here which is a primary and a secondary which is what i have set on the back end on my meta box settings page so you can see as i change these to any color here of my choosing if i click save and refresh i'm automatically getting those updated on the front end without having to go into oxygen because we're doing this and setting it up so we have a variable that we're pulling into oxygen builders global colors using a variable and this is going to allow us to set our colors right from the back end and it's going to update wherever we're using that global color alright so we're going to get started here first thing i am going to do is we are going to install code snippets so for that we are just going to go to plugins add new type in code snippets it should be the first one here and i'm going to activate that all right and looks like i have an update for metabox here i'll do that quickly i just have everything installed here and i input my licenses other than that i pretty much have a blank install so let's go over to meta box and we're going to start by making a settings page so we're going to now click new settings page i'm going to type the title this my settings page and the important thing that we need to keep in mind here is this field here so what this is is a option name it's not to be confused with the setting page id it is actually different and it allows you to set this so what i'm going to do is all lowercase is my settings page so it's going to match kind of my title but i'm just going to do underscores where if we go ahead and hit publish you'll see that our id just has dashes but now that we have that set we are going to need this once we get to our code section so i'm going to leave this page open but before we get there i am just going to set some other things here so we're going to change the location of this from below comments to below settings and i'm going to change my icon to this paintbrush because we're going to be working with colors and i think that's all we're going to need to do for this one so i'm going to go ahead and hit update or save if you haven't done that yet or publish next i am going to jump over to custom fields which i'm just going to open in a new tab right now we're going to go to add new and we're going to call this color fields and under our settings tab i want to change my location from post type to settings page and choose my settings page next we're going to jump back over to the fields and we're going to add two fields here both are going to be color pickers the first one i'm going to title primary color picker and i'm not going to enter any other data you can put in labels if you need to but i'm not going to for the sake of this video and i'm going to add another color picker and we're going to set this to secondary color picker and again i'm not going to add any labels for the sake of this video but you can if you need to all right i'm going to go ahead and click publish and again i'm going to leave this open just because we are going to need our ids and what i'm going to do is now jump to my settings page again i'm just going to open it in a new tab and you'll see we have both of our fields showing up here and let's go ahead and just choose our values here you can enter anything you want choose anything you want um we'll do that a purple and a green go ahead and save and now what we need to do is come over to our code snippets we're going to go to add new and in here we're going to call this um color picker code and i'm just gonna copy and paste over my code here but i'm i'll walk through it as we go so what we're doing is adding an action in our wp head which is going to put this at the top we are ending entering our style tag then going into our root so that we can set a variable and then this is where the metabox helper option [Music] data comes in is in this php value here so what i'm going to do is we have our opening php tag we're going to enter our variable that we're setting for this so in my case i'm doing primary color because we're setting it for our primary we're using the rwmb meta helper and what we want to do is grab our primary color picker which is our field id right here and you can see i have that set in my comment here color picker id this next line we don't change anything we just leave it straight as how meta box has it and our next field is going to be our option name so again jumping back here is this field here so what we're going to do is just paste those in and you do want to make sure that you have them in quotes otherwise it's not going to work and we're going to echo our variable and then we're going to close our php and make sure you put in your semicolon to close your primary and then we're going to repeat the same exact thing on the secondary and this time all we're doing is changing our secondary color variable from primary to secondary and again changing our color picker id from primary to secondary everything else is the same and i'll quickly go to the meta box documentation here just so you can see what i had so what we want to go to i believe is under extensions and wb settings pages and if we scroll almost all the way to the bottom you can see that i'm pulling this getting the field value and this is where i had i got the code to enter here and again i'm just swapping in my data in place of the field id the option name and the variable and then i'm adding to that by adding in my root inside my style so i'm going to go ahead and save changes and activate and now i'm going to jump into oxygen so i'm going to go over to my pages again i'm going to open in a new page or in a new tab and we're going to edit with oxygen and you'll notice once i get in here i have a completely blank page i don't have anything set up yet so all i'm going to do is add two sections in here and then i'm going to come over to my manage and settings global styles in colors i'm going to choose global colors add color and we're going to name this primary and what we want to do is now type in our variable so we're going to do var primary i'm going to add that and you can see it's pulling in our purple already and the reason we entered our code like we did here is so that we can actually pull it into oxygen here if we just did everything in the style sheet back here this would show blank so that's why i put this in an actual code snippet as well not to mention we need to do that in order to pull out the php we can't run that in an actual style sheet but it goes even with setting color variables if you do put them in a style sheet inside oxygen your color is going to show blank but if you put it in either code snippets or advanced scripts it also works in there you'll get the same outcome where it's going to actually show the color as well so let's go ahead and add another and this one we're going to call secondary and we're just going to repeat the same thing we're going to go var and type in our variable and add and you can see we're getting our green there as well so i'm going to just quickly click save and now i'm going to come up to my top background color and you can see that i have my colors available here now and i'm just going to do the same thing on my bottom section here except i'm going to choose the second color and if i click save and jump to the front end you are going to see that i'm pulling both of those colors now let's go ahead and jump back to our settings page so i'm done with this because we have all of our code in there so i'm going to click on my settings page and we're going to change the purple to let's go to a hot pink here and then our green will change to um let's go to a deep red here we'll go ahead and click save and if i click refresh on the front end you can see my colors change and i did not have to go into oxygen to do this so this gives us the ability to edit our colors directly from the back end without having to go into oxygen again to change them and by setting them as global colors anywhere that we've used that color it's going to show or change that color for us so it's just a way to give clients the ability to change colors if need be from the back end using a color picker from metabox and i'll post this code here down in the comments so you guys have access to it and certainly if you have questions please do let me know this was a pretty quick tutorial and pretty straightforward thanks to the metabox documentation i hope you guys enjoyed it and if you have questions let me know down in the comments below

Channel: LocalSBM

Views: 587

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, gallery, Settings Page, Options Page, Color Picker, CSS Variables

Id: mjLsbRgQ2k4

Length: 12min 48sec (768 seconds)

Published: Tue Sep 14 2021