Front End Posting and Editing in Oxygen

hey everybody my name is jonathan with permaslug and welcome back to another episode today what i'm going to do is walk you through how you can use advanced custom fields pro and acf extended to create a form where your users can submit posts of any kind across your site on the front end not only that but they can also edit those posts after they've submitted them as well also on the front end and all of this works perfectly with oxygen now there's a few caveats that i don't quite cover in this video that if there's enough interest i might make another one on which is assigning user roles and then also some other little things you would have to consider like user registration this doesn't handle that for you but it certainly could so i can make future videos on this if you guys are interested but basically what you're looking at here is the post submission screen so you can add anything if you can add it in acf then you can make it show up in this form and you'll see how we do that later on so what you would do for a typical blog site might be like you see post title content category featured image and an image gallery and then what happens is when you submit that it goes into the posts back in screen as you can see and then on the front end it automatically renders out thanks to our oxygen template and if you're the admin or the post author then what you have is this update post form down here so what i'll do real quick is just actually submit a post so you can see this so we'll call this post i'm submitting this in real time t-i-m-e there we go lots of great content we'll go in this box like i mentioned if you have the proper user role then you can actually create a new category here so let's just call this one like demo we'll add that in and then our featured image i'll upload an image real quick so got my featured image and then i'll toss in some gallery images just from our wordpress gallery real quick do just a couple of those and then let's submit this and then what happens is you can customize this but you get a success message and the form disappears temporarily then if we go into the back end of wordpress and refresh real quick there is our new post that we just edited i'll take a look on the front end and all of the stuff we just put in those boxes is there so we set the category of demo there's our post title it's also our post slug up there in the url we have our gallery images and then there is our update field so let's say we want to change this i'm going to rename this to changing the title in real time then if i let's say change this category to travel and i want to get rid of like these last two photos and i submit this then all that takes place without any hassle whatsoever so of course we change the title change the category and remove some photos and all of that is done without ever touching the wordpress admin dashboard to learn how to set all this up continue watching this video and we'll walk through it step by step so the first thing i want to cover is the plugins that you'll need for this particular tutorial as you can see i am using advanced custom fields pro i'm honestly not quite sure how far you can get with the regular non-pro version so go ahead and just make sure you have pro especially because we'll be using the gallery which is only available in acf pro the next one there is acf extended and that's actually free pretty amazingly this does so much stuff and a lot of what we're gonna do today is pretty much entirely dependent on acf extended so get that i personally prefer classic editor over gutenberg so i have that and then i'm using the oxygen three seven alpha one this is of course not a production live site so i'm okay using an alpha install but make sure you have an actual supported version of oxygen if you're going to follow along here so the first thing we're going to do is actually go to our custom fields and we're going to create a new field group here and this is basically just going to be all of the fields for this particular post that you want to give to your front end user in my case the post type is just going to be equal to post because i don't have any custom ones here but if you do have that everything you're going to do will work on a custom post type you just have to make the appropriate changes where you see that option in any case all we need to do here is name our field group so we're just going to call this like blog post details or something like that doesn't really matter only you are going to see this field group title so just make it something you'll remember and then now we need to go ahead and add in all the fields that we want to give to this user so what you need to do is because of the fact that you're not actually going to let them into the admin dashboard they're not going to see things like the post title and the post content fields that you would typically see in the admin dashboard so we do actually need to make those so we're going to call this one post title simple text field is perfectly fine make this required if you want to i'm not going to do that in my case and then now we're going to call this next one post content this one will just use a wysiwyg editor so we give them the full kind of editing experience that you would come to expect you have the options to set what tabs you want to give them and also the toolbar you can either have it full or basic you can also let them upload media straight into that totally up to you the next thing we're going to add in here is just an image element so this will be kind of like the featured image let's actually call it that so featured image is going to be perfectly fine and then the field type we will of course change to image one thing you can consider doing is changing the uploader type to browser instead of wordpress since you'll only let them upload one image at a time anyway that will be perfectly fine featured thumbnail you definitely do want to turn that on because this is going to connect the featured image that someone uploads in this acf form to the actual featured image inside of wordpress which saves you a lot of hassle having to manually update that later on the other thing you can do is change allowed file types you know you could type in jpeg png gif whatever you want to do put your allowed file types in there and that's about it then we're going to add in the image gallery so we'll just call that image gallery field type will just be gallery and that's about all you need to do there last but certainly not least we're going to go ahead and add in the category taxonomy so we'll just call this field category and then we will just set the field type to taxonomy the taxonomy here you can just change to category tag or if you have a custom taxonomy register that will pop up here as well if you're using a custom post type make sure you actually have those turned on in cpt ui because otherwise it's not going to register whatever the user puts in here to the actual category taxonomy field in wordpress the appearance here you can change to checkbox multi-select radio etc let's say you want a radio because you only want them to be able to select one at a time let's go ahead and just choose that as our option create terms is actually only going to appear if the user has that capability in their user role so either if they're set as an editor which is probably not the way to do it you probably want to create a custom role and give them only what they would need so you just turn that option on the only other thing we need to do here is just set save terms to yes and then that's about all we're going to do in this case so let's publish this field group and take a look at what we have so as you can see you have post title content the featured image the gallery and then the category so that would be like a pretty standard setup for like a community blog or something like that if you had like a directory site you could also create simple text fields for like phone email address stuff like that but this is all we're going to focus on in this case so now we actually have our field group created what we need to do next is go to the forms option over here which is added through acf extended and we're going to add a new form so this one here is just going to be called like submit new post i'm going to copy this and just paste it right in the form slug field and it does the adjustments for us makes it lowercase and puts the hyphens and then what we're going to do is go to field groups blog post details and we're actually just going to go ahead and publish this if you don't publish it ahead of time one of the steps that we do later on isn't going to load properly so just go ahead and update that on the actions tab right here we're going to click add action you're going to go to post action then this is of course going to be creating the post for us so that's set automatically we're going to go to the save tab and we're going to go to post type you set whatever post type you want again if you have a custom one you can set that but we'll just use the typical post type post status lets you decide on submit whether that post should be immediately published or if it goes into a draft or pending state so that you need to go check it out published is what we'll do our post title will actually just be one of our blog post details fields you know just post title and this is what i was talking about these aren't going to show up until you actually publish this form once so our post title is that the post slug will just be the title just like you saw earlier where it automatically adjusts it to be lowercase and hyphens for you so you can just leave the post slug as the default content will be post content author is whoever is logged in so like i mentioned you need to have some way for them to register or else this you know it's just going to be open to the public basically post parent you can set this to be like a you know parent page but we're just going to leave that as default post terms is going to be our category field and then we need to toggle on all of these for save acf fields so now what we can do is click on update just go ahead and copy this provided shortcode here and we can just make a new page on our site called like submit new post or actually we'll just call it submit post make it nice and easy we'll publish this and then we'll edit it with oxygen the first thing i'll do is just toss in a section and then just a simple short code element we'll paste that in and set this shortcode to a width of 100 and you can see it looks pretty terrible here in the back end but if we actually go save this and look on the front end it's really not that bad so these are you know pretty basic form fields but it actually doesn't look all that bad the category section looks half decent but you would really just need to style like the buttons you know like for submit and choose file maybe make the forms look a little bit nicer but out of the box i mean it looks fairly reasonable so i'm happy with that just to show you that this works i'm just going to call this post title like why you should travel alone every so often something like that the post content i'll just go grab some text real quick that's what's going to end up in our post content there our featured image i'll just pick an image off my computer real quick so i just uploaded a little image of like an airplane flying and then we'll toss some images into our gallery and this is a little bit clunky because it's going to show everything unless you go change the option to only what's uploaded to this post but if you do that then you don't actually get the image preview so i'm just going to pick a couple of images out of here and we'll just select those toss them in like that the category if you have the user permissions based on like the user role then you can actually create new terms here and this is what it looks like so we'll just call this like destinations something like that and then of course again you know you might want to style the button and then like the add inside of this model but realistically it doesn't look that bad so now what we want to do is go ahead and just hit submit the page will refresh and you get this notice that says post updated now you can actually set this whole form to hide and you can customize this success message so we'll do that here in just a moment but i wanted to show you how easy it is for them on the front end to see that submission let's actually go over here to our post tab and take a look at that post that just got submitted so of course it pops in the post title and the slug for us it put in the post content and then you do have the category option over here we also have our featured image set down there which is super cool and then these are all of the acf fields that came from the field group so it is a bit of a duplicate but what you need to do is edit the stuff that you want in here and it will reflect in the wordpress admin side now of course your user is not going to get into the admin dashboard so they're not going to see any of this we're going to set up another form so they can update the post but this is effectively what they will see so pretty cool that it does it all in the back end of wordpress for you i'm going to close out of all of these tabs and then on our form here what we're going to do is go to success page say hide form yes and then post updated we'll just add an exclamation mark and make it bold update this and now whenever that submit new post takes place then the form goes away until the next time the page loads so what we're ready to do now is make a new form and this will allow the user to update that post that they've already submitted so go to edit form and say add new we're going to call this one just like update post form name we'll just do the same thing copy in our name again field groups will be blog post details publish this one more time under our actions we're going to go add action post but instead of create post we're going to change this to update the save tab we're going to do pretty much exactly the same thing we're not going to change the post type or the status but you can if you want to post title is going to be title again slug we're going to leave alone content will be content author and parent we're not going to touch those terms will be our category field toggle on all of the save acf fields and then go back to the top and for the load side of things change the load values to yes and then pretty much the exact same thing so post type and status we're not going to change title will be title slug nope content author and parent no post terms will be category and then toggle all those on update that and now we're just basically going to take this short code but we're going to want to put this in our template for a given blog post so now what we're going to do is go to oxygen templates go to add new template and we'll just call this one blog singular i'm going to set this to inherit our sitewide template and just go to posts as the singular of course if you already have a post template you don't need to make a new one but we're just going to edit this with oxygen okay so now we're actually editing the singular post for these blogs so what we're going to do is start off with a section i'm going to put in a heading and make this the post title using the dynamic data function i'm going to pop in an image element here go to the data featured image and we'll set this to large will be perfectly fine this is way too big so i'm going to set this width to i don't know maybe like 500 pixels or something and then i'm going to move the heading down add a little bit of margin this is going to look pretty terrible so forgive me but this is just for example of course now in this section i'm going to pop in a text element we're going to go to the insert data advanced custom field go to post content we also had an image gallery so we can just use the built-in oxygen gallery we called ours image gallery so there's all the images we attached inside of that gallery on this post and then the other thing we had was the category so let's just go ahead and go to text we're going to toss in the insert data category taxonomy here so you can actually just use the built-in category because of course i showed you that it registers and then i always do the separator as a comma and a space like that now of course we only have one category here but that's okay i'm just going to add a little bit of margin there and then what we're going to do is actually add in a another section go to short code and then we're going to put in the short code from the form that we created earlier the update form so that one was just our update post form we're going to set this to a width of 100 and then just for the sake of clarity let's maybe change this to like an off-white background color this may not look all that great but i just want to demonstrate a little bit of a delineation between the update and the existing content section so we'll save this real quick go to the front end and then of course again forgive how terrible this looks but what you'll find is everything in this post title is still attached to this form field here so let's say we take out the picture of the carrots and the green grass here and we click on submit then what happens is on the front end the picture of the carrots and the green grass is now gone in addition to the actual back end of wordpress you'll see in the gallery it's gone there too which is super cool now to give you another example if we add some extra content to this post title or we rename it entirely let's maybe just change it to like why traveling is fun i think traveling is spelled wrong but that's okay we'll just submit that and then now you can see our post title is updated automatically for us so that is extremely awesome now the other cool thing is if we add in a new category here let's change this to travel and just hit the submit button everything updates for you you can see now the category has changed to travel now of course you're probably thinking but this form isn't protected in any way that doesn't really give you that much confidence that somebody wouldn't just come along and modify this so there is an element of protection you can do a couple of things using the oxygen conditions you can set the user logged in is equal to true so if you have some sort of protection on these you can say loot user logged in is true the other thing is you would need probably another condition like one from swedar from wp devdesign.com where it automatically detects whether or not you are the author of this post if you have another plugin that can do that that can also work as well but in terms of the protection that will definitely be something worth considering is how do you protect this actual update form but i'll provide a link in the description below on swedar's condition from his membership site because that one works perfectly fine and so basically what i'm saying with that condition is it will set it up so that unless you are the author or an administrator on the site this whole section right here with this update form won't appear on the front end for you which is pretty neat i'm going to take a moment just to make this look a little bit better and then we'll go from there okay so i made this look just a little bit more interesting just set the featured image as the section background and then change the heading to white a little bit more compact but it looks definitely better the other thing i wanted to show you just quickly is the image gallery does still work which is super cool i really like that functionality and the benefit of this is pretty much if you can make it work with acf you can make it work in your oxygen template giving users the ability to add and edit pretty much any type of content on really any sort of site what i love so much about this solution is that it's pretty much form agnostic so you don't necessarily need to have gravity forms or fluent forms or formidable or any of the other ones out there this just works as long as you have acf you don't need to worry about anything else in terms of form plugins and there are definitely caveats to some of those other form plugins so this is a really cool way to give users the ability to add and edit posts on the front end without ever touching the wordpress admin side and i really hope this tutorial has been helpful for you guys thank you so much for watching and i'll see you in a future video

Channel: Permaslug

Views: 3,068

Keywords: front end posting and editing wordpress, front end post submission

Id: 2jt6nWIC0G4

Length: 17min 57sec (1077 seconds)

Published: Wed Dec 16 2020