This tutorial shows you how to build a page template that will allow you to create new posts (or custom post type posts) from the front end of your WordPress website using the powerful Advanced Custom Fields Pro (not free) plugin. Some of the code is specific to The Genesis Framework, so you will have modify it to work on non-Genesis themes or child themes.
Part 2 shows you how to edit posts with ACF Pro.
There are lots of other cool plugins like Gravity Forms, Ninja Forms, and Formidable Pro, that allow front end posting, but I prefer using ACF since it also seamlessly integrates any custom fields you may be using as well.
ACF Pro has a really powerful function called acf_form() that gives you the ability to render a form (metabox) on the front end of your site. Then there are filters available that allow you to manipulate the data from the fields and use it to create posts.
There’s a video at the end of this post if you wanna see it in action.
Here’s how we do it.
Create The Metabox(es)
I actually create 2 separate metaboxes, 1 for the default post fields, and another (optionally) for any custom fields I want included in my post. The reason fro 2 metaboxes is simple. I don’t want the fields used for title, content, featured image, categories, and tags to be saving duplicate data as custom fields on a post. I only want that metabox to be there to pass data from the form to the post itself.
Download ACF fields export file
Here’s the metabox for the default fields. Notice that this metabox location is set to a non-existent Options Page (for the reasons explained above).
We are using ACF’s Taxonomy Field Type. This field also works for custom taxonomies, so it can be extremely powerful. Make sure you check the box to “Load value based on the post’s terms and update the post’s terms on save”. This is extremely important. It insures that the category or tag is properly saved when you submit the form. It also makes sure existing categories are loaded correctly when loading the form.
And here’s the metabox for any custom fields. This example just includes a text field in the repeater. Set this location to your post type.
Next, we need the field group ID(s) so our page template knows which metaboxes/field groups to load. This screenshot shows you where in the field group URL to grab the ID. Replace the ID(s) in the page template code with the ID(s) of your field group(s).
Create The Page Template
If you’re attempting this tutorial, you should already comfortable with page templates. Things get a little tricky here.
First off, make sure your ACF field keys are visible in your field group. We’ll need to grab the field keys to use in our template below.
Next, create
Here is our full page template.
Note: A commenter (Al-Mamun Talukder) added a revised snippet for use in a non-Genesis theme. View the code here.
The first function is required for ACF to load all the scripts it needs to work its’ magic. The second function removes the scripts that are only needed when creating a post in the admin.
Our next function is where we load the actual form. The ‘field_groups’ parameter must be updated to include the field group IDs of your newly created field groups. My example is also redirecting to the newly created post URL after submission. If you are submitting to a draft, or something else, you may want to stay on the same page and let ACF show our “Saved!” message via ‘updated_message’ parameter. There’s a lot of flexibility here, so once you get it working feel free to play around with it.
The last 2 functions are our acf/pre_save_post and acf/save_post filters. The pre_save_post function is what creates the actual post using the title and content fields in our form. The save_post form is what takes our image field and uses the attachment ID for the featured image of our new post.
Notice that we don’t need to do anything with our taxonomy fields or our custom(repeater) fields. ACF handles this all for us… awesome!
Create your page
Our code is all ready to go. Just create a page and choose your new page template, and view the page on your site to post. Make sure you are logged in and have posting capabilities.
See it in action here:
Next up… editing posts on the front end!
