Meta Box and Oxygen Builder Deep Dive

all right all right all right all right all right oh better move the mic in front of my face that'd probably help what's up everybody welcome to a premise lug live stream hope you all are doing well how's everybody doing we have a bunch of people already here in chat this is super exciting i'm stoked to see everybody who all do we have in chat let's see so we got taylor mark stratos muhammad let's see toby says nice image for the title thank you thank you thank you so we're going to let everybody kind of get warmed up here and instead of me doing one of those things where there's music playing and there's you know an image and stuff i'm just gonna sit here and chat for you guys for a few minutes and we'll kind of get rolling here in a little bit let everybody have a chance to hop in jay welcome in andrew heinrich glad to have you back sahil uh abdurasak hopefully i said your name right sorry uh speaking of sunny it is not sunny outside even though it might look at it look like it um so if i disappear it's probably because the power or the internet goes out at some point taylor says look for that haircut no i just took a shower uh i just i haven't gotten a haircut i need one because it's like kind of ridiculous ridiculously long but and stratos probably agrees that i need a haircut as well jason meta box has many more features yeah we're going to find that out today so we'll see what we end up covering there's this stream overlay thing i think you guys can see this right there so it's going to kind of give us our latest activity as far as subscribers uh well actually not subscribers it's going to be the members so like heinrich has a little badge next to his name that's because there's that join button down over here so if you become a member it should pop up i don't know exactly how it's going to work so i'm curious to see i don't know why all the like preview ones are still there so we'll see what happens john says can i throw in an early request custom field in metabox which is a date field how to create the query in the archive template to only show records that might be something we can do taylor says does every american have a starbucks tap in their house i just happen to have one right down the road for me so marco what's up glad to have you i think i saw elijah in the chat earlier hopefully he's still rolling around somewhere lingering in the background i'm hoping to have uh kyle from the admin bar as well but he probably is gonna take a little bit of time before he can hop on and but he's busy this morning he's got a whole bunch of stuff going on elijah says hi lurkin yeah perfect i assume i would have heard by now but i'm i'm guessing everything's good audio and video wise just wanted to make sure before we get too far along love to see yep glad to have marco and stratos elijah is that the infinity gauntlet in the back yeah it is that that right there is my son's uh piggy bank that's a piggy bank and then he also somewhere over here he has a pikachu one and um he was cashing all his money in the other day to buy expansion packs for video games so he was uh he was he was cashing in his thanos money how's everybody doing today hope you all are doing well it's uh you know shortly after 10 a.m my time i know a lot of you guys are in europe and beyond so it's probably pretty late for you so i appreciate you guys hanging out should be pretty good hopefully you've had a good day sahil says how was your day it's good so far still early still have a long way to go um it says no data i think we're all right just making sure the stream didn't drop sunny in colorado awesome i spent three weeks in colorado this summer which is fantastic so hopefully it's still as beautiful there now as it was then 5 20 p.m yeah i figured a lot of you guys are in europe so this early morning for me works ideally for a lot of you guys as well it's night time in india yeah i imagine what what is the current time india let's go with mumbai 8 50 p.m yeah athens i still want to get over there i was supposed to come to europe this summer and last summer but neither of those trips worked out 4 30 heat wave in england yeah for sure well so the point of today's stream as you guys probably already know by this point is um we are going to be really diving into metabox and the team at metabox was kind enough to give me the full ltd license so we're gonna be able to dive into basically everything so i'm pretty stoked to check that out what i have so far is just an install with um basically the uh with just a simple you know it's got oxygen 3.9 alpha one and then we are using metabox taylor says sorry we're using metabox now we're going to use something else uh and if you're watching if you can please before we get rolling here drop a like on the stream really does help tremendously i appreciate every single one of you guys for doing that and we're going to get rolling here so let me pull up the proper screen over here i'm going to get metabox pulled up and we're going to go take a look at the features page so let me switch our screens here so here we have meta box and uh if you're not familiar with this metabox is essentially an alternative to advanced custom fields the thing about metabox is that there is kind of like we looked at last week a lifetime bundle option so for those of you guys that really want an ltd that is still available which as you know advanced custom fields took away i think it was in january of 2020 and then you should use a tool set mute or render a cpt for that sounds great that's a really good use case elijah very practical super client friendly for sure so advanced custom fields took away their lifetime deal back and i think it was january 1st of 2020. so it's been quite a while i actually reached out to advanced custom fields prior to their acquisition and i asked them would they be willing to do some kind of special deal for our audience for the premise like audience in hoping that maybe uh you know they would give us like a a discount or you know uh maybe offer the ltd but they just flat out said no they were like absolutely not so i tried so now metabox you know quite honestly i never looked at because it wasn't directly integrated into oxygen but because it is i think it's going to be really really great so we'll see how this goes there are a ton of features and i haven't explored any of them so to be perfectly clear i've never used metabox before on friday when we looked at the free version i had never installed it or even you know touched it before i was familiar with it but i hadn't actually looked at it so we really need to dig into the features in a little bit now i do have another screen pulled up with all of the downloads but it has my license key on it so i'm not about to share that unfortunately and then there's a million of them front-end submissions admin columns i'm pretty stoked about there's a settings page uh we can create cpts and um looks like tool tips i'm not even sure what all this stuff does to be honest we're going to take a look at all of it though so my question to you is what what are you guys most interested in taking a look at you know here from the start i'm definitely open to advice and input so let me know wren what's up dude glad to have you here we got 41 people watching that's awesome so uh let's see i'm saving money to buy plugging you have any idea how much long metabox ltd will stay i have no idea how long the ltd will stay um you guys would definitely you'd have to ask them i'm not sure that they'll they'll uh you know actually reveal that but maybe don't know so what we're going to do actually first of all is you know install the plug-in so i haven't even done that because i want to walk through it from the very beginning so right now on this side i think i have yeah oxygen and that's it so we're going to go ahead and upload this plug-in and metabox all in one so we're going to install that guy real quick i want to look at what it what it looks like from the very beginning because like i said i've never used it before metabox a oh wow okay so it needs the base version to install didn't know that so this is perfect i am glad that we're walking through this because now you guys can see exactly what you're going to experience if you're a clown like me so this says you have not set your metabox license key that's fine we're not going to worry about that at the moment but let's take a look here so in our dashboard so this dashboard looks pretty much identical to the one in the free version except there's quite a few different you know options over here and the left-hand side which is super cool so post types is one thing now you're not going to need custom post type ui and i'm not sure that that's i mean i guess that's cool if you're really going to like go gung-ho in metabox and you want to keep everything simple and minimize plugins it probably is you know worth doing this let's let's take a look so our the interface already looks better to be honest it's not as overwhelming as cpt ui is so let's just call this one like books and then book and actually i want to do i want to do books on both of them even though i know that's not proper i want my well no i want to make my slug name books with an s so what else can we do you have all your labels which is pretty much identical to cpt ui you can pop in a description where does that description even pop up it doesn't actually give me a little tool tip that i want that's okay so it's public and then uppercase them yeah oh you're right good call but it didn't it didn't fix it maybe i need to update it andre says up or uppercase them you write i'm going to ignore that for now where is the has archive so that's turned on by default so that's something in cpt ui you have to enable every single time which is kind of annoying but has archive is turned on which of course if you're using oxygen you almost certainly want that to be on the other thing that's cool is you also have the ability to change the icon right here in the dashboard instead of having to go over to the wordpress dash icon thing and these are all visible right in front of you so we called ours books so maybe is there a book yeah there is we'll just choose that and then everything else looks pretty similar you can turn on all of these standard core features taxonomies you can attach this to a taxonomy and that works for now so cool and then you could create a taxonomy we could call this like i don't know strata says you saved one second as compared to installing cpt ui is that what you're talking about or are you talking about with dash icon because cpt ui is definitely uh something i use on almost every single site so if you like i said when in full full bore with um metabox it might make sense for you it's hard to say exactly what would be best so why isn't this stream overlay thing gone away so that stuff is i wanna i wanna figure this out real quick this is new for me so those things up there are like placeholders [Music] why would a placeholder thing pop up on the stream i don't know i'm not going to worry about that right now the archive checkbox um what are you talking about stratos archive oh oh yeah i see what you're saying yeah i mean i guess it's not that much time but it's all good and then you can also create taxonomies which again you can do in cbt ui interface looks exactly the same so i don't know exactly what you would call this but what would be i guess like a category so we would just go book categories or something like that we can just publish that guy and that is going to create us which it's not there because we have to attach it to the post type of book or books so now we have our book categories cool so i definitely think that this is just a ease of use kind of thing it's probably not that transformational especially if you're comfortable with cpt ui but like i said if you're going to go full on with metabox it's kind of neat so now the real meat and potatoes of this is our custom fields so let's go with a custom field group um we would probably need i'm gonna i'm gonna just continue with this books example and we're just gonna call this book fields so this is just like acf where this field group title is essentially only for the back end so it makes no real difference on the front end taylor says similar to acf extended yes absolutely you're totally right so we would probably oh that's nice i actually like this drop down here and oh yeah it shows on stream cool um this is much easier to use i think because you can get to so much yeah i think i like this better than the than the big drop down in acf so in any case i just want a simple text field and this is that's a lot of stuff for one field i guess it's exactly the same it just feels a bit less familiar so this label we would just call this book field author the type is text labeled description let's just say input the book author here i'm not sure exactly where this stuff is going to pop up size of input box required read only predefined cloneable so are these clonable fields essentially repeaters because i saw that you could clone any field multiple times i'm curious how that works in oxygen we should totally take a look at that so maybe sometimes books do have multiple authors so that might actually be kind of a cool example here so add more text number of clones let's go with three cloneable is equal to a repeater says jason awesome so clone as multiple what does that do save clones in multiple rows in the database um i don't know if we would want to do that let's just leave that alone for now so our columns here is this going to be how wide it is in a 12 column grid it is yeah so maybe let's go with six or maybe even three since we can duplicate this three times and then what does tool tip do it adds tooltips to your custom fields when users mouse over it shows custom help information oh that's kind of cool seems pretty self-explanatory so we won't worry about that for now then what other field would we need maybe like a year let's try a date field so let's go date picker and this one is going to be book publish public good lord publish date there we go label description when was this book published and i'm gonna actually put this in description um let's just say like month month day day year year and i know all my european friends are screaming at me right now okay what does inline do displays the date picker in line with the input do not require to click the input field to trigger the date let's see we're going to set this to required as well date picker options what is this a key value pair okay cloneable we're not going to set that as clonable our columns we're going to leave at 12 and that's fine so let's go ahead and just take a look at this we have our two fields here we just have author and book published dates and then we need to apply it somewhere day goes first yeah i know taylor all right all right all right all right i'll do it for you guys i'm gonna confuse myself though so when i am confused later why it's not working properly remind me that's what i did but i don't actually see the wait save format is that it custom format so php date so um where is the format i wonder what it does by default i can't recall [Music] i would want it like let's see what's the php um for that so there's a save format is it i always forget isn't it just like why i guess that's for the year only php date format i just want an example give me an example ymd is that all you need to do let's try it i'm going to run with it and then we need to apply this somewhere so our post type we're going to change this to our books the one that we created just a minute ago advanced location rules so you can combine the conditions just like you can in acf toggle rules what does toggle rules do show if any of the conditions match so oh i don't know if you can do this on acf but you could essentially set further conditions with taxonomies is a child post that's pretty cool we don't really need that in our case here position will be after content or side that's pretty cool priority is high i have no idea what priority would be collapse by default tab style again no idea what that is default box and left we'll leave that alone and another key value pair okay we're just going to publish this and go look at what it looks like all right so if we add a new book and i am not about to use this i'm going to put on classic editor i just really it really frustrates me the way that gutenberg looks especially when i'm trying to work with custom fields and okay so input book author here so i'd set that to the three column width so i would just go jk rowling we're gonna go with stephen fry and what's another author uh we'll go with elijah mills okay and then book publish date we're gonna just change this to 2017. we're going to go may 2nd 2017. so i changed the description here so that's just the description that's not the actual output date so there you go elijah it actually does it for you so you get your year your month and your day in that format so that's cool i actually wish though that these were um side by side that's kind of what i was envisioning all three of these yeah taylor uh typically you would want a new post for each author but i'm just saying like in this example case this book was written by all three of these people is is what i'm saying like the best book ever written and then we'll set a featured image and what's the most applicable photo for a book let's say one that'll work elijah is an author here's our book categories over here on the right hand side so this was the taxonomy that we created let's just call this like uh fiction there we go muhammad says you can use columns in setting for side by side function ah okay let's go take a look at that so now we have some fields created there so back to metabox we had our custom fields our book fields and then on our author what are let's see so columns you can use columns in settings isn't that what i did maybe it's because i use the cloneable feature i don't know it's not that important but in acf what you can do is just set the width of a field and if there's you know three of them you would set 33 34 and 33 width and then they just all kind of line up perfectly which took me a while to wrap my head around but it just it became so obvious after that and it's actually something i use fairly often it just helps organize your field group so they're not all just like full width you know all the way down the page so that's kind of what i was thinking it's for the whole field not for the repeater got it that makes sense so let's just change that back to columns of one so it goes to full width okay so we now have this book i want to go take a look at what this book looks like let's go get some taco ipsum let's go there we go perfect we'll take all three paragraphs let's see our book is here toss in that taco ipsum close out all these guys and now really what i'm doing here is i just wanted to look at some of these fields and then go see how it works on the front end in oxygen and then we'll come back and really dig into more of the fields and all the other settings in metabox so now we will create an oxygen template for our singular book singular so singular type of books and publish this guy and edit with oxygen yes he sure did taylor you're totally right yo so uh will somebody will somebody either become a member or drop a super chat so we can get this these fake people out of this corner up there because we have five current members on premise lug here on the youtube channel which is amazing so i wanted to see if that actually works in real time because you should get a dancing guy above my head and then there should also be your your name will stay up there until it's like the most recent five people that kind of uh you know turnover up there let's see what do we got going on on the stream here so we got 40 people watching yeah perfect i need to get that gif of myself so i can replace the uh the like gif that will that will play above my head so you'll see in a minute if something comes through there all right so [Music] on this singular template i am just going to pop in john there is a join button down here below the the video so it says like join and then it should say like subscribe if you're not already subscribed but if you do that join it's like a five dollar a month thing and then you'll pop up on the screen so you'll be the the first person to pop up on an overlay i wanted to test and see if that worked it works in the like demo but oh well there's that to taylor there's the super chat which is like you can basically send like a paid message that will pop up on screen toby says we're missing 22 thumbs up let's see yes we are if you're watching please drop a like on the stream totally free and it helps out massively okay so we're going to keep rolling here so i'm going to pop in a heading and let me make sure i have desktop audio on so that the thing actually uh pops in there we go so this heading we would just insert our post title like you always do in oxygen and error occurred while rendering short code 404 what huh what did i do wrong why would i get a 404 there that's so weird um what what am i doing wrong previewing something weird yeah uh this post still published go back to admin save your cpt and permalinks oh yeah yeah yeah yeah yeah yeah thanks this is a this is a blank install and um like i said i hadn't changed anything so i hadn't changed permalinks which would have happened on a typical like client-facing install so that was probably it cool i noticed i had to save permalinks a lot when using metabox okay that's good to know it's not something i typically have to do even though like you know that's mostly there we go it worked right away it was permalinks okay cool john yeah [Applause] [Music] welcome dude thanks so much really appreciate that so it should pop up on screen here in a second there it is that's so awesome it works that's so sick and then it you can see well actually if i switch back right here now there's now there's you john right there sweet thanks dude really appreciate that you are member number six super awesome uh okay so rin i know isn't that amazing we're gonna have to actually design uh like a real like a me version like a me dancing right there instead of some like captain dude uh let's see the emoji yeah john so you get a bunch of emojis as well so i'll drop these in chat you get access to all the custom emojis as well and those are all designed by rin she's up here in the chat yohala at ran hola okay so what else we got let me come back over here sido hello stratos is great i agree stratos and kevin and james and all the other oxygen content creators like i always forget how to say his name kraka andoro i always want to say it's unduro but i don't think that's right a ton of a ton of great oxygen content creators and that was who else was in here jason as well so yeah plenty of other oxygen people to subscribe to as well um yeah so that's seven members now super awesome all right our other fields i i always want to go i'm looking for acf in this sidebar but i've got to stay with metabox that's like a that's like a brain habit i have to flip ceto welcome don't forget you guys get access to the custom emojis as well so you can look super cool okay so our other fields here we had a date field and just a simple text field so these should just allow us to pop it in through dynamic data just like an acf field i actually do and i definitely am going to turn on that option in our field group here to minimize them i wonder if that's in the admin or the back end though actually because i don't really like the fact that um they open up and there's just so many things on them and position i want this to be oh you can even do before post title which you can't do in acf let's look at that i'm curious how that looks uh it's kind of hideous maybe it's just my install that is not that doesn't look good so uh after post title i guess maybe that looks better maybe there's some some weird thing going on there oh yeah well no there's some there's some css thing going on here really odd either way i do want it to be after the post title i think that's where it kind of makes the most sense especially for clients because it's like input the post title and put the fields and publish makes it pretty straightforward so now what we're going to do is like always featured image as our background we'll go top 50 we're going to make this heading white and then we'll pop in another section here you set it to one column should change oh you're right john good call that was my fault columns is 12 book publish date is also 12. perfect so then now if we update this bad boy there we go okay that was it thanks dude appreciate that john okay so we would have our content our taco ipsum and then we would have our book written by i'd probably put this up in the uh heading here and or in the um header so we would go with text and i wonder how this is going to work with three different fields for these authors so oh separator if field is cloned awesome so that's built right in so i would just go comma and then a space i wonder if you could do a line break can you do just like a br tag and make them like stack that'd be dope if you could okay so there is our text that is super cool i really like that and i'm just going to make this bigger so we can actually see it i'm going to try this with the br tag since elijah just said it should work so isn't it slash br yeah let's go that's awesome so um in uh in acf if you use like a checkbox field which we're going to test here in a second if you use a checkbox field it puts everything on the same line like if you select multiple check boxes in the background back end then you do it on the front end it just all smushes together there's no way to kind of merge them so let's go create a checkbox field so this is going to be uh is it select can you make the donation overlay a bit smaller oh yeah it is kind of in the way let me let me um hold on one second i will be able to fix this one second maximum event where is it let's go with um 240 and then let's see if i save this here does it refresh maybe even um i might need to just move it out of the way i wonder if there's a way to like set opacity actually yeah let's do that we're going to go with 60 save okay cool so yeah you can kind of see through it there uh good call engo appreciate that legend says if it doesn't already work in acf and 3.9 we'll probably add the same separator support okay cool well that's perfect so uh what i wanted to do now is check box field so i'm assuming it's going to be a select field oh there it is right there it's checkbox i'm a clown if i just use my eyeballs i could see it so let's just write something like um i don't know like style this will be our name i don't really care about the id i'm glad it generates something that's like really unique instead of like an acf it just makes the label the id which i don't think it ever really causes problems but i'm just like i don't know seems like this makes more sense we're gonna make this required show as an admin column that is cool um how do you oh wait this is just a single checkbox is it checkbox list oh okay okay like i told you guys this is all new for me all right so here is our choices style of book is what i'm going to call this field so it's a little bit more clear so our choices will be like history edu edumacation um art writing story telling i just want some options in here so what does inline do i'm assuming it makes all of our yeah there we go checkboxes on a single line toggle all cloneable we don't need cloneable then update until you run into a search plugin yeah not sure about all that so saving and we gotta probably refresh i'm assuming since we were in oxygen before that uh before that checkbox field was created okay so let's just pop this above our text i actually just for the sake of example i'm going to pop in a new section here and we're going to add in a heading this guy might be in h3 and we'll call this like style of book then just pop in a simple text field insert metabox field style of book return value or label i don't since i didn't specify one it should just be label if i'm not mistaken so separator of br insert that bad boy and i guess it's value because i'm a clown value br insert and oh i didn't actually select anything on my book i'm an idiot there we go let's go with history art and storytelling and that's weird how the box like expands in width when you check it cool now if i save i wonder if i have to refresh again gotta get ahead of myself yeah good call john i realized that after okay there we go so there it is so can you i guess you wouldn't really be able to change the tags on these to something like li which would be pretty cool but that's probably okay i think that's really sweet though so you could either do it with the br tag or you could just simply go with i'm assuming i need value again just a comma separator like that so cool yeah and since elijah said that's probably going to be coming to acf 2 that kind of solves that problem but that is perfect so that is super easy very very easy all right so what are some of the other fields in here that are of interest so we'll get to relationship fields later on um so don't worry about that radio radios work in acf i'm assuming it's probably going to be exactly the same thing what does a select advanced field do wonder what the difference is um [Music] multiple i guess you can select multiple drop down with search ah okay it says jason sweet so let's just pop in some examples i just want to look at what that field actually looks like in the back end oh cool okay that's pretty neat so if you have a massive list of stuff i don't know exactly what you would have there maybe like i don't know that's hard to say in a book example but yeah you can just search and press enter that's sweet i like that a lot that's really cool that field is not available in acf as far as i'm aware okay so i'm going to get rid of this because that one doesn't serve us any purpose at the moment but i want to explore some of these other ones so you could have a hidden field that might be useful for inputting data into an oxygen template you don't want somebody to manipulate in the back end so we have an autocomplete and then background what does the background do is that just an image field you can attach before and after the pseudo element i wish that these were actually like clickable tool tips use case could be for locations like of stores yeah totally you're right all right daytime field set google maps i want to play with that and see if that works in wp grid builder as well be great if you can do that because i assume it probably also returns the lat long like acf does image filled with colors too uh what's that i don't know what that is and let's see here i'm going to keep scrolling here so image select is that like a gallery let's try image select i want to see what that is uh test one two three yo what up luke welcome dog i'm gonna do the splash wave emoji it's actually not slash wave it's like colon underscore wave colon which is a little bit messy let's go with the multiple select here does the image select field just give you the like an image field on the front end oh cool that's actually extremely tight because you could do something like give people a set selection of images to pick from for a given spot that's actually super dope i don't really have an idea yet off the top of my head what you would use that for but where do you actually put in the images is it here in your choice do you have to put like the image tag or something how does this work uh meta box they have a search yeah so image select category icons yep category icons is another one marco totally uh maybe you have to look at the actual docs so what kind of field was that that is in is it advanced advanced and oh fields okay so image select colors like in products that could work nuno hello welcome in array of value image url okay so you would just go like test and then can you just take any image url directly out of your i wonder if you can just use the full url but yeah probably media library id number as well that probably would work eric you're right so if i update that and refresh we should see that image selectable now yep there it is okay cool so you just simply type in the name of the selection which actually i don't even think matters is it unless it's hovered no it's just kind of for your purposes in the back end but to eric's point i want to see this image id is 73 so what happens if we just take this and we just type 73. i wonder if you would have to put any kind of like quotations around it i'm just going to do it because i bet you probably do let's see does that work no i wonder if that's no apostrophes quotes whatever those things are called yeah that doesn't work that's not that bad though i'm not i'm not mad at having to oid73 but see there's already there's already the separator there let's see yeah that doesn't work like i was going to say i'm not actually all that mad at having to use the um file url i mean it's not that hard there's a copy to url clipboard right there and just simply pasting that in i want to see what all these look like if i just pop in a few images i think that would look really cool and you could use icons trying to think when i might have used this in a real client site there was a site we were working on recently yeah you're right eric worth exploring for sure that's the whole point of the stream is exploratory there's a client site we worked on recently where on the home page they had like a bunch of different sort of fields they needed to be able to manipulate with like an icon and uh like a image link and all kinds of stuff like that so this would have been an example where we could have made this so user friendly in the back end does relative path work ask taylor let's try it so pop that guy out and that guy out let's see if that works i actually it's funny i made it so these fields are collapsed and it's kind of annoying when i'm refreshing this all the time so i might go back and change that so yes the relative url path does work so that's perfect that's really neat i like that a lot now i wonder what happens in oxygen with this image select let's go ahead and fill out all four of these with some photos and see what ends up happening on the front end i don't want that one because that's our featured image we're going to take this one of the waves because that looks cool so three all right and then let me make sure that this book has all of them i need to select something luke says did you end up buying metabox jonathan uh they were actually kind enough to give me a license for use uh for reviews and videos and you know this very purpose so they did provide me with one which is fantastic so thank you very much metabox team so i have these two images selected let's update this guy and then in oxygen we need to refresh and let's see how this looks on the front end so i wanted to give a shout out to you seven members luke and four other people became members last time we did a stream last week heinrich and quite a few others and then today we have two new members which is fantastic so thank you guys if you haven't already drop a like on the stream for me i sincerely appreciate that and it helps a lot luke says must be nice being a hot shot i just i i asked and they said sure so i was happy to do it and i wanted to do this anyway so it just works out perfectly all right we got 50 people watching oh yeah i do this i think i said this on stream last time just in like my general life and also in videos and on stream and stuff i'm trying to be like more me like if you saw me in real life like who i would be you know and my best friend and i are always been like yeah rocker hands so that's why we have the rocker hands emoji in the chat uh all right back to my point where was i what was i doing i forget um oh the image the image select thing taylor says so we need 5k subs to get less yeah maybe so let's see says single image for an image and image advanced for gallery okay cool we'll look at the gallery here in just a little bit so excuse me it's worth trying stratos there's no harm in it uh an image if i use a single image i'm assuming this is not gonna work yeah it doesn't even give me the the option so then can i just use a text element image select separator we'll just i guess add a comma so it gives me the value uh would i need to go query metabox group there's no group what would i need to do so an image doesn't work it's not a meta box group do you have to use a code block for this hmm it probably was my look you're right i just have such luscious locks they couldn't resist what would we do here i'm assuming if field has multiple values then each value in a single row in the database with the same meta key add post meta only put the links in the field lines uh [Music] since i'm a php noob i'm assuming in this template this is what we need to use to get the field value use the following code taylor says secretly jonathan told me he had to give them his secret formula for his silky hair it's just conditioner just condition that stuff dude that's all it takes i'm telling you so i'm assuming we need to get our code block here this is going to take some fumbling so forgive me and advance uh so our value is our field id so id i'm assuming we need to pop in right here and then our echo rwm meta is there something else i need to do here so the reason why i was doing that is it says you can both value and label so needs to be a string taylor tell me what that means [Music] remove the in front of the field id line two so is it just going to be echo that field name you said add hooray yay array yay which puppy in quotes thank you guys for your patience isn't that it so then why does it give me an array because i need to do something with that array right you'll need the loop to access the array sounds like a tutorial for taylor it's so cool uh no you haven't missed the whole thing we're still here is it var dump like that am i adding that in yeah that's that's uh as you guys know not gonna be something i'm i'm uh fiddling with so what does the gallery look like in relation to metabox now i wonder if i can take the metabox field id this is the kind of hacky that i would do it don't work no bummer i'll go back to my code block for you taylor where's my code block there's my code block so var dump var and dump oops i'll put it up here expects at least one turn don't need echo got it appreciate you guys helping me this is cool it's slow and um definitely not the ideal way to do this but i'm interested in trying it i'd really like to get this to work because i feel like i would use this on real real sites that would be great i'm sure people are dropping off they're like what the hell am i watching this is stupid watching this guy fumble around ah okay all right so that's what we're looking for so tell me tell me people of the internets what shall we do now i am very interested i want to make this work taylor is um taylor has been doing streams on twitch where he's like coding in real time that makes me want to die i have a heart attack let's see what is it uh twitch.tv all right just sip coffee does metabox give you the option to return the url let's look validation custom settings yeah like in in acf you can change the return value is that what you're talking about that's what i did look at um this is also new see more details and field types and left my section feels optional need the collab plug-in dude let's do it thanks stratos see you later uh taylor let's see i don't have the um the like what is that one service called that would actually be sick let's do that let's do that are you down taylor i'd love to have you on i can i could give you a call on discord we could play with that those uh yeah i have a license key for it i just have never set it up is my point i'm not like i don't have that one service all right let's see um let me pop out of oxygen real quick i'm going to switch over here i'm going to go with uh doo doo doo doo plug in collab this is going to be really tight if this works yeah pusher is it you're right so i've been meaning to make a video on this collaboration plugin for a while and i will do this um ether this is going to be really tight we can actually get something done for once okay collaboration where is my license thank you guys for holding on don't leave please don't leave please please don't do it uh collaboration where is my license there it is yeah totally uh i am hopefully not going to expose all of my uh invaluable license information but essentially let me if i can bring it back over here which evidently i cannot uh here we go so the collaboration plug-in is from d plugins and they're the ones that make like swiss knife and a couple of other things and the collaboration plug-in means you can work in oxygen with multiple people active whether it's in the same template or across multiple pages or whatever and yeah so this is where it ends up so it installs this d plugins framework and the collaboration looks like this you have to get a pusher app id which as far as i'm aware is pretty much free up to a certain point but i think most of us are never going to reach that so the pusher app id let's go take a look at this guide can reuse the pusher ap app keys on multiple wordpress installs okay so we'll go ahead and sign up this is definitely um let me switch this over here real quick so i can sign up without it showing up on stream uh password sign up please click the link in your email oh my gosh i don't want to do that let me good okay email was confirmed and of course it didn't save my password which is great that's exactly what i wanted um there we go okay so now if i can get this back over here so it says navigate to channels dashboard create app and select a cluster um we'll just name this here our ohio i think is going to be closest to me yeah it is so us east and then select a cluster create the app we're just going to go to app settings oh i almost fell off my own chair uh enable client events enable client events click update to save the changes navigate to app keys and here are my keys which i'm exposing to all you guys which is amazing i'll just delete that later app keys aether collaboration and fill in all the settings with the pusher api keys okay so app id is this guy so app id pusher key app key and then our secret is this guy and our cluster is us2 and you would just pop that in save okay so then is it working i'm going to go delete those in a second i don't actually know if it's working but i am going to take this out of here we're going to go over here to pusher and map keys create new secret there we go all right so uh app key and then app id so that's the setup nice and easy okay so now i can bring this back over yonder oh my god i'm an idiot [Laughter] appreciate you guys having patience this is going to be legit i promise you one second momento okay secret bye mark thanks yeah taylor this is gonna end up on live stream fails so let's do this okay so close out of this bring this back over we'll go here and then let's see what else do i got to do so open this guy administrator i just sent you a message taylor appreciate you guys being patient with this this is going to be worth it this is all in the name of getting some cool stuff for metabox to work and we can watch this happen in real time which is going to be dope yeah alan you're right i was thinking about adding music and i actually have the perfect one so i will pop that in here actually so let's do this i'm gonna do [Music] this here so let me change my yep that's exactly what i'm doing taylor probably need to change my obs desktop volume a little bit nothing too crazy let me know what the volume is like so this is my brother's ambient music i've shared this before it's really like just mellow and chill messing with the volumes a little bit and taylor i sent you a login for that site so let me know okay so now let's go to our template which is right here all right so i am in now and i probably need to refresh since we have the collaboration plugin installed so let's see lee we are working on that right now actually so we're gonna take this array oh i didn't save it no no where did it go so actually this is tight so this is perfect um let me switch over here so i can see i need to move my self out of the way if we look right here this collaboration thing down here tells us what's going on so this will tell us when taylor connects and it'll show you who is where and uh what they're doing you know what they're working on whether it be a page or a template or whatever so that is really cool um let's see i am in the template he says let's see so we should be able to see him working in real time unless did i do something wrong i wonder if you kind of need to like go in and out we should be able to see him making changes in real time right i believe that where you at dog doesn't look like it's connecting um should be green light uh okay and we have marco in here too so i wonder if i made a mistake with the pusher stuff it says two connections so i wonder if i need to get out of the template and back in so we'll pop back in here yeah because it does have the uh orange guy i wonder why it's not connecting for me does it show the green for you taylor [Music] hmm i wonder what i did wrong i would like to know let's see here no it's okay so it's probably a mistake on mine let me go double check all the keys and stuff i appreciate all your patience on this everybody i really do think this is going to be really cool when we can get it working so just a second for me guys and gals so it shows three connections i do think this is working i'm just going to update the keys real quick because i want to make sure that i didn't make a mistake somewhere else just enabled it uh is there something did i forget like an enable checkbox taylor i'm not going to do what i was changing here just to be sure do do do do sup what's up jay barios i enabled debug oh okay uh i'm gonna save these keys real quick just to be sure i swear this will be worth it especially for any of you guys that were interested in this collaboration plug-in because i think it's sweet yeah you can do that taylor go ahead go ahead and swap that stuff out i real quick while we're waiting here i'm gonna run to the bathroom perfect down time all right so i'm gonna move myself back down yonder somewhere over here for now that'll work and i'm just going to run away for a second so i'll be right back you guys get to see my hideous chair in my my floor that you don't normally get to see because i want to keep the music planned so i'll be right back so [Music] [Music] [Music] [Music] i'm back all right [Laughter] uh let's see i'm back let's go it's working okay so i gotta refresh welcome back woohoo let's do this so now i should be able to refresh let's take a look this should connect now right yes sweet okay so i don't know if i'm exposing other oh no moving the wrong thing uh webcam move it up all right so here we go this is what i was talking about earlier where i was saying that you can see who is editing what so taylor is editing this same template and so am i so he should be able to make changes in real time so trailer taylor changed something and we should be able to see this on my screen here so here's my hands i'm gonna wait a second and let him make a change waiting patiently [Music] i'm waiting still waiting it's uh connected for me yeah it says connect for me too make a change make a change what'd you do i'm the one not connected [Music] i thought it showed in real time so it should be green okay maybe i just have to get like fully out of the template and back in yeah i need a green light you're you're right about that oh could it be one of these like browser extensions [Music] this is so weird yeah jason that's what we're trying to set up right now is uh this plug-in from d plug-ins so we kind of got off the rails a little bit here but i think it's gonna be worth it once we can get back to that what uh i don't get it what am i doing wrong surely there's something that i'm missing can you see me typing you can see my changes at least rin so yeah i appreciate you saying that uh this stuff is this is my brother's ambient music so he has a project he calls cliffdiver so it's cliffdiverambient.com.bandcamp.com and uh there's this is one of the albums this is my favorite it's really really good marco says can you try log in incognito without extensions yes i will sir uh all right so let me switch over here [Music] logging in copy that password bam and then we'll log into this template and can't see my screen but uh the incognito one still says orange but it shows me in there so maybe my computer is jacked i broke it somehow that's super weird anyway i don't think that that's all that important right because we should be able to see what taylor's doing anyway right uh let me check my my thing here [Music] uh i get a bunch of mixed content warnings and then uh failed to load resources error cert date and valid is what i get but it's a placeholder place hold it yeah nothing crazy okay let's just do that taylor let's rock and roll dude so uh what i wanted my whole point here let me go all the way back so if there's anybody here that has joined in the last like 20 minutes you'll have probably been extremely confused with me fumbling around and making no sense whatsoever but essentially what i'm trying to do is something that is apparently going to require some custom code so we have this sweet metabox image select field here which i think is going to be really handy for a lot of different things and the idea is that we have to write some code here to make this work so because i'm seeing taylor's changes but i'm not like fully connected uh i'm wondering if i can click the code block and i see what he's working on so taylor go ahead and clean up this stuff like you can get all these example things out of the way and then hop in that code block [Music] i want to see if i can see your changes maybe you can't see mine but that's okay and from what i understand [Music] this should all be real time so i have to refresh every time i wonder if i see it on the front end well no because you'd have to save for me to see that [Music] so [Music] so i do actually have a mac laptop but it's a piece of junk it's a 2015 and uh i'm not like it's just super slow all right i'm gonna try to call taylor no no you should see live changes but you're still not connected yeah i don't understand why i'm not connected either i i went in incognito and it made no difference so i wonder if it's something on my computer but i can't envision what that would be so i'm just curious what happens if i try to refresh and see because i think taylor's busy tippy typing away over there yeah daniel me too got that 2015 retina 13 inch doesn't have enough ram or enough storage but i refuse to buy the current ones uh taylor do you have cashing or anything is it varnish cash and cloud ways am i that much of an idiot and of course cloudway is like times out so frustrating that's the thing about live streams is it's about as raw as it can get so you see all of this stuff in real time i'm gonna be so upset if it's varnish cache but i also i'm gonna be stoked because we'll have solved it okay so varnish cache is disabled so i'm gonna refresh now and try to see if it works switch to grid paint yeah i know i've thought about it but i've just been with cloudways for so long and i've been mostly happy that it's been fine it's just still not connecting yeah it gets me all the time luke i totally agree okay uh i am going to do this let's go with our i'm just going to turn this off real quick if you refresh you should see my code block says taylor okay i'll just leave that alone for the moment and marco and uh myself and josh can work that out later sorry taylor i just did something dumb i want to look and see though i just did something let's see okay so here's the code block so now yeah they should be yeah yeah just to be clear this this something is wrong on my end and the changes that taylor is making in real time are not reflecting to me which is not how the plugin works because i have tested it and it updates in real time between browsers without refresh so we definitely are getting a little bit closer so this is an additional plugin this is not native to 3.9 the collaboration plugin is a paid plugin which i'll be doing a video on in the future but yeah so taylor now that you have this you're echoing the image with this br tag and we're getting this one and three so if we come back over to our fields we have these guys uh that one and three let's see oh taylor's on it okay so he's kind of testing this a little bit i'm just going to go to the front end and take a look here i wonder if it's some other extension i am going to just uncheck all these other extensions let's go just turn these off i'm going to turn off that that i'm just going to turn off basically everything and then i will refresh there's no cheap alternative to grid pain because it's one of the best so you pay for one of the best so i turned off everything except for lastpass and i still don't connect so let me go ahead and turn that off i'm going to turn off google docs and now i don't have any extensions at all i don't think that would make any difference though because i already tried it incognito and it didn't make any difference yeah that's so odd well i'm sorry guys this is not working at all how i anticipated it to go um but taylor's making progress here so he's at least got the uh image sources almost coming through so we'll see here in just a minute what he comes up with taylor let me know if i can do anything for you in the front end there it is sweet so there's one of them uh and then there's the second one which is somewhat broken but it looks like you would have to still style this manually so quite honestly this is not exactly the most user-friendly thing as you can see it's taken us oh my god how long has this taken us way way way too long um so this is probably a situation for a future tutorial muhammad says image select is like you can use with the emojis in back end and put respectively on front end yeah totally that would be a bunch of different use cases for that so i'm going to let taylor keep going with this and i am going to come back to the admin dashboard and let's keep playing with metabox so i don't know if it's going to let me into these custom fields because he's in this book field group he says refresh there we go much smaller now i'm going to refresh on the back end here because i just kind of want to see some of the changes he's making okay so he added an image class here and i'm assuming he popped in some css yep so muhammad says single image and image advances most useful fields for image type yeah sweet um i wanted to play with the gallery field changes are coming from meta box itself there it is yeah so let's keep let's keep rolling here um i've wasted a bunch of your time with these other fields so we're just going to create a new field group and we'll call this image fields i'm going to quickly stick this on our books post type and then we are going to try our single image and then what was the other one mohamed said image advanced so we'll just type an image i'm gonna pop in single image what's the difference between image and single image that doesn't seem like it would make all that much sense let's say this one is required and then we will just pop in our image advanced field so it doesn't seem like there's a whole lot for us to do here max number of files is probably what you would want image lets you upload from your device oh okay okay jason says i found the most used out of single images that's what i've used for gallery and made the single image cloneable image lets you upload from your device no media library okay cool so we just popped in two image fields so i'm gonna go take a look at what those look like and where did i put that it's down here let me go fix that we're gonna put this after post so we can actually see what we're working on so here's our image field so our single image which be this guy thanks andrew i was starting to feel bad because we went so far off the rails and i wasn't actually doing anything so i apologize about that but i'm glad you guys are still getting value out of it at least to some degree if you haven't already please drop a like on the stream they'll be awesome really appreciate that and then our image advanced can we just select multiple yeah sweet so now we have a single image field and an image advanced field we can do up to 12 files and it actually actually tells you how many you have which is great and we can drag these guys around and then we should just be able to take the oxygen gallery element just like we have in um acf and pop these in so i didn't actually give this a title we'll just call this one image test post and our url on that one is 89 that's fine not terribly concerned with that i'm assuming taylor is still in here so let's just refresh real quick let's take a look and see what we got going on and our template is doing something i wonder if it's got anything to do with this code block taylor are you still in this template are you still doing stuff [Music] let's see on the front end what we got oh well there's our um is that the four images from our select or is that the four that i just added [Music] dream of me and the oxygen uh rolling gear [Music] okay so back to my books which four did i just select so this is a different gallery so we have like this baseball 12 45 a.m in malaysia wow you're dedicated dude thanks for hanging out those are from the select okay so you got it that's that's the one that taylor's been working on so that's all for did you change which um books were selected on that other one i'm gonna just edit real quick and i can't actually see it but all four of them show up on the front end yeah i know i'm i'm previewing a different oh yeah yeah yeah yeah you're right you're right let's go almost 2 a.m for me work yeah because yeah you're you're way out there dude um all right i appreciate you taylor i'm gonna going to jump back to that i want to look at the gallery real quick because i was doing that while you were working on that so meta box field is going to be our image advanced gallery which is this id i'm assuming is what i pop in there there it is perfect so it works just like the acf gallery so perfect that works images per row we could go like three and it just fits super nicely you also have the same layout options so you got grid if you wanted to go to column count we only chose five images so it's kind of weird since it's an odd number but that's fine so yeah the that gallery works really well and then i'm assuming with our other image field that we created this is going to allow us to pull in the dynamic data for meta box field of single image we'll just go with like a medium large size and that pops in perfect okay yeah so essentially the same as acf all those dynamic things work for you properly so i'm just going to switch over to this book and i will refresh i'll have to switch the preview drop down again but that's okay and let's see what taylor managed to do so switching here so there is our code block so oh so taylor added i believe this is the light box so this is a tutorial that um he is working on in another capacity so here's our select guy sweet that makes it light box so this light box is not actually a portion of the metabox but uh you can see that script that he popped in here as litty and that just makes basically any image uh have the lightbox functionality so let me go back over here to our custom field groups and i wanted to see what images we have actually oh there's those four i'm getting myself confused i wanted to see how many did we select on those books so sorry if you were doing something in that field group taylor i just stole it from you i'ma steal this from you too so i can actually see what we have selected so all four are selected so let's actually turn two of these off so we're just gonna have this forest one and the sun one and oh gosh i set this one to required because i'm a clown i'm gonna choose a different one let's go with this building with the grassy field so publish that so now we only have two of those images selected which are those two in our select field refresh on the front end dope okay that's awesome that's really cool so taylor thanks dude this actually uh granted i couldn't do it so i'm not gonna say this is simple but this is the this is the code that he just used granted if you're gonna use this you would need to change the field id just for all of you guys here in chat i'm going to drop in that code if you don't already follow taylor you know across social pay attention to his stuff he does amazing work uh so there is that code i just dropped it in chat for you guys yeah he just popped in also the lightbox anything tutorial which is what we're using for that lightbox so that's awesome so oh okay so this adds the class image gallery it looks for that i'm assuming and then that's what it makes the light box out of so can you add this image gallery class to basically anything and then it works anything in this template i'm assuming so like if i go with this image meta box single image medium large so there is that image with our house we are going to reload oh i didn't add the class so you said it was image hyphen gallery so if i add the image hyphen gallery class then oh well it makes it smaller because of the sizing that you set up but that's just a single image field it's not actually in that select field so this should be lightbox that is that's that's dope dude so all credit to taylor on that one this comes from his snippet club uh tutorial so check this out snippetclub.com there's that same link that he just shared but that's actually really really cool i like that a lot there's actually quite a few times that this would be super useful when like client sites or the premise like site or whatever there's all kinds of stuff so all right there is a bonus at the bottom uh bottom of what oh that that tutorial want to lightbox anything including videos google maps url i wrote a quick shortcode that allows you to do that so you can just make links lightboxes well i want to give a shout out to all of you guys that are still stuck around for this we spent i don't even know how long that just took us way longer than i care to admit on uh all of that so that's actually pretty cool though this is the point of this stream was to just kind of learn and test and just kind of see how everything goes i am definitely gonna be working on a collaboration video so we'll sort out why that wasn't working on my end and we'll keep rolling here with metabox so let's go look at some of the other fields that we have so our custom fields while i'm at it uh the book field says taylor's and they're well you go and make that so that it shows up all the time and it's not collapsed unload we looked at the single image and the gallery um let's go with that's a good question same image or src set that'd be great i don't actually know i'm assuming probably just same image so we have custom html date picker custom html is um not all that useful because we can just use code blocks and dynamic data through oxygen let's take a look at google maps so you can pull in an address field marco says we'll send you two licenses as free giveaway oh that's nice of you dude uh yeah i don't know exactly how we will um i don't know how we will give those away but we can work that out anybody that's watching the stream let's do let's see can i create a poll somehow hold on one second let's do trying to think of some way to do this yeah i'm definitely going to do a relationship field taylor isn't there a front-end form is it views i'm trying to think of a way to get people who are interested in the collaboration plug-in license uh that without it just being a race how about this um if you're watching the stream and you don't already have the collaboration plug-in and you're interested in the two licenses that uh marco just graciously sent me what i will do what you can do is send me an email the just send me an email at premiseleg gmail.com and what i'll do is uh later on today i'll pick a winner so within the next you know a couple of hours i'll pick a winner so andrew tate says off to swing heavy objects around my head have fun dude thanks for hanging out uh send me an email premise luggage gmail.com mention that you are on the stream and you're interested in the license uh i'll i'll have that open for the next hour so anybody in the next hour that sends me an email i'll just basically make a list and i'll do a randomized thing and i'll just pick two people and i'll email you back so marco you can send me those license codes on facebook or email or whatever and i'll make sure to pass them out so thank you very much for that uh jason says no front-end form that's okay i was thinking i would do something with that to give away those licenses okay yeah i'll keep the the installation so for this map what i was curious about is how it returns the information in terms of whether it's address or your latitude and longitude like it does in acf because that's what the wp grid builder integration needs to show multiple map pins so i wonder in metabox in their documentation let's see if there's a map thing fields um yes okay so it does lat long and zoom so that's that's pretty much the same exact thing i'm going to assume so we're going to leave that alone for now let's try a relationship field so just for the sake of clarity because we have two different field groups going on here i think i'm just going to stick to this one and probably delete the other one but we can come back to it so we're going to try a relationship field because i've had multiple people ask about that apparently it's not called relationship what is it called uh oh thanks dude yeah i see that now what is the relationship one called switch time picker jquery ui oh is that a oh it's relationships oh weird okay i was looking for a field got it so we're going to create a new relationship we will call this one reciprocal so our from is going to be post our post type will be from a book to a post or do we want it to a post from a book from a book to a post is the way we're going to go so empty message let's just say nothing select selected show as an admin column uh why not after our author column title will be related okay so then r2 will just be post empty message nothing selected we don't need to worry about that as an admin column what metabox do we need so our title let's just leave this alone for now not sure exactly what these are going to be so our field label uh related posts i guess i'm not sure exactly what any of this stuff does maybe max items is going to be three add another post we can do as our add more text so we can publish this i'm assuming so let's go with books relationship is going to be our relationship name here this just isn't quite familiar yet so i'm not super sure what all of these fields do so now if we edit one of these books um where did i go oh it's from a post to a book okay so do you have to go to a post huh what's going on here oh it's over here in the sidebar oh so i can do up to three right or how many did i eliminate i thought i limited it no did i not i guess there is max items i thought i chose three maybe that doesn't do anything seems like it should i can just add a bunch of them though this will be fine so that connects to those and this is from our image test post so we're going to go to this post right here the qos one uh errors author is going to be me and then date oh man i don't want to do all this stuff there we go i shouldn't have set those two required so our post was this one with the qos in the front and i guess it doesn't show up on this side even though i selected it as reciprocal i'm wondering why it wouldn't show that i wish that it showed both of them that'd be nice do you have to put something in the two field on this side as well oh you have to you have to duplicate it the other way got it so i'd have to create another field another member thanks dude really appreciate you that is member number eight i hope you guys heard the sound on that i didn't that's weird the the thing is so small the little overlay is so small that it doesn't even fit thank you very much old press i that's double really appreciate that so now from post to book yeah it must have been because my desktop audio i turned down and the that album finished let's switch over here so we're going to go with this other album so play this guy and then i think i'll probably need to use my volume mixer here to turn that down a bit so to turn this just ever so slightly down thanks marco appreciate that we'll touch base on the collaboration plugin soon as well okay so i want to refresh this real quick and make sure i didn't make a mistake i was changing some fields here so post type from books tobias yo welcome appreciate you guys joining super super awesome just means so much to me thank you very much can you guys hear the music okay it's pretty quiet but i wanted to make sure [Music] i heard the member join sound that time so i think it's fine [Music] yeah i know seriously shout out to luke that's two for one person that's amazing i really appreciate that so this relationship id says books hyphen relationships and now let's go see what we can um figure out in oxygen so we're going to refresh this template because we created this relationship field after and um we had to use an advanced query to get the relationship field in acf to work so i'm just going to let's see which which post did we add that to uh it was our image test pose okay so we're already on that uh i don't want to delete taylor's code block so i'm going to move that out of the way and i'll just stick that stuff in here for now so i'm assuming we can just go with repeater so we'll go query advanced edit so our i wish i could type in this because i know exactly what i want i want post type but i can't um [Music] thanks dude really appreciate that you rock man so music planet that's funny i find the music distracting um post type is books i believe and then add parameter all right what if i turn that down i just took the volume down a bit this is new i've asked about music before and nobody responded so here we are mod coming in late you guys are on fire i turned the music down quite a bit okay so the post type was books i believe i always forget yep and then the post in was the other parameter i believe i can't remember off the top of my head so it was post in the data was metabox field uh let's see [Music] relationship id so how would we do this now um i'm assuming we have to use the uh php return function so it's not get field right it's something else whatever the metabox equivalent of that is so let me go pull up documentation real quick so [Music] where is relationship in their documentation since it's not a oh there it is relationship [Music] besides so many things basic usage terms to post okay appreciate that feedback guys uh the music is something we can work on so i'm just looking over here in the documentation trying to find exactly how i would call that field [Music] because i want to do it in an oxygen repeater [Music] yeah i i see that short code muhammad but that's not going to help us right is it um [Music] i'm trying to see if anybody has input so like in acf jason says i tried setting up a relationship the other way and it didn't show as reciprocal so i'm not sure how to set it up that way without looking okay thanks um in acf you can just go like get underscore field in the function return value right here and then the function argument is the field name but i don't think that works because that's an acf thing right so what's up next trying to think here because you have to do it this way right lee thanks dude welcome to the party let's see is that number nine [Music] uh how many do we have now i think that might be ten total oh rwmb underscore meta get field is that what it is all right uh yeah subtrane jay barrios whoa this is crazy this is awesome i thought everyone was gonna dip out when we were like off the rails earlier i appreciate you guys sticking around um let's see and then the function name [Music] oh oh i see what you're saying taylor rwmb meta is the equivalent of get field so then the function argument should be our relationship field name right uh i just want to pop in a text element we're gonna go with our post titles and once we can see something in there so that query isn't exactly right um let me go look real quick i do this all the time go look at my own tutorial [Music] awesome j barrios i appreciate that let's see so relationship look at all those emojis taylor killing it dog [Music] me gotta watch my own ad real quick which is dope all right so into oxygen we go in my video so we go with the post type oh dude you missed everything you missed me fumbling around for too long let's see so it's yeah that's what i thought it was so it's post type and post in so unless i forgot something which is totally possible the sub train is it has left the station the train has left the station okay jb okay awesome [Music] i'll have to check out your content that's tight welcome to the oxygen community hopefully everyone's not a not a cod there are some people that are uh less than stellar but most everybody in the oxygen community is awesome in a code block we'll go with echo [Music] and rwm meta and then what is our thing again books relationship is that all i'm supposed to do taylor rwmb meta books relationship so there's something else we're missing because nothing nothing pops up in our code block there so is there like a meta key [Music] yeah that's kind of what i'm thinking too taylor i feel like that should work you do you do hear music yeah so that's my my brother's ambient music [Music] print our field name wp query relationship [Music] where did you find that is that in the documentation [Music] to make reciprocal relationships add another parameter admin column column position config [Music] easiest uh thing might be to write a quick custom function of the php return value yeah isn't there isn't there already one uh the functions that they're popping in here [Music] if the chat had a code somebody ability yeah that would be pretty cool so go meet box yeah totally to query for connected posts just pass another parameter relationship to wp query so is that going to be uh let's see in our advanced is it going to be like a meta query i don't think it's an array so there's get terms we don't need get terms use the following code example [Music] i'm just trying to figure out how to translate this uh john says gotta go i'm afraid if you're able to look at the archive template showing only records with custom field in the future that would be awesome yes i forgot about that we will keep that in line or in mind i should say thanks dude thanks dude kyle i really appreciate it talk to you soon uh max says to see what is returned you could try print over wb field name true so what if we go with that and then our relationship is here and then our field name is that and nothing wait oh no this is a singular template i was thinking that was archived but that's okay because it's connected to this specific post so why doesn't the relationship field work in the same way [Music] yeah i i i guess that's kind of true taylor so do you have to then use a code block for this one as well are you not going to be able to use the repeater that's kind of what it seems like [Music] that's kind of disappointing it's not going to work in the same way not sure i'm a huge fan of that to be honest yeah yeah that makes sense all right sandra i appreciate that i'll turn it down even a little bit more for you i'm enjoying it though did you try to add the line global post before like in a code block [Music] that's really disappointing because i want this to work the same way it requires a relationship parameter in the query which advanced query doesn't allow yeah that that's that seems relatively apparent [Music] yeah i wonder if they'll be able to do that maybe that's the maybe that's a benefit to the acf relationship field being an actual field instead of like another component in the back end so that's gonna be worth investigating for sure uh okay so now another question i have that's unrelated to this is in acf can you make a repeater check an acf date or or the actual um you know post date and only show stuff after a certain date i haven't actually tried that i'm assuming you can but i haven't i haven't given that a shot because john before he left only showing posts with custom field date and future that would be awesome because that's going to be like a compare to a date field versus the current what i'm assuming would just be server time so that would that would be interesting i'm not 100 sure on that worth worth trying okay let's go look at some of these other fields so the relationship uh clearly will take some other fiddling the settings page is [Music] i'm not getting a massage or anything okay all right all right all right all right you can everybody can make your own music like an event site with only future events yeah taylor so exactly like if you are um going if you're going to build a site where you want to show only events in the future which i think would be a pretty common use case that's kind of the idea there i feel like it's possible what i wanted to look at though is the settings page which should be very similar to an acf options page but my thought is how would we build that well let's just let's just name this theme settings yeah i know it did get quiet quickly you're right option name is uh oh get php code does it have it right there luke we can probably arrange that your wife may not be happy but so text domain your text domain we're going to call this one theme underscore settings function name your prefix function name we're going to call this uh theme settings test so then do you generate this and it gives you the code dope wait so do you pop this in code snippets where did our fields go uh wait what i clicked the get php code because i wanted to know what it was doing and then all our stuff went away where did the fields go that we were working with oh okay here they are show menu after there it is so theme settings so then we probably need to create some sort of group so option name let's call this one logo image oh wait maybe we don't want to change that no am i not adding fields here so there's tabs it's like acf where you create the options and then you go create a custom field group so we're going to say this will be our theme settings fields so then is this going to apply to our settings page of theme settings got it okay magnus says can you say something about why one might consider using metabox instead of acf well one of the main things that people really liked is that they offer a lifetime deal which acf does not i think there's also some stuff that we haven't explored quite yet that metabox offers that acf doesn't some add-ons and stuff but i've just been playing with the fields built into it today to kind of see where we're at so the stream has been two hours so far so we're going really good we got a bunch of new members i think we're up to 13 members now so taylor and luke and lee and tobias and luke again and jb a bunch of other people heinrich everybody i really appreciate you guys so now let we would create like an image field uh single image this one we would just call like our logo image and then let's just say this one is required and this is just like an acf options page where once i publish this i now have a logo image so if i come into my theme settings there is our logo image you would just pick whatever your logo is which we don't actually have one on here but then you would save this guy and then in your main oxygen template you would then pull in that field now we had to use a um what do you call it a uh the php function return in oxygen for acf so i'm assuming we do the same thing here so let's go ahead and close out some of this stuff we'll just call this one our main template we'll go with pages as this oxygen template and publish ham is asking about bi-directional relationships we did play with the relationship field just a little bit ago and it uh doesn't quite work with the um it doesn't work out of the box with the oxygen repeater element with the advanced query like acf does so that's something that we'll have to look at in a future video so now we went with our image and then our data is going to almost certainly be the php function return value i don't think metabox is going to work maybe it will it's interesting i've never seen this before did you guys notice this the metabox field is blue is that to do with it's not actually a part of like it's it's in its settings page what do you guys make of that if elijah's still here i wonder if he can touch on that why this field is blue oh yeah yeah yeah you're right andre i forgot he said that you can use the options pages natively now so is that what this is this is pulling in from the options page so why didn't it pop up it's just my little blank square there is it because i have a sample page the blue ones is option stuff okay cool well still doesn't answer why the image doesn't pop in uh is there a return value why doesn't that work is there a return value option in acf acf meta box like there is an acf i should say uh i think the single image does not work at least it didn't for me try the normal image field i i did single image earlier and it seemed to work let's just for the sake of example though let's use um let's just use image i think this one's upload no it's not an svg let's try to name this field logo image too and then publish this guy theme setting oh where'd it go theme settings this is our upload okay so that's not what we want i wish it was called i wish it was called image upload rather than just image that's annoying so it's image advanced isn't that what i did here no image advanced field add media pop in the picture of the dunes save this go back to oxygen i'm assuming we need to refresh and then we need to change our field here to our second one so logo image two i'm gonna ignore the size still no i wonder if this is a three nine alpha issue or if there's something else i'm missing instead of thumbnail on the back end uh hmm why doesn't it work oh yeah good call muhammad i hope the um i hope marco and uh or joshua's still here marco said he had to go but if josh was still here that's cool the collaboration plug-in's finally working sweet try text block good call text block insert meta box logo image two image element i'm assuming size will be medium insert it seems like it wants to work it's like it's almost there oh jb i meant uh the uh guy joshua from the d plugins dev team but i'm glad you're still here this will convert text element to shortcode oh okay so before i change it check the front end is that what you're saying nope still doesn't work it seems like it wants to pop it in though it's like it's missing something maybe i don't want image element i'm going to try the url just because i want to know if it works why doesn't it work do i have to set image size uh yeah it's not returning the url you're right i don't know why that would be so since i changed that use short code is there an option for that i don't see that i wanted to refresh here and try again with that image field with the meta box logo image 2 and i set a size in the back end on that field group no why doesn't that work i think elijah said this was an undocumented feature of the 3.9 alpha so perhaps this isn't working yet hopefully this works because that would be really nice i also need to go back and update the tutorial for the acf thing as well okay so we're going to move on from that i'm not worried about yeah okay taylor says it returns the image id but nothing else so i guess you could do it in a code block then in oxygen insert text field with dynamic data there is short code for output via default mb formats [Music] i don't know what you're talking about um that was on our text element we had all those other options just trying to get back to what you're talking about muhammad [Music] use default output format this will convert text element to shortcode um got it so that does work why would that make any difference so then is the size restricted to what i set over here and which one was that so that's our logo image field is the blue one so let me go back up here the image size is thumbnail there's no custom options so do you have to register your own image size then if i change this from thumbnail to large then i wanted to go save to check on the front end why didn't it change the size here custom metabox content use default output format yes settings page equals theme settings path theme settings uh bummer that's kind of clunky i'm not sure i'm a huge fan of that because you don't configure the size some metabox fields require some code block data and elijah adds that function into output as default output can you change the size in oxybuilder let's see well it's going to change just the width of the shortcode and not the image itself taylor says might have found a workaround let's hear it dog what you got let us see let us see what you have taylor php return value uh okay function name see this is where we need the music i'm waiting i'm waiting taylor it would be a custom one oh okay yeah that's fine i'm willing to try it since we're already here i think the options pages are really cool uh especially if you need to give people a uh the ability to edit things like that really commonly like hours or you know hours i think would be probably one of the most frequently used ones so i'm trying to think of what else we need to take a look at i'm guessing we need to look at these other options so front-end submission so there is a front-end submission add-on settings page add-on what does that do there's an actual plugin for settings page oh maybe that just is if you don't have the pro option okay let's actually take a look at this while taylor's doing his thing let's look at some of these other plugins that are attached to this maybe you want to try regular text on options pages in the meantime social media urls or something uh yeah sure i was gonna look at some of these but we can come back to that so we have our first logo image working so let's delete that and that's a good thought andre i i definitely agree uh sorry i have a question working on the checkbox acf only shows array i think you have to change the return format if i'm not mistaken so let's just go with a text element i won't do much here i'm not going to set it as required i'm not going to change any of these other options let's just go with the simple text field and this is still in our options page so we'll update this guy in our theme settings let's just say this is like monday through friday 8 a.m to 5 p.m save and uh let's delete the second one we're going to delete this image field we need to refresh real quick i do believe and hopefully this just works hopefully the text just pops in automatically and if it does that'll be dope so text ooh i need that inside my thing here oh come on now there we go so we're going to go to insert data metabox text i should have named that something else but that's fine and there it is perfect so yeah that that works uh so i guess the more simple fields would work totally fine and that's that text field is about as basic as it gets saves you one extra step having to use the return function value from before so i guess that's okay what else we got what else could we put in here that would be applicable i think i used a radio option before to show and hide something with conditions that's that's actually something i want to try um is using conditions because you can do it with acf so i want to make sure you can do it with this so let's go let's go with a radio and we're going to just label this show hours question mark our choices will be yes and no our text field here we're going to change to hours and then yes no we'll be good probably makes sense to change this to required and i will change this to inline to save us some vertical space update theme settings show hours we are going to go with no so save this and then we will save this again and refresh i forget how you do it in acf maybe you have to use a code block but now i want what i wanted to do with this is i'm going to show and hide this text block based on whether the condition matches yes or no so our dynamic data meta box field show hours uh return let's see it should be label right value i believe value insert is equal to yes and let's change this to show hide based on condition there we go so i'll save this guy in our sample page we shouldn't see that and then if we go change our theme settings to show hours then we should see it reappear cool okay that works that's something that's super handy it's basic but it's really cool that it ties into the conditions like that there's actually quite a few cases where i've used that where people want certain things in a footer on some pages but not on other pages and they need to be able to control it so using those radio options in conjunction with condition can be super handy okay so what else we got oh taylor's back at me so is this for our images taylor so let me switch back over here so this goes back to i believe what we were working on with the image field so then now am i going to use a custom function do you want me to put this function in code snippet or am i just going to leave this in this spot i think you would probably want to put this in a code snippet in a real scenario right oh i need to change this to dracula yes it still says hello world did i not apply this so stick this guy in code snippets which i don't have code snippets i should use some snippet manager for this stuff so i save it did you remove logo image field i deleted one of them i think it was the second one though i'll go double check uh logo image no it's still there so that should work right taylor's taylor's code so get field option is going to be armed media field setting options so i got that added so then do i still need that function right here i'm assuming i can take it out let's try to delete this short code real quick just to double check oh there might be some um some mistake here maybe i copied this in wrong yeah i don't know so it's pulling in stuff now echo value full url yeah see like this is not this is not a practical thing for most people yes there are developers out there and yes there are going to be people like just use a code block it's like but this is not this is not the kind of thing that the vast majority of people are going to want to be doing so but why would i do that um yeah yeah yeah yeah see like i don't know this just doesn't seem like the best the best like use case here you know i'm gonna keep rolling what else do we have here field set image select i wish i could see examples of all of these i wonder if they're over here um fields field set text oh okay comment out var dump so it returns the url but then what why what else am i gonna do here what am i gonna do with that url i need music [Music] hey so uh quick side track for all of you guys watching first of all thank you so much we're coming up what are we at now two and a half hours um i've we've done some stuff hopefully you guys have enjoyed the stream so far uh it's been kind of all over the place which is just i guess par for the course and something like this that's not very well structured but uh just wanted to say thank you guys so much for watching thank you to all of you that have joined we have a bunch of new members i think we're at like 14 now uh which is amazing so i very very much appreciate all of you at the very least if you could drop a like on the stream that will help a lot so i appreciate that very much i was looking at the documentation so the field set one is pretty cool so this would be almost like list items so like in gravity forms you can create like multi-part lists where there's like three different fields you can be like you know name then it would be like marital status you know whatever some other like line and then you can add another person another person etc so that's cool um we have a heading field for structure in the back end image upload image select we already looked at that number so you can set a number field password post and radio check front end oh okay so what what all do we have here so we have a text element that is being hidden based on our condition and then we have a code block and that's it so it worked for a second [Music] yeah i don't know that's that's weird back to these fields though we have a radio option we already looked at that in conjunction with conditions range field is pretty similar so just it's very similar to number it just is a different ui okay select advanced has a search we looked at that what does sidebar do the sidebar allows you to select one or more multiple sidebars it has several settings which can be displayed okay so you could add some items to your sidebar that's cool need to refresh builder i'll try it i shall try it and then if i need to apply this code again still just gives me the full url sidebar seems pretty cool what does a slider do oh same thing switch okay so circle and square switches you saved then refresh which oh oh sorry i i forgot you're you had access to this site i apologize okay got it so so what do we have going on here you have an image and then is this a data php function the function equals tct global and then the arguments is logo image theme settings full url okay got it so we basically registered that that custom function in code snippets a little bit ago and now you added those arguments to the php function return value that function name was tct global and then the function arguments was the last part of it but that is an image with dynamic data from global options using php return value sweet thanks dude yeah that's that's uh viable i think for somebody that uses metabox that would be perfect so it's definitely definitely interesting i don't know that i like that as much it just doesn't seem as easy yeah i don't know switch is pretty simple taxonomy we already looked at that so text text list those are all pretty self-explanatory time you have some time sliders user what does user do allows you to select one or more users video pretty self-explanatory html video and a wysiwyg editor okay uh we didn't look at the color one i'm assuming that's pretty much the same thing and i'm pretty sure it's possible to change the background color of a section or a div with the acf color picker so i would imagine in one way or another it's probably possible with meta box as well so here's a background just kind of looking through these to see if there's anything else that we need to take a look at i'm not saying much honestly date and date time okay hmm well i i don't know about you guys so for those of you guys still watching what do you think about meta box so far i know what we've done today has been a little bit all over the place it's kind of been a bit hectic but this is this is just me playing with it to figure it out and try to get a handle on it now all of us i feel like are familiar with acf especially if you watch my videos or if you use it personally so i'm curious what you guys think as far as how it compares if you don't already have acf will you use metabox will you use acf what do you guys think i'm interested to hear your thoughts i think it's up in the air i bet the integration is probably going to get better but i agree luke it has a lot of snags and not sold on it yeah i think there's probably other things that would be cool like what other what are the extensions that we possibly haven't taken a look at there's an acf migration tool admin columns is cool user profile taylor says i think the way acf is written is better the things you have to do to jump around and over stuff and not having return values isn't as good i agree i think that return value is critical for oxygen toby says looks like it has potential and started my first project with metabox and grid builder yeah i agree i think it has potential i don't think it's a bad plugin by any means i personally at this point think i would continue to use acf for two reasons first of all i'm more comfortable with it and especially in client projects i don't have time at this point to be fumbling around with uh metabox because i'm just not as familiar with it but also it feels like there's still room for improvement in the oxygen kind of integration aspect um taylor says i also prefer the less add-ons approach i hate plugins that split everything into 25 smaller add-on plugins i wholeheartedly agree yeah it's a little thing but it's not as uh not as clean metabox feels still new and is for advanced users says sahil i agree yep conditional logic meta box builder drag and drop your custom fields into place without a single line of code what does that do take the php and run okay so maybe that would write the the code for you is this a free add-on so it says it's 49. metabox builder let me um let me download this let's see upload plugin metabox builder let's toss this on real quick and see what happens so activate so now there should be a get php option so get php code your text domain i'm just going to copy this copy the code and paste into your themes functions.php file oh that doesn't really help us that's not what i want no okay that's not what i was expecting it to be so never mind that is not what i thought it was going to be i figured it would be kind of the savior to this whole thing not sure about advanced users you could probably do the same thing with acf maybe more especially with acf extended yeah acf extended is pretty incredible the amount of stuff you can do with the free version of that plugin is insane and the frontend forms component is really cool we've used that on stream before and actually had people submit post to it which is awesome too much time spent learning acf to transition just yet i completely agree um i think that but i think if you're hung up on having a lifetime deal metabox is totally viable but so far my opinion is that acf is probably the one to stick with if i'm totally honest even though it's more expensive well i don't know if it's more expensive actually let's look at that so advanced custom oh my lord have mercy i turn my keyboard and i can't actually see so advanced custom fields pro view pricing so the ltd of meta box is 500 and it says worth 22.50 i don't know about all that the agency one unlimited websites is 249 a year so you basically need acf for two full years to pay for the ltd of metabox and my opinion is if you need the ltd hopefully you're making enough money with your client work or with other projects of your own where you can pay that 250 a year but also if you can pay 500 you can probably pay 250 a year for two years don't you think so i don't know jason says i like metabox it can always be improved i don't have acf ltd so i'll go with metabox long term yeah i think i have a different opinion on lifetime deals than most people there's so many people that get hung up on not having ltd's which i i understand but at the same time i'm like it's kind of the cost of doing business you need a suite of tools that are just going to make your life easier empower you to do more and for me for so long acf has been one of the most critical components in my toolbox in my arsenal so i am a bit a little you know slightly out of touch in that way because i have the ltd but i also don't think if i came along now and i saw some of this stuff that acf can do i don't think i would hesitate to buy the 249 a year especially as i now see metabox a little bit more and again it's not to say metabox is bad it's perfectly capable obviously and oxygen clearly sees that demand too because they wouldn't have spent the time to build the integration so yeah that's where everything sits right now so what are we at now uh two hours forty so thank you guys very much all of you guys that have joined i want to just personally thank every single one of you it's been really awesome hopefully you guys haven't uh i'll switch back over here to metabox to close the stream out hopefully you guys haven't you know hated this stream it was very much exploratory and uh i hope you guys got something out of it it seemed seemed cool so let me know your thoughts we don't have to close out the stream just yet i want to know what you guys have to say and what you think before we tear out of here we got according to youtube it says we got seven new members which brings our total to 13 or 12 yeah 12 13 12 something like that okay thank you so much taylor thank you very much for your help and thank you guys for joining as members it just means the world to me it's really really incredible and i wasn't even sure i've had access to the youtube memberships for like six months now but i never turned them on because i didn't think that people would be interested in it but they absolutely are taylor says might just move away from wordpress and to webflow no probably not thank you everybody luke hope you sleep good i know it's super late for you so thank you for hanging out max and jason thank you guys good to see you everybody and um i'm sure we will see everybody in a future stream i'm thinking about doing something on friday so make sure you guys stick around for that and uh it's gonna be not a not a build stream or anything like that it'll be different so let's see let's see what happens anyway thank you guys again i'm gonna end the stream here bye bye for now

Channel: Permaslug

Views: 2,440

Keywords: metabox, metabox vs acf, metabox oxygen builder

Id: Wd9fsJSny_o

Length: 163min 24sec (9804 seconds)

Published: Tue Sep 07 2021