This article is outdated! Check the updated article » Frontend Post Submission & Edit with Advanced Custom Fields

Today’s post is about using Advanced Custom Fields generated custom fields on the front-end, so we can create posts from the front-end without needing to go to the dashboard. It can be a very neat solution for guest posting. A tutorial for this purpose is already on the internet by JiveDig, which is based on The Genesis Framework. I am going to discuss the way to make it work on a regular theme. Let’s get started!

Things Needed

The Process

We will need to add new Field Group on Advanced Custom Fields. Go ahead and use the fields you need on your post and save changes. I am using three basic fields of a post in this case. You can add more fields on this Field Group like category, tags with the Taxonomy field. You need to make sure that you check “Load value based on the post’s terms and update the post’s terms on save” when you use them.

acf-field-group-for-front-end-posting

Next we are going to add an extra Field Group for our custom fields. It is not mandatory but as you are using ACF, I assume you have custom fields to add. You may choose different post type from the Location section, if you are going to use a custom post type.

You might be wondering where are those field_**** text coming from. These are Field Keys and not initially shown. You need to click Screen Options at the top right of the screen and check Field Keys if not already checked. You will need Field Keys for post title, content and post feature image later on.

acf-field-group-for-front-end-posting-3

Get the ID of two Field Groups from their URL. It will be something like this

http://yoursite.com/wp-admin/post.php?post=205&action=edit

You need the 205 here. That is the ID of the Field Group.

Now you need to create a template for the front-end submission form. To create a template, you may copy the page.php file of your theme and copy it on you child theme folder (always try to use a child theme) and rename it as you want.

The template file code should start with something like this

<?php
get_header();
......

You will need to paste the following code in between <?php and get_header();

/*
Template Name: Property Submission
*/

/* Add required acf_form_head() function to head of page
* @uses Advanced Custom Fields Pro
*/
add_action( 'get_header', 'tsm_do_acf_form_head', 1 );
function tsm_do_acf_form_head() {
 // Bail if not logged in or not able to post
 if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
 return;
 }
 acf_form_head();
}
 
/*
* Deregister the admin styles outputted when using acf_form
*/
add_action( 'wp_print_styles', 'tsm_deregister_admin_styles', 999 );
function tsm_deregister_admin_styles() {
 // Bail if not logged in or not able to post
 if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
 return;
 }
 wp_deregister_style( 'wp-admin' );
}

The code above includes the template name which you can change as you like.

Now you will need to locate the_content(); on your code to paste in another piece of code. If your copied page.php content does not contain that, you may try pasting in a container class, which is pretty common on most themes. You can also try inspecting a regular page to get the appropriate area.

The important thing here is to change the ‘field_groups’ => array(7,58) with the ID’s you got from previous step.

// Bail if not logged in or able to post
 if ( ! ( is_user_logged_in()|| current_user_can('publish_posts') ) ) {
 echo '<p>You must be a registered author to post.</p>';
 return;
 }
 
 $new_post = array(
 'post_id' => 'new', // Create a new post
 // PUT IN YOUR OWN FIELD GROUP ID(s)
 'field_groups' => array(7,58), // Create post field group ID(s)
 'form' => true,
 'return' => '%post_url%', // Redirect to new post url
 'html_before_fields' => '',
 'html_after_fields' => '',
 'submit_value' => 'Submit Post',
 'updated_message' => 'Saved!'
 );
 acf_form( $new_post );

Next, you need to paste in the following code to your functions.php file. This time, you will need to change the Field keys to the mentioned areas on your code. So, change the field key values given in the following code with the correct ones from your Field Group. You may also change the post_type to your custom post type, if you are using one. Plus, the post_status can be changed to something else if you need to approve posts before they are published.

/**
 * Back-end creation of new candidate post
 * @uses Advanced Custom Fields Pro
 */
add_filter('acf/pre_save_post' , 'tsm_do_pre_save_post' );
function tsm_do_pre_save_post( $post_id ) {
 
 // Bail if not logged in or not able to post
 if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
 return;
 }
 
 // check if this is to be a new post
 if( $post_id != 'new' ) {
 return $post_id;
 }
 
 // Create a new post
 $post = array(
 'post_type' => 'post', // Your post type ( post, page, custom post type )
 'post_status' => 'publish', // You can use -> publish, draft, private, etc.
 'post_title' => wp_strip_all_tags($_POST['acf']['field_54dfc93e35ec4']), // Post Title ACF field key
 'post_content' => $_POST['acf']['field_54dfc94e35ec5'], // Post Content ACF field key
 );
 
 // insert the post
 $post_id = wp_insert_post( $post );
 
 // Save the fields to the post
 do_action( 'acf/save_post' , $post_id );
 
 return $post_id;
 
}
 
/**
 * Save ACF image field to post Featured Image
 * @uses Advanced Custom Fields Pro
 */
add_action( 'acf/save_post', 'tsm_save_image_field_to_featured_image', 10 );
function tsm_save_image_field_to_featured_image( $post_id ) {
 
 // Bail if not logged in or not able to post
 if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
 return;
 }
 
 // Bail early if no ACF data
 if( empty($_POST['acf']) ) {
 return;
 }
 
 // ACF image field key
 $image = $_POST['acf']['field_54dfcd4278d63'];
 
 // Bail if image field is empty
 if ( empty($image) ) {
 return;
 }
 
 // Add the value which is the image ID to the _thumbnail_id meta data for the current post
 add_post_meta( $post_id, '_thumbnail_id', $image );
}

That should be the end of the coding part. Now go ahead and create a page assigning the page template you created and you should be seeing the form on the page.

Let me know in the comments if you face any problems with this. Suggestions are also welcome.