Author can choose the layout for a post from a radio button list. Oxygen template selector hidden.

in this video we can have a look to see how the person creating the post the editor for example can choose the layout that they would like for the post so to show how that works here we have the post we have this layout for the post now we'll head over to edit post and the editor or the author can simply select layout 2 over here and we'll update that and then when we have a look at the post on the front end just let that update right with that updated now when we view the same post on the front end you'll see that it has a completely different layout essentially the same post with a different layout so you could build two or three or four different layouts for your clients and or the editors and they can then choose the layout that best suits the post that they're going to publish without having to access the oxygen metabox so to show you how that would work is if we're going to edit the post and you'll see here that there is no oxygen metabox available on the page in order for the person to choose a template so by doing it this way it's not possible for them to choose a template that's not relevant for the post that they're creating and to see how this works inside the oxygen editor we have the layout so i've used one template and in that template i've created the two different post layouts and what i've done is put each one in a section and i've said for the first section let's add a condition and that condition says and you'll see in the description there that it's looking for an acf custom field and the custom field is called template name so i've said that if that custom field is equal to layout 1 then it displays the first layout and in the second one if this layout is equal to layout number two then display the content in the second layout and if we go then and have a look at the custom post field you'll see that i have a field group here called template choice i have a field called template name it's a radio button for choice so you can't choose more than one template and i simply have layout one layout two and i've selected that the return value is just the value on its own and i've set the layout for the options to be horizontal so they display next to each other so i then change the priority of this and in i say make it a the position make the position high after title and that's why it appears just below the content doesn't appear below the title with the new gutenberg layout however it does appear directly below the content so the person is able to create the post and then select the layout and that's pretty much how you would be able to give the author or the editor the choice as to what layout they would like to use for their post so what we're going to do now is we're going to create a third layout just to show you how this all fits together so to do that i'm going to head over to oxygen i have these two sections so what i'm going to do is add another section and then immediately i'm going to add a condition and we're going to set the condition and what we're going to do here now is we're going to go to dynamic data equal to advanced custom field template name and we're going to put that down to layout underscore three and we'll close that and we'll save that and just to make sure that we have that option available we head over to our custom field group template choice and in the choice i'm going to add layout underscore 3 and layout right so there we have the choice in the list that will appear in the post for the client that's busy making the post and now we're going to add the post element so first thing that i do advanced size and spacing is we make this a full width and we set the padding to zero so now we have a section that stretches from side to side of the page and what i'm going to do now is add a div and in this case what i'll do is i'll just centralize the post information in the center so what i'm going to do is i'm going to set the size and spacing of this particular div to let's make it 1000 the maximum width to 1100 pixels and then what i'm going to do is i'm going to set the left margin and the right margin to auto and that will then central centralize the div but because i've added no content it still displays the way that it does what we're also going to do is and just to make it easier i'm just going to view this post on the front end okay so what we're going to do then is we are now going to add two columns so we'll go to columns we'll add the two columns and what i'm going to do now is insert an image in the left hand side so i've selected the left hand column and i'm going to add the image so there's the image and we're going to set the data there to featured image and the size to large so we've inserted the image and on the right hand side we're going to add a heading and in that heading we'll select the heading and we'll insert the data and in that data we'll do the post title we'll insert that and what we'll do is we'll change the font size to 50 and then i'm going to change the font weight to 500 and what we'll also do then is to align the items so we'll select the div and we'll set that to the center and for the purposes of this demo we'll set that to the sent as well and then i'm going to add some more text and this text over here insert the data and we're going to make that the date and what i'm going to do is i'm going to make the format day month and yeah and we'll insert that so now we have the day the month the year um on the right hand side and now we need to add the post content so the two columns here the one two so we're going to add another div below the columns so i'm going to head over there i'm going to add the div right and this div i'm going to make slightly narrower so i'm going to go size and spacing and i'm going to make the max width here 800 pixels and we'll make the left hand side auto the right hand side auto and that ensures that we have the content centered in the middle and then what i'm going to do is add some text and then we'll just double click that text and i'm going to insert the data and it'll be the post content there's another way of adding the post content the other way of doing that would be to add head over to wordpress and under dynamic data could also just select content and that would also add the content so we'll do it the wordpress way here so there we have our new layer for our post and what i am going to do in columns is just to make sure that it stretches all the way i'm just going to set that to it's already set to 100 percent so there we have our post and this is now with the selection number three so we'll save that now when i head over to edit the post i'm going to select layout 3 update and now when we head over to the post on the front end let's just refresh that now we're not seeing anything just hit back all right so we're editing the post i'm just going to refresh that so this could happen while you're doing if it happened to me you might have the same thing happen to you so i'm just gonna go back to layout number two we're gonna update that and then what we're gonna do once that's updated we'll just go and view that post and you'll see that we have layout number two and then just to be sure that this is in fact layout number three so we'll just check our condition and we've said template name equal to layout 3 and to make sure that in our selection we have layout three should be a space in there right so we definitely have it correct it is working we're going to choose that may well have been the issue you'll see how this is displaying here so we're just refreshing that page oh there we go so it was the setting in advance custom fields i'm going to update that with that updated we'll view the post and now you'll see that layout number three has been has not been applied let's just go back let's save that and then refresh right there we go so just one or two little things that needed to be updated there so there we have layout number three we have edit post and i'm going to change that back to layout two and that updated so there you can see how the author or the editor can choose the template that they would like to use and based on their selection the layout on the front end changes and they don't need access to the oxygen metabox where they might choose a layout that is not appropriate for the work that they're busy with so i'd like to thank you for [Music] watching the video and i hope that you found that useful thank you for watching

Channel: Bruce Young

Views: 171

Keywords: oxygen builder, post layout, post template, post layout selector

Id: yX_7qWZoZkU

Length: 12min 32sec (752 seconds)

Published: Mon Nov 29 2021