Detailed video showing Front end form submissions to create posts with ACF and Oxygen. No coding.

in this video we're going to create a complete project using custom post type advanced custom fields front in form submissions and then how to moderate those front-end form submissions and decide what goes live and what doesn't so to get started the first thing that we'll do we've already added advanced custom fields we'll be using oxygen as the templating system the theme system and we're going to load the custom post type ui so head over to wordpress and here we have custom post type ui and that's just a very easy way to create custom post types reactivate custom post type ui is now enabled and what we're going to do is we're going to add a post type and to make this really easy we're going to call this the custom post and here it'll be custom posts and the singular label custom post this can be anything you want and then we scroll down we will bypass the initial options and then when you get to the setting it's important if you want to have a an archive for example to make sure that all the settings here are correct so that you do have an archive view which is the grid view that you would have in the front end of the website so what we can do here is have a look at these options we wanted publicly queryable show the user interface yes showing the nav menus yes delete with the user no showing rest api we're not going to look at api but you can and then here we have as archive and it's important here to set that to true and then we have the slug to use for the archive url so what we're going to do is make that url custom posts and that's for the archive so that would be the grid view where you see all the custom posts and we'll call them custom posts so with that in place exclude from search no we want it included in the search so false is good capability type it's going to be a post hierarchical whether or not the post type can have hierarchical relationships we can make that true rewrite is true the custom rewrite slug so here we can go make that custom post again and then everything else we'll leave and then here we have support so we'll support the title editor the featured image that's that's fine and we'll also support the author and that's all that we need to do now and we'll say add post type now what we're going to do is create the taxonomies for that post type the categories so here we'll go custom categories and the plural label let's go custom [Music] categories singular layer all custom custom category and now what we can do is we can link that to custom posts and once again we scroll down we will ignore the additional labels as we did with the custom post type and we head down to settings and here once again some settings to look at so public publicly querable yes and hierarchical yes true so we can have categories that are subcategories of categories and then we have the um the custom query string and the rewrite slack so let's head to the top and we'll call that custom categories then so let's have a look custom categories we can allow that true and yes we'd like it to show in quick bulk edit panel and we don't have a default term and we'll add the taxonomy so now what we have is we've added the taxonomy so if i go over to edit taxonomies you'll see that it's linked to custom posts and if i go to my custom post my custom post and i'll scroll all the way to the bottom i can now link custom categories to that custom post type i can save that and now on the left hand side i have custom posts add custom post add new and then i have custom categories so i'm all set to create my my posts if we head over to that section quickly you'll see that we have add new and you'll see here we can select the author and everything else is pretty standard in a previous uh tutorial we had some custom fields which we will now go and address but yeah so the basic art is there and when we look at custom categories let's leave you'll see that we can also add a new custom category and we can also select the parent so there we have the the basis for our project in place and now what we can do is go and have a look at our custom fields and add a field group so we'll head over into custom fields and what we're going to do is let's just edit this existing custom post and we don't want it equal to all so this one will only be equal to the standard wordpress post so that will interfere with our project and now we're going to add a new field group we'll call this custom posts fields and then we'll say that the post type is equal to custom post so now we are assigning this custom field group to our custom post and we'll publish and now we can add our field so inside there because we're going to be linking the title and the content and the featured image to a front-end form what we're going to do is we're going to start adding our custom fields and we'll go custom title then we'll have custom content and that we're going to make a yc wig editor and we're going to have an image custom image we're going to make that an image file and what we're also going to do is we're going to scroll down and we're going to make sure that we've also activated featured thumbnail so that will ensure that our featured image is the featured image of the post and we'll update that right so that's our basic um the basic parameters for creating the post now we can link the taxonomy so we can go custom taxonomy and then here we're going to link that through down to relational and the relationship is taxonomy and we'll scroll down and we'll say the taxonomy is going to be custom category which is linked to our custom post the appearance will be a check box that's great can we create terms yes um connect selected terms to the post that would mean that that term is only available to that post so no and then load values from post terms we can say yes and then return value will leave a term id and we can set that as bi-directional or not right so let's save that for now so there we have our field group and then what we want to do is because we can link more than one field group to our um to our project so these are custom post fields just the post values but what we'll also add then just to demonstrate a separate custom field group is we'll go custom posts and we'll call that custom parameters and we'll say that that must also only appear when it is a custom post so now we we're setting up two sets of um field groups to operate with the same post type now we're going to add a field and what we'll do is we'll call this text let's call it custom text value so that'll be a text value and let's add another one and say custom url value and let's allow somebody then to enter a website so we have a look here through our choice of options until we find a url so that's going down a bit far there it is right at the top so let's make that a url and then let's call it custom speed and let's make that a number and let's go with custom size and let's make that a select and let's make it a checkbox and here we'll say for choices we'll have small medium large allow custom values to be added so let's do that and then what we're going to do is we can save the custom values to the fields choices which means it will also then be added here and then we can leave the layout as vertical and we'll just return the label well let's leave it at the default for now right so we've got a custom speed a custom size let's add a repeater so custom repeater and there we've set up the repeater and now we can fill in the field so let's go repeater text and we'll make that a text field and we'll add another one which will be repeated date so in each of these there will be a date and they will have a look at a date picker so we'll scroll down to date picker and then let's add another field which would be repeater number and let's make that a number right so that will be our repeater will then be the repeated text the repeater date and the repeater number and let's head up to the top and let's update that so there we have the two sets of custom fields and now when we go and have a look at our custom post and we add a new post when we scroll down you'll see that we have the custom posts custom parameters and then here we have the custom post fields which was the custom title the custom content the custom image and the custom taxonomy so that's what we have at the moment and if we want to swap these two around so that we have the post fields at the top what we can do is go back to our field groups and we can head over to custom post fields scroll down order number so let's make that a one let's go to the second field group and let's give that a order number of two so there we have that i'll close that and then let's go and have a look at our post let's add not post custom posts add new and now you'll see that we have the custom post fields at the top and then the custom post parameters fall in beneath that so that will then be where we start and then on the right hand side you'll see that we have our custom categories featured image and the author field so let's just um straight off the bat create some content here so let's say first custom post and you'll see at the moment that when we enter the values that there's nothing marrying connecting the values to each other because we haven't set up the forms and the and connected the forms uh to do that so let's create that first and then we'll create our first post and in order to do that we have installed a plugin which is called advanced custom fields extended and it's the extended option that gives us the ability to create front-end forms really easily so we'll head over to forms and what we're going to do now is add a new form and this form we will call it custom post submission so that'll be our form and you'll see that as i type and i put in a space it will put in a dash so let's make that the same name so custom post submission and now we can select our custom post fields and you'll see here that we are selecting both field groups to include in the same form that we're going to create and then here we select what the action is and in this case the custom action is going to be the post action because we are going to create a post so with that in place what we'll do is we'll publish first and this will ensure that the custom fields appear on the load page as well as on the save page so because we're not loading a post we're creating the post the first thing that we're going to do then is create the post and then save it so let's include all these fields when we load up the page and what we'll do now is the post type is not going to be post but it will be custom post the post status when we create will be in draft the post title we will link to the custom title the post log we won't we'll leave that as default the custom content we will link to post content the post author will be the um let's link that to the current user there at the moment we're not going to have a post parent and in the post terms we will link that to custom taxonomy so now we've linked the basic post options to the form that's going to be used to create the post we'll update that then we can do a couple of things so once the user creates the post and submits the post that will be a submission and what happens when there is a submission so let's hide the form on a successful submission and let's say thank you for submitting the new post that'll just let the user know that the post has been submitted and there's nothing else that we're going to look at doing here but there are some custom hooks that you can hook into on the submission of the form but we're not going to look at those at the moment we'll hit update so now in fact our form is ready to go and we have some short codes here that we can use to to implement if we have a look at validation we're not going to look at any validations at the moment there's no html and then when it comes to settings this is where we can perhaps add some our own class to wrap the fields to wrap the form we're not going to look at any of those the submit value let's say submit custom post so we know that that is taking effect and it will include the honeypot which is just there to help make sure that it's human submitted and this is to sanitize the the post information so to make sure that nobody's inserting some malicious code and the field element will wrap in a div when it comes to uploader for input we're not going to be using that but yeah you could set the media modal or basic then we have the label placement which we'll leave at the top and instruction placement we will leave with label so that will then just be below the label or below the fields and we'll leave it at below the label and with that in place we can select update and now we're ready to create a new post but while we're busy here with the forms let's create a new a new form before we do that let's add another action and that's going to be an email action and what we want to do then is email the post author uh the admin to say that a post has been submitted so whatever we put in here is what's going to be sent to the admin of the website so to have a look at the different options so here we have from to reply to cc bccc subject and the content and inside the content you can include some values or you can simply use fields and all fields will be included so let's say information submitted and we'll just put in the field so that all that information comes through let's update that there's no attachment and then of course there is some code here so in that code you can see you can do a couple of other things you can create your own if you want to you can create a function hook into what happens um for example the custom post submission and then you can create your own form uh your own email inside that using that function and and a custom action when the email is sent and then of course we also have a cheat sheet here and from the cheat sheet you can get the reference to the information that you might want to include for just about anything from this repository of code so you don't have to go looking anywhere it's all here for you and for example it's current author we have current user we have current term current post query whatever you're going to need will then be on this cheat sheet related to creating the post i'm not going to look at any of that right now so what we have is we've set up a very basic create the post and submit an email to let somebody know that there is a new post let's update that and then what we're going to do now is add another form and this is going to be the custom post edit so it's the custom post edit form and once again the field groups will be the same as before so if you wanted to you could have a just include one set of custom fields and not all the custom fields and here we're going to say there's a post action and it's going to be update post and [Music] let's say then we'll say publish and that's going to link the custom fields to the form we'll head over to load now when we load we do want to load some value so we want to load all the custom fields and what we're also going to do now is the source is going to be um the current post so that's the post that's open on the page then we're going to look at the post type and the custom post type we will leave blank because it's not listed in our list of options it'll then accept the default which is custom post but for example you might include an option where you could change the post type to a product then you quite easily take a normal post submission and give it the option to becoming a product which you might then use in a woocommerce shop so you could literally take a post submit to change the post type and it could then literally become a product in a shop then we have the post status so now when we load the post we'll leave it at default so it pulls in the default status of the post the post title we know is custom title the slug will leave as the default the post content we know that is going to be custom content the post author we know that's going to be the user which is already set so we'll leave that a default we won't be setting a post parent and then post terms we know is the custom taxonomy field and the rest of the fields are then just part of the post so we load with those values let's update that and then we have a look at saving and what you're going to notice now is that those values that we selected on load are now not editable here so that's going to ensure that the content pulls through as as it is when it loads so it pulls through then uh when we save so you can't change that um between loading and saving and the rest we're going to just make sure if you don't load the fields then they're not going to be saved and if you similarly if you don't include them on the load screen they aren't loaded with the form so by doing that they're loaded let's update that and once again on submission we can say hide the form and we can say thank you for updating right so let's update that right so now we've created our submission form and we've created the edit form for the posts now what we need to do is just check if there's anything here and we do want to change the value on the button to update post and the rest we're going to leave the same and we update so now we've established the two forms now what we need to do is make that happen on the front end of the website in order to do that we need to make sure that we have the either the this short code or this short code or this um php code so what we're going to do is we're going to go with this short code because we know that the id of the create the post is 90 and to edit is 91. so with that in place what we're going to do now is head over to our template which is in oxygen and we're now going to create the template for the custom post and then include the fields in the submission form and then we're going to create the post layout so the first thing that we're going to do is create a template now we have an option here as to how we're going to do this so we can either add the shortcode to a page here and include it in the content of the page so that then doesn't use a oxygen template but if we use the oxygen template we can then apply conditions so that the form then is only visible to somebody who for example is an editor on the website so better for us then to create the content in oxygen we do have a standard page template set up so that means we can head over to pages and what we can do now is create a new page and let's call that create custom post and let's publish that and then what we're going to do is once that's saved we'll be able to edit that with oxygen so let's give that a second right the post has now been saved and let's go and edit that with oxygen so oxygen loading with oxygen loaded let's add a section and inside the section let's add that shortcode so i'm going to do it by going with add and i'm going to do header to wordpress shortcode wrapper and inside the wrapper i'm going to add the shortcode i'm going to head back to that wrapper and then i'm going to change the percentage to 100 and i'm also going to change the width of the shortcode to 100 just to make sure that it uses the entire width of the content area for the form and then inside the shortcode we'll paste in the shortcode there you can see it's coming up with the forms but i'm going to make sure that it's on 90 because that was to create the post so that doesn't look very good at the moment but that's really because we're inside oxygen and it hasn't rendered it as it should and just to make sure that we know that we're in the right place on the form we're going to in that section add a title and that title will move to the top and we will make that create a new post and make that a little bit smaller and we can center that and let's just make sure that for our form that everything is left aligned right so there we have our form set up on the page and we can hit save and now just to have a look at that on the front end we'll see that on that page we have create new post the title the content we can add an image categories we can click on the plus we can add a new category and then we had our custom fields so a custom text value a website address a number and then we had custom sizes with the option to add a new choice and then we also had the custom repeater can add row and then fill in those fields so there we have everything that we wanted to do on the field but what we want to make do now is make sure that the form is not visible to everybody so if somebody does stumble across this page we don't want them to see that form so one way that we can do that is we can simply select this entire section and we can either put a condition on that so you have to be the uh of a certain user or a certain user role or we can say that if you're not logged in you'll see a message and if you are logged in you'll see the form so what we'll do is we'll say that if you're on the if you've selected the shortcode wrapper then we'll set the condition and we'll say that the user role must be equal to an author and what we can also do is set the condition and say set the user role is equal to a editor and we can even say user role is equal to administrator which it would show anyway and then we can go back to conditions and say all so either one of those need to be true and then this will show and what we're going to do now is we'll save that and then we're going to add a div into that section and what we're going to do is set that width to 100 and then we're going to add some text and we'll say you need to be and and author to submit a post and what we'll do now is in that div we will center the information we've set it to 100 percent we'll go size and spacing we'll make that 20 and then we'll give it a background color and then we'll just change the color of the text in that div to um typography let's make the color white and we'll change the font size to 30 so it'll just say you need to be in order to submit the post and you could link that to another button or a form that said submit here to become a author and that then would generate a new user so that is something we can add at a later stage but for now we're just going to focus on the top section here and just to make that a little bit nicer what we'll do is we'll just give that some space and then we'll create some space below that and the condition here on this message is that if we'll just say add the first condition and let's say let's say user logged in is equal to false then let's show that message so if i'm not logged in i will see that and if i meet the parameters logged in i will see the form and let's save that so now when i head over to the front end and i refresh let's reload and i scroll down i don't see that message as i'm logged in so if i wanted to see that as somebody who wasn't logged in what i'm going to do now is just open that in a different browser so here i have and using a different browser you'll see that you need to be an author to submit a post so that's working and when i am logged in i can create a new post so there we go that's how simple that was now what we can do is have a look at actually submitting a post so let's see how that would work so let's call this the first custom post and then make that the custom content i'm gonna add an image scroll down then there's no custom taxonomy so i will say first custom let's say category uh it doesn't have a parent that's the first one so you'll see that it's been added i can add another one but let's move on custom text value so let's say custom text value one then we're going to look at a url value so let's make that um google.com custom speed is 100 custom size is large let's add the repeater so the repeater text is repeater text one the repeat date is the date and the repeater number is number one and then i'm going to add another one and let's call this repeater text two let's give it a different date and let's go in the past and let's make that number 200 and now we're going to submit the custom post and immediately you'll see that the validation occurs on the url and so here we can go and enter the url value and you'll see even as that it won't accept it and you have to go and now when we submit the post thank you for submitting the new post and that is what we wanted to happen and now when i go and look in the back end of the website and i go and i have a look at that at my custom posts there we have our first custom post it is a draft it's picked me up as the author and you'll see that the content matches it's pulled it through we have our category on the right hand side there's our featured image and if i scroll down featured image first custom category and then here are the custom fields that are completed so as you can see now we don't need to repeat this information we already have it here so no point in in that and this so in order to to have that go away we'll head back to our custom post type ui we'll edit custom post types and then i'm just going to do away with here i'm going to say editor leave but i don't need that i don't need that oh i don't need that but i'll leave the author and i'll say update and now when i go back to my custom post and i edit you'll see now that i just have the custom fields that i'm using and on the right hand side i just have the author so very nice on this page i can also add a new custom category so i could say second custom category so i can also do it from here and of course i could have added a hierarchy as well so i'm just going to leave it at that so the same taxonomy could apply for tags or categories or um if there's anything else that you want to add there so there we have our first post created so once we happy with our edit we'll save that as a draft still so now what we need to do is have a look to see how we would edit this post and remember now that we would like to edit the post on the actual post page so that would allow us to read the post first and then below the post see the information that is in the post so in order to do that we need to adjust our template for the post so we'll head back down to oxygen and what we're going to do now is we're going to create a new template for our custom posts so here we have the standard blog post but we're going to add a new title and we're going to call it custom post single and edit and then we're going to inherit the main which is the header and the foot of the page and here we're going to say singular and then we're going to look here for custom posts as this is for custom posts and there's nothing else to set and we will publish right it is warning us that there's another builder open so let's head out of the builder there in fact maybe easier if we just make sure the left tab is always for oxygen and we can go to edit with oxygen and here we'll return to custom posts and right oxygen is loaded so now we can start loading some information so let's add a section and we're going to add two sections the first one will be for the post and the second one is going to be for the form for the editing of the post so let's quickly head over to our custom fields and forms and you'll see here that this is custom post submissions with an email and in this little icon is to update post and i can grab the short code here instead of the number so as it's already available i'm gonna grab that one head back to our section here we're going to add a heading and we're going to call this edit post and then we're going to add the shortcode wrapper from wordpress and straight away i can set that to 100 width and then i'm going to add the shortcode and then what i'm going to do is also set the size of that to the width of 100 and we'll just head back to the short code wrapper which i can do by clicking in the breadcrumb and i'm going to give that a 15 pixel all-round and what i'm also going to do is i'm going to give that a background and we'll make that background color that lightish blue and then we'll head over to the short code and the shortcode we're also going to give a 15 pixel padding and then what we're going to do is we're going to give this a background of white so advanced background right so that will fit inside and then what we'll also do is just give the border a radius of 5. right so there we have our form that will appear at the bottom of the post and of course we want to set the condition because we don't want everybody to have access here so let's set that center our heading and what we can do this time is we can head to the short code wrapper and we can align to the left now what we can do is we can set the condition here and say that the editing form is only visible if the user role is equal to the author the user role is equal to the editor or the user role is equal to the administrator and what we'll do is we'll set that to or and we'll save so now the editing form will only be visible to somebody authorized to use it then we can go and have a look at our post so what we're going to do there is we're going to add a title and that heading that we're going to add here will be the post title so we can either do it this way and insert data and choose post title or what we could also have done is gone over to wordpress headed over to dynamic data and this might be a little bit easier because i can just go title and then i can add the next item which will be content or featured image and then i can add content and i can add author and then i can also add a custom field so that is one way of adding it so let's save that for now and let's see if we can there are no items to preview and that's because we haven't specified that this template is for custom posts so there won't be a preview so if we want to put up a post to preview let's save this and then let's head back to admin and now what we want to do is under the singular if um [Music] and the reason there's no post to preview of course is not because of any setting but because we don't have anything published so if we'd like to see a demo view coming through let's head over to our custom posts and then let's change the status just for the editing purposes from draft to published update and now when we refresh refresh oxygen you will see that the custom post is pulling through right so here we have the first custom post and then we have the edit post below so everything is looking fine so what we can do now just do some formatting let's make that central this is the author we leave the author at the bottom and this was the content this is the featured image so what we can do now is let's have a look at our structure so as you can see on the right hand side we can't see what that is based on the writing so let's rename this for example and we can call this post content so we know that's the content let's rename so we know that's the post author right the heading we know and the image we know right so now what we need to do is add some of these other fields into our post layout so we can either do that by bringing in the advanced custom field php values or what we can do is use oxygen to bring in those values so we have the content we have the author but before the author we would like to add a custom field so let's just add a div let's me post author below the div and then what we can do is insert some text double click that text and then we go to insert data at the top and this is where we will access our custom field data we go to advanced custom fields and here you can see all the custom fields now you'll remember that we put custom text value custom url value custom speed custom size custom title so the reason we put the word custom in front is just so that all our custom fields will be grouped together and here we can see all our values so the first thing that we can do then of course is the custom text value so you remember we had the custom text value and what's nice nice that i can just scroll down and see what the different values are so custom and then let's do the custom url value so custom url value after the custom url value let's do the custom speed right so there we have the first group and then we have custom size so let's add the custom size right and then we have the custom repeater so now the repeater works a little bit differently so before we get to the repeater what we're going to do now is we're going to wrap each of these text items in a div let's just get that menu going here seems to be a small delay and then we wrap the last item in a div as well if that's not working the other way to do it of course is to just add a div and drop the text inside that div right so we have that information now and what we can do now is set a title so we know that the first text that we had was called um custom text value so what we what what's nice now is that the form pulls through the value title that we used in the custom field group so what i'm going to do now is i'm going to insert the title so i know it's custom text value so um we can add the text and i can say the custom text value now what i can say is i don't want this information though to be visible if it doesn't meet if there's no value for custom text value one so in order to make that happen i can go over to my conditions and i can set the condition and i can say if that custom field so we go custom data advanced custom field and we know it's custom text value and i can say is not blank or contains a value and then display the information and save we'll now do that for the other values so once again we head over to the div and we're going to add some text and that's website address for now we'll just use it like that and what we're going to do now is once again add the condition so we choose the condition the condition we choose is dynamic data advanced custom fields we say we know that that one was custom url value and we say is not blank and close that we'll do the same for the next one which was custom speed move the text above and also set the condition so once again dynamic data advanced custom fields custom speed and we say is not blank once again we could if it's a number we could make the condition based on a number and then here we have size so we'll add some text make that size and set that condition dynamic data custom fields and this one was size so custom size and once again is not blank so very quickly we've set up so none of these will show unless they have a value the other thing that we'd like to do is just do some formatting here to make it easier what we're going to do though is we're just going to add a class so let's set a class here and just call it custom values we'll add the class and then what we'll do it will just give that spacing and for now we'll make the width 100 so it fits that 100 percent and then we'll head over and one way is to just type in the first letter and it'll bring up all the classes with a c so very quick and there we've copied that class those settings to all of those items and then this div we will set to a width of 100. so there we have the custom values and we've very quickly inserted them into our post here we have our custom content what we'd also like to do is that a width of a hundred percent two and what we would like to do is just give it some space below right so there we have these custom posts and just to make it easier to see what we'll do is we'll give these custom posts a background color so let's do it um [Music] that light is blue again and here we have the author so what i'm going to do now for the author i'm going to do something different so i know it's the post author and i'm going to wrap that with a div right and then i'm going to add an icon and the icon let's do a user icon and what we'll do is we'll stack elements horizontally we'll make sure that they're aligned like that and then i'm just going to swap that around and the icon i'll make it a little bit smaller and then what i'm going to do is set that div to a hundred percent and make sure everything is aligned to the left and then if i go up to the previous div i can just set some size and spacing so that that is that has a little bit of space what we need to do though is in terms of fields available is we still need to add the repeater field and that's what we're going to do now so we'll start with that div and i'm going to add a new div to the section and i'm going to move the user down to the bottom right so there's my div and let's set that to 100 and let's just put some space at the bottom and let's just give it some spacing okay so there we have our div and now what i'm going to do is go to my helpers and i'm going to say repeater so i want to repeat and here's my query and we just say use advanced custom fields repeater and the repeater of course is repeater test we apply the query parameters and here we have our query so the first one that i'm going to do now is going to be if we if we remember correctly we scroll down you'll see we've got repeated text repeater date and repeater number so let's start off with the repeated text and what i'll do just to get started is i'm going to go to basics columns and let's see if we can put in a three columns there we go and inside the first column we're going to look for that repeater text date then number so add some text and repeater field so you'll see it's different and i can go repeated text then i'm going to add my text and then it's the repeater select field which was the we didn't have a this is not the repeater fields for this post these are the fields for a different post okay so let's just start that again so not to get confused and then we'll go to insert data advanced custom fields and then in here we'll look for our repeater fields so now we're going to get that repeater text we go to insert data and you'll see that we have here is a repeater field and you'll see that there is the repeated date we'll head over to the next column and we'll add some text let's just add that again all right something strange going on so let's just start that again so we go to the first div and we'll add some text and we'll assign the repeater value there of the repeater text then we'll move over to the next div add some text and we'll go to the next repeater value which was the repeater date and then we'll head over to the last div we'll add some text insert data head over to the repeater field and that will be the repeater number so now we have the text the date and the number and once again what we can do for that whole section that whole div is make sure that there is a value for the repeater so let's see how we can make that work dynamic data and let's just see if there is a way to select the repeater field okay there's no way to select one of the repeater fields so there needs to be a different way to make this work right i'll have to come back to that all right so there we have our content in our in that repeater element in the meantime that is working and what we can do now is inside the columns is maybe we'll just move those items to the center of each column and what we're also going to do then is put in the titles but we don't want to put the titles in inside the repeater so we'll go outside of the repeater and we'll say three columns we'll move that up and then we can we'll add a heading and we'll call this repeater text font size we'll just make that 16. well let's make that 20 and font weights of 500. right so we've got repeated text let's put the repeater date and then we'll duplicate and make that the repeater number and then we'll also centralize so there we have the three columns with the information and if we scroll down there you can see we have that information and the information is showing in the table we'll save that and now we'll head over and have a look at our post on the front end so we'll click on view so if you click on view and you see your post isn't applied don't get a fright what we need to do then is just adjust the priority of that template so this is the default template pulling through default values what we want to do is make sure that our custom template applies so we'll head back to templates and then on the custom post single and edit template that we just created we just up that priority to anything above zero we'll make it five for argument's sake update head back to our post refresh and there you see we have our layout we have as per what we created and what i'm going to do is just add the taxonomy in there under the title so edit with oxygen quickly so here we are and we're just going to add under that we're going to add categories so the first thing that we'll try we'll go to dynamic data we'll say categories and you'll see it pulls in the default wordpress category so that's not going to work for us so then we say add and we'll go to basics and we'll say text let's move that up to below the heading select the text insert data and we'll go to now better just to go to maybe custom categories and we can insert a separator i like to do a space insert in our case there was only one category and what we'll also then do below that is we'll add in some space we'll save and you'll see now that you can actually click on that so if we refresh you'll see that the taxonomy term is already pre-linked and there is a form at the bottom so if we were to update this post so let me add another category and update post let's see what happens category immediately appears and if i scroll down thank you for updating so the form is working as it should now what we need to do is start looking at the archive so if i click on an archive view here it goes to the default view which is not what we want we need to create our own archive for our custom post type so let's head back to oxygen let's head back to the admin and then let's create a new template now for the archive so we'll call this a new template custom post archive so that'll be the archive we'll inherit the main and now we go to the archive setting here and we say under taxonomies we will say for custom tech all custom [Music] categories and under post type we're going to say custom post right with that saved and we already know that the priority of our template should be at least one so we'll just set it for five and we'll publish then we'll head over to edit with oxygen and to make this work we're going to use the repeater so we'll use the section and we'll use the structure so now we can see what we have we'll head over to the helper and we're going to go with the repeater so we can create our own structure under the query then it won't be we can say default because we've already selected that this is for custom posts so it will automatically pull that information through and under repeater now we have the div and inside that div we can create our post so what we'll do is we'll create a div and we'll set that div width to 33.33 right and we're also now going to say stack elements horizontally and on our multi-line which means that after the third post it will come back to the beginning and let's get started so here we're going to add let's add the title so that'll be the div and inside that div we're going to add the title make that an h2 tag and don't worry about the additional layout that you see here you can ignore that and what we'll also do now is look and that we're going to set that to have the featured image as a background image so we'll head over to background and we'll go to data advanced custom field and we'll go to custom image we'll just make that large insert and then we'll say it should cover and no repeat and then we'll move that to the top and we'll set the width of that div to a hundred percent so it fills that space and now what we'll do is we can also set the height of that div so inside the size and spacing we'll give it a 200 let's make that 150 150 and we'll also then center the image so head back to background and here where we have left to right we can set that to 50 and that'll make it 50 percent and if we want to make the height 50 percent um center it in the center of the image make that a 50 as well so now that image is centralized then we can go back down to the heading and that's a little bit big so let's make that 18. and let's give it a font weight of 500. what we'd also like to do is let's center everything in in that teaser and what i can do now is i can go in and change the typography of that heading and give it a line out of one point 1.2 and i think what i'm going to do is wrap that in a div and i'm going to give that div 10 pixel padding around and the heading maybe i'll make that a little bit bigger so with that in place now i can just duplicate that div and i can put any custom field value here so if i wanted to i can select my text insert data go to my advanced custom field and i could put in the custom text value for example and then i could duplicate that and maybe i want to and i could also do the custom speed as an example custom speed and what i'll also include then just below the heading so that was the heading i'm going to duplicate and what i'll do is i'm going to insert the data and this time i'm going to go for the custom taxonomy and once again asking for a separator and um let's not do the term ideal term url let's do it this way around and go to custom categories and insert so now the categories will appear and what's really interesting about the um about what we're doing here is that we can get a bit more creative so the reason for wrapping everything in a div and for using a div here for the image is for example what i might want to do is for example i could bring up the um i could do it with the taxonomy i could do it with the title so i could actually bring the taxonomy or in this case let's use a custom value so i could take custom value 1 and i could position that i'd like to move that into the div here right so i've positioned that there and what i'd like to do now is maybe position this value like we have there but um not in the center maybe i want to put it here um towards the bottom so in order to do that i'm going to make this a absolute position and i'm going to set the bottom to zero and i'm going to set the right to zero and when i do that you see that the content disappears and to bring it back to this div because it's a nested div inside this div i go to the div that i'd like it to be nested in and i go to the layout of that div and i change that position to relative and now you see that my content is back in the position that i want it to be now the the div has a padding of 150 and 150 but that is irrelevant because my content is now going to be positioned in this corner so with that in mind i can now head over to that div and what i'm going to do is change the background color so i'm going to make it a bit of a red and then i'm going to change the text color and i'm going to make that white i've made that a solid color i can give it a gradient i mean a transparency and then what i will do as well is go to the borders give it a rounded border and then i don't really want to to be sitting right on the edge so i've already given it let me give it a 15 pixel some padding and i don't really want it sitting on the edge edge i'd like it to be off the edge so in order to do that i head back to the layout and instead of having it 0 and 0 i can make that 10 and i'll make the bottom 10 and now if i put left 10 you'll see that it'll stretch it all the way across and i can then center that value inside the div so that's how i can get that value to position itself anywhere inside that div similarly if i wanted to position it in the top right hand corner i would then remove the bottom i changed the 10 to the top and i can have it in the top and if i take the left away it will then just be the content with the padding around and that will be the science so maybe what we'll do is we'll leave it like that in the top right hand corner and remember now that because this is in that position i can use i can add any custom field to that value so the nice thing now is that i can make a custom layout for my custom field my custom post type but with the information that i would like to see in in that space so it could be so for example here we've put this number we have that custom value but any custom value can be pulled in there we for example have the category values so let's remove the category values and let's just stick then with the the title that was the custom number and let's save that and let's just have a look at that on the front end so now if i say first custom category you'll see that it pulls in as i've created it but you'll notice that i can't click on anything to do anything so what i need to do now is make this clickable so we head back to our um layout and now we can add a link so i i can make the whole area clickable if it's all going to click through to the same place so i would then go up here to link settings let's close that and i'm going to go to data and we'll make that permalink so that's the permalink for this post and save and now you'll see that some of the formatting has changed because now everything is a link so to just correct that i can head back now and just give a color to the various items so typography and we change the color then so now it's just a normal color i can then save head back to my archive refresh the page and now if i click anywhere here i'll be redirected back to the post let's go to the second custom category and you'll see the same applies what we'd like to do now of course is put in a title for the category that we're in so let's um in fact what we'll do is we'll add a section and then we'll put the title in a separate section add the title and insert the data and now we're going to go instead of going to the post section we just scroll down here to the archive and we say archive title and let's enter that let's give it slightly less padding just so we can get more on the page which means we can come down here and change the padding for the archive section too and let's save that now you'll you'll see that the word archives now appears in front of the archive and that's not something that we really want so if i go to first custom category it it's just not working having it look like that and it won't be working in the second custom category either so before i go and remove that i'm just going to give this font weight of 500 and the font size i'm just going to drop that down to 40. and now what we're going to do is show you how you can get rid of that wording archive so in order to do that we're going to head back to the back end and now we need to add some a custom function so to do that we head over to plugins and because oxygen works the way that it does we're going to add the plugins snippet so let's go snippets and we install that then we activate now that it's activated you'll see on the left hand side we have a new section called snippets and then there's some examples that are included we're going to add a new snippet here and we're going to say remove um archive uh prefix and we're gonna put in our code there and what i do is i have a program that i use called mass code where i keep a whole lot of code that i need from time to time to make it easier and i can just simply go in there copy this code and paste it in once i'm happy with that i can save changes and activate and now when i head back to my custom posts and i say view custom posts you will see that the prefix is no longer visible and if i go into a single category first custom category and if i go to second custom category second custom category so now i can see my post and i can click on the categories and if i scroll down i see the content and i can see the form so let's have a look at that if i'm not a logged in user so let's copy that so here i have it open in another browser and there is the content and no editing form and because i'm logged in here i can i can see that right so now what we want to do is and back to um our post uh editor let's go back to the admin and now what we want to do is we want to create the ability to set the um the published value of the post from draft to publish because at the moment the only way to do that is to head over to edit the custom post and now we can change the status here from publish to draft but we actually want to be able to do that on the front end in order to to do that we would head back to our custom fields into our field groups and what we're going to do is under the custom post fields we're going to add a new field and we're going to call that custom status and what we're going to do is we're going to make that a a radio button so you can only choose one or the other and under choices we're going to have publish let's do draft first and the second one will be publish and then we're going to update field group and now what we're going to do is head over to our forms and what we want to be able to do is on the edit post so the custom post edit form we want to be able to edit the post so what we'll do now is on load we know that when the post is saved it will be saved in the draft status but what we're going to do now and this is in the editing field so what we're going to do is set the post status on save to those status we're going to set change that to instead of being draft we're going to say that that's the custom field and that custom field field status so we just scroll down till we get to the custom fields so here they are here um custom status so now the we will now set the post status to the status of that select so now if i go and have a look at my posts at my custom posts and i view my custom post and i go and edit it and i scroll down you'll see now that i have an option here for draft or publish so if i was to save this now as a draft and i head back to that custom post you'll see now that the status is in draft and similarly if i view the custom post and you'll see now it actually comes up in the preview window if i try to edit that night in the preview window and i change that status to publish and i say update post it confirms that the post has been edited and i refresh you'll see now that the status is changed to published and if i view the custom post you'll see here that the custom status is set to dropped and the reason for that is because we need to change that form so we head back to custom fields we head back to our form and we say now that when the custom post loads that the post status must also be set as per the custom status field so the post status and update and now we're going to look at custom posts and it's in the publish mode so if i scroll down now it's in publish if i change that to draft and i say update post for update the status if i just refresh to get the form to show you'll see that it's back to draft so if it's in draft and we go and have a look on our other browser it shouldn't actually show because the post isn't published so it doesn't show if i then update here and i update my post and i head back and i refresh the page you'll see that the post reappears so that's how easy it is then for us to to show draft and publish posts but maybe what i want to do is in my post archive i want to separate the published posts from the posts that aren't published so i can actually now on my archive page go in and have a look and see all the posts that are available for approval for editing or moderating in the same place so here we have our custom posts we have the repeater so there's the repeater and we have the query and we've said that the post type must be and custom post but what we can also do is set the status to be published now if i go and have a look you'll see that i can set the order i can set the count but what i can do is set the post status so in order to do that i'm actually going to have to do a manual query and we're going to change post underscore type and that's going to be custom post and then instead of category name let's change that to post status and that must be publish and post per page we say -1 so it includes all we apply the query and right so now we have the post status of publish so we save that now when i go to my archive i can see the post what will happen now is that when i change the status now to draft and i update the post and i head over to the category it's no longer visible now i'd like to see that post in a section below the published post so i'm going to add a section and that section i'm going to just create a heading and let's call that draft draft posts and we'll center that and we'll just change the font weight of that to 500. let's just change the size and spacing there quickly right so these are our draft posts and inside the draft posts i'm going to just take my repeater here and i'm going to duplicate that except now that when i go to the query and i'm going to change the post status from publish to draft and we'll save that and what i'd also like to do is well before that i can we'll see now that is under draft posts but i'd also like to do is say that this section is also then user role is equal to editor user role is equal to author user role is equal to administrator and it should be set to or save right one more change that i'd like to make is when editing between draft and publish i'd much rather prefer to have the draft or publish right here next to the update post so i don't have to keep scrolling so much so to do that we'll head over to custom fields we'll head over to our field group and what i'm going to do now is custom post fields the status is here but i'd actually like to put it into the other field group so that it's closer to the bottom so i'm going to move that to the parameters group and move field close window update now i know that when i go to my field groups and i go to custom parameters that the custom status is there and it's put it at the bottom now when i go to custom posts and i say view custom posts i don't see any posts and when i go you'll see now because that is in the draft so let's change that to published and now when i see now my custom posts are back so now when i go into edit you'll see that the draft or published is right at the bottom so it's nice quick and easy to get to right now what we can do is what we do want to happen is we do want it to be such that the draft posts will appear below and if i go to my archive you'll see that i don't see any draft post notification but i will see it here and if i change the status it will move so let's make this let's add this link then to the navigation just to make it a little bit easier so i can if i want to get there to the header i can then just click on the header and say open and edit template it opens the main open anyway there isn't any other template open that loaded i do have a menu here which pulls in a default menu from wordpress but what i could also do is just change this here to this link is for the demo purposes have a look so now when i say get oxygen it will bring up this page with the posts in what i'm also going to do now is add the page to create the post so what i'll do then is in that text link i'm going to duplicate that and i'll change the text here to um archive let's call that custom posts and let's give that a margin to the left and then what i'm going to do is the text here i'm going to say create post but i don't want everybody to see that i only want logged in users to see that so this particular text link then which will link back to our page for create custom post let's get that link and let's just update that and it's going to view that page and i'm going to change that length but then this particular text link i'm going to set a condition and it will once again be i let's make it user role equal editor user role add condition user role equal to author and save so that means that when i refresh have my custom posts but i can't see as an administrator so um user role is administrator and what i'm also going to do is set that to all and now when i refresh i can create a post or i can view the posts but as somebody who's not logged in if i refresh you'll see that i can only go to custom posts i cannot create a post right so in the next um [Music] tutorial we'll have a look at how you can create a user and give them then access to be able where they can register on the website and then you can actually they can then have the the rights then to go in and create um posts so let's have a look at that in the next video thank you for watching

Channel: Bruce Young

Views: 4,088

Keywords: ACF, post front end forms, wordpress, edit posts on front end, create posts on front end, edit post forms, submit post forms

Id: Xb2oVTsWJjE

Length: 113min 51sec (6831 seconds)

Published: Fri Sep 11 2020