This is a continuation of front end posting with ACF Pro to allow editing of posts on the front end. We will use acf_form() for the post fields, and use Sidr for the slide out menu to hold our form.
There’s a video of the final outcome at the end of this post.
I’m using a custom Genesis child theme, but you can modify the code to work however you’d like.
Let’s get started.
Add our form to blog posts
We need to load our form on single posts. We’re using the same field groups we created in the last post, and using almost the exact same code to insert the forms.
Our setup function checks to make sure a user is logged in, and is the author of the post. Naturally, we don’t want to allow anyone but the post author to edit the post. If the conditions are met, we run our functions and load our code.
Here is the full single.php:
Remember to swap out the correct ACF field keys for your custom fields, otherwise we won’t know what to do with the field input data.
We use an important ACF filter to make this work properly. It’s called acf/load_value. This filter takes our empty ACF fields and pre-loads the post content from the current post so we are able to edit and save our changes.
The code is well documented, so go through it and make sure you understand what’s happening. Again, make sure you have the correct field keys!
Also, notice the tsm_do_acf_form_content() function that contains the acf_form() code. We wrap the entire form in a div with an ID of #edit-post. This ID is what we use in our Sidr javascript later on so our #edit-toggle button knows what content to load in the slide menu.
On to the next…
Setup Sidr
First, go to the Sidr website and download the most recent version (1.2.1 at the time of this post). I am only using the Sidr js file since the CSS we need is very minimal and we can include it directly in our theme.
Next, put jquery.sidr.min.js in your child theme directory.
I put mine in: /wp-content/themes/child-theme-name/assets/js/jquery.sidr.min.js
Lastly, create a file to trigger our slide out form. I called mine edit-post.js. Put it in the same location as the sidr file: /wp-content/themes/child-theme-name/assets/js/edit-post.js
If you change the location of these files, make sure you change the location in the tsm_acf_form_edit_post_enqueue_scripts() function above so the code knows where to find the files.
Here is the code we need to make Sidr slide in from the left, and also close when you click the ‘Close’ button that we’re going to add later on. Props to Robin Cornett for the help in dissecting Sidr.
The heavy lifting is done, now lets move on to CSS.
Make it look pretty
Remember that we didn’t load the Sidr CSS earlier. There is way more in that CSS then we really need, since we aren’t using an actual menu.
Here is the CSS I used for the slide out menu, with a few small tweaks to the ACF form itself.
There’s a lot of code here, and it might be a little overwhelming. Hopefully you already have a decent knowledge of ACF, because once you get the hang of acf_form() it’s a super powerful tool…
See it all in action here:
Happy coding 😉
