This is going to be a follow-up (upgrade) to my previous post “Advanced Custom Fields on Front-end & Front-end Posting“. With the latest version of Advanced Custom Fields Pro, we can accomplish the frontend post submission & edit with ease. The previous article I wrote, was only about how to get your post submitted from frontend and lacked the editing portion. In this post, I am going to cover both submission and editing with detailed instructions so, you can easily apply it to your project.
The Scenario
Let us assume, you have a website where you enlist your favorite books or for affiliation purposes. You have a custom post type called “Books”. The custom post type has 6 important fields that we will work with. They are:
Field Name | Title on Field Group | Field Type |
Title | Book Title | Not Needed |
Content | Description | Not Needed |
Featured Image | Book Cover | Image Field |
Category | Genre | Taxonomy Field |
Price | Book Price | Number Field |
URL | Purchase Link | URL Field |
Tip: This process doesn’t require a custom post type. However, we are using it to cover more of the things we can do with this method. If you need to create custom post type but don’t know how you can use a plugin like Custom Post Type UI.
Create Field Groups
For our fields, we will create two separate fields groups. First one as “Books – Essential”.
First, we will add the image field for “Book Cover” which will work as the featured image.
It is a good idea to limit the image upload to the post only. That will ensure non-admin users don’t see other media library files uploaded to the site. So, if you have many users that will do the posts you may choose Uploaded to post else, you may keep it to All.
Select the image field return value to Image ID
The next field is Genre a Taxonomy field, which we will use for the category of books.
If you want to allow adding new categories keep the “Create Terms” field to Yes. Change it to No if you want to prevent users from adding new categories while they post. It is important to keep the “Save Terms” and “Load Terms” options to Yes for our purpose.
The last step for this field group is to set the location. Select “Options Page” and keep it to “No options page exist” like the following image.
In the next field group, we will call it “Books – Custom Fields”. The two fields that we will add to this field group are Book Price and Purchase Link. These are generic fields, just add them and this time select the location according to the following image. We are now adding these fields to the “Books” custom post type.
This ends the creation of field groups for our frontend post submission and editing.
Create a Page for the Frontend Book Submission
Now that the template is ready, we simply need to create a new page, give it a meaningful title (ex. Book Entry) and select “Book Entry” from the page templates.
You may see a different name if you modified the template name with your own choice.
Modding Theme Files for Submission
We are going to use a page template for our post submission. To make a page template, you may copy the page.php
file from your activated theme folder and copy it to the child theme directory. In case, you are not using a child theme, just copy the file to the currently activated theme folder with a different name like template-book-entry.php
. You can find more about page templates here.
The template file code should start with something like this
<?php
get_header();
......
Code language: HTML, XML (xml)
Modify the file like the following code
<?php
/*
Template Name: Book Entry
*/
if ( is_user_logged_in() || current_user_can('publish_posts') ) { // Execute code if user is logged in
acf_form_head();
wp_deregister_style( 'wp-admin' );
}
get_header();
Code language: HTML, XML (xml)
The next portion of code is going to be added in the body/content area of the page. Try 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 writing in a container class, which is pretty common in most themes. You can also try inspecting a regular page to get the appropriate area.
Get the ID of two Field Groups from their URL. It will be something like this
https://yoursite.com/wp-admin/post.php?post=6&action=edit
Here 6 is the ID of the field group. You will need to get the ID of both fields following that method.
<?php
if ( ! ( is_user_logged_in() || current_user_can('publish_posts') ) ) {
echo '<p>You must be a registered author to post.</p>';
} else {
acf_form(array(
'post_id' => 'new_post',
'field_groups' => array(6,11), // Used ID of the field groups here.
'post_title' => true, // This will show the title filed
'post_content' => true, // This will show the content field
'form' => true,
'new_post' => array(
'post_type' => 'books',
'post_status' => 'publish' // You may use other post statuses like draft, private etc.
),
'return' => '%post_url%',
'submit_value' => 'Submit Book',
));
}
?>
Code language: HTML, XML (xml)
You will notice that we have post_title
and post_content
as true
. These two help us automatically add the Title and Content field to the post submission form.
Tip: If you are not going to use a custom post type, just don’t use the 'post_type' => 'books'
part.
For the Featured Image, in our case, the Book Cover field needs to be configured to set the uploaded image as the featured image to the post. To do that, we will add some code to the functions.php
file. Again, if you are using a child theme, add the code to the child theme’s functions.php
file.
// Set Featured Image from ACF Field
function acf_set_featured_image( $value, $post_id, $field ) {
if($value != ''){
update_post_meta($post_id, '_thumbnail_id', $value);
} else {
if ( has_post_thumbnail() ) {
delete_post_thumbnail( $post_id);
}
}
return $value;
}
add_filter('acf/update_value/name=book_cover', 'acf_set_featured_image', 10, 3);
Code language: PHP (php)
Here, we used the field name of Book Cover field which is book_cover
on the filter and that does the job of setting the uploaded image as featured image.
Amazingly, thats all that we need for the submission part! Moving on to the next portion which is editing the submitted post.
Modding Theme File for Editing The Post
While our post was submitted, we should be redirected to the post URL as we have set that in our code. That page is rendered by single.php if you don’t already have a post template for the Books custom post type.
In order to create the post template, you may copy the single.php
file from your current activated theme and make a new file called single-books.php
. As our custom post type slug is books
we are adding it after the word single
and a “-“ followed by the extension of the file which is .php
.
So, the rule is single-<post_slug>.php
We will also need to add the custom fields “Book Price” and “Purchase URL” in the single-books.php file to display the values.
Look at the top of the file and change
<?php
get_header();
Code language: HTML, XML (xml)
To this..
<?php
if ( ( is_user_logged_in() && $current_user->ID == $post->post_author ) ) { // Execute code if user is logged in or user is the author
acf_form_head();
wp_deregister_style( 'wp-admin' );
}
get_header();
Code language: HTML, XML (xml)
To improve the look and feel and the UI of the post edit form, I used a class acf-edit-post
in the code. You can simply add a button to the template and reveal the post editor/updater form as you want.
Code for the button
<?php
/* Show the edit button to the post author only */
$current_user = wp_get_current_user(); // Just in case it is not set anywhere else
if ( ( is_user_logged_in() && $current_user->ID == $post->post_author ) ) { ?>
<a class='post-edit-button' href="<?php echo get_permalink() ?>?action=edit">Edit Post</a>
<?php }
Code language: HTML, XML (xml)
Code for revealing the form once the button is pressed
<?php
if (isset($_GET['action'])) {
if($_GET['action'] == 'edit') { ?>
<div class="acf-edit-post">
<!-- Put the edit form code from the next step here -->
</div>
<?php }
}
?>
Code language: HTML, XML (xml)
Here we followed a very basic way to show the form if the button is pressed. You may customize this more to your need with jQuery and CSS.
Now we need to add the following code to add the form for editing the post. (Insert this code on the described area of the code given before this step)
<?php
if ( ( is_user_logged_in() && $current_user->ID == $post->post_author ) ) {
echo "<div class='acf-edit-post'>";
acf_form (array(
'field_groups' => array(6,11), // Same ID(s) used before
'form' => true,
'return' => '%post_url%',
'submit_value' => 'Save Changes',
'post_title' => true,
'post_content' => true,
));
echo "</div>";
}
?>
Code language: HTML, XML (xml)
Done! With these simple changes, you now have a fully functional front-end post editing feature with Advanced Custom Fields.
You may check my new tutorial about styling the ACF frontend edit form with jQuery Sidr.
Bonus!
You may want to customize some of the things as you implement the codes I have shared above. I am adding some snippets to help you with some common customizations. You may add the codes given below on the functions.php
file or just above the acf_form()
c0de on the template file.
Changing the label of Title and Content field
We used the automatically generated title and content fields on both our forms. They work fine but in some projects, you might want to change them to better define the form fields. To do this, you use the following code
// Change Title Lable
function change_title_label( $field ) {
$field['label'] = 'Book Title';
return $field;
}
add_filter('acf/load_field/name=_post_title', 'change_title_label');
Code language: PHP (php)
// Change Content Label
function change_content_label( $field ) {
$field['label'] = 'Description';
return $field;
}
add_filter('acf/load_field/name=_post_content', 'change_content_label');
Code language: PHP (php)
Changing the Content field to be required
By default, the Content field will not be required. You may use the following code to make the field required for verification
// Change Post Content to Required
function change_post_content_required( $field ) {
$field['required'] = true;
return $field;
}
add_filter('acf/load_field/name=_post_content', 'change_post_content_required');
Code language: PHP (php)
Disabling the media upload button on Content field
In many projects, we need to disable the media upload button in the content field. It is good for keeping out non-admin users from uploading unnecessary files. You may use the following code for this
// Change Post Content Type
add_filter( 'acf/get_valid_field', 'change_post_content_type');
function change_post_content_type( $field ) {
if($field['type'] == 'wysiwyg') {
$field['tabs'] = 'visual';
$field['toolbar'] = 'basic';
$field['media_upload'] = 0;
}
return $field;
}
Code language: PHP (php)
Conclusion
I hope this post helps you with frontend post submission and editing. Feel free to share your opinion in the comments and let me know how it went. Thank you.
58 comments
Gio Madaro
It worked! Thank you!
Gio Madaro
Hi, thank you for this tutorial. I’m facing a problem: when I click on the upload image button i get this error in console: ‘Uncaught TypeError: wp.media is undefined’. Enfold theme, clean install, all plugin disabled. Any idea? thank you
Al-Mamun Talukder
Please check if you have this option selected on Theme Options > Performance page.
If not, please set this and try again. Let me know if it works out.
Rosen Syantan
Great Tutorial!, Can we also add custom fields in acf_form which is not by ACF,
Thank you
Al-Mamun Talukder
I don’t think so.
Alessio Baccarini
Hi! I’m trying to implement this on a field group wherein most fields are WYSIWYG. Do you think it might work on all fields in the Slidr drawe, or will it just support the content?
thanks in advance, keep up the awesomeness
Persie
Hi Al Mamun,
Great tutorial, your way of explaining is so nice that anyone one understand it. Can you show us how to make Delete post button also on Edit post form.
Then it will be complete package.
Again it’s a Great Tutorial I have ever came across for ACF Front end Form.
Thanks.
Persie
Al-Mamun Talukder
I will try to do a follow-up on this when I get time. Thanks.
Mario Campos Salazar
Hello Al-Mamun Talukder,
Excellent. Thank you very very much!!!
The code is perfect.
John
I am using Polylang and more than one language. If I use one post type but two language versions, how would I modify the steps here?
Al-Mamun Talukder
This tutorial is out of the scope of what you require. Please check their official documentation to figure out how to structure everything for ACF. Thanks
martin
Hi, My form works good – but why am i getting blank page after save changes?
Al-Mamun Talukder
The configuration is set to take you to the post URL once submitted. If it’s not taking there, please double-check the code. You can contact me with a temporary login if you want me to take a look.
Corrado Prever
Hi there, you did a great job and it works.
I was wondering if is possible to do the same also in backend and see the title coming out from name + firstname or similar i use CPT UI plugin so I can disable title and content from backend for certain custom post type.
Al-Mamun Talukder
Yes possible. You will need to use this -> https://www.advancedcustomfields.com/resources/acf-save_post/
Daniel
Hi, fantastic tutorial!
I need the first field of my form (text field) to become the Title of a custom post type, but when I fill in the form, the result is a custom post with the title : No-title.
Could you help me to solve this? I’m kind of frustrated…
Thanks in advance!
Al-Mamun Talukder
You will need to use this https://www.advancedcustomfields.com/resources/acf-save_post/
Rex
Can this be done with ACF free version? Thanks.
Al-Mamun Talukder
Yes. However, you will miss great features from the PRO version. I would highly recommend getting the PRO version. Totally worth it.
fun
Hello! awesome lesson, but I do not understand where figure 11 came from
‘field_groups’ => array(6,11), // Used ID of the field groups here.
Al-Mamun Talukder
Here 6 and 11 is the ID of the field groups we created. Get the ID of two Field Groups from their URL. It will be something like this https://yoursite.com/wp-admin/post.php?post=6&action=edit
Matt
You are a wizard. I was about to drop a load of money on a plugin that *might* have been able to do this for me. Thank you.
Al-Mamun Talukder
Happy to share 🙂
Kais Kasmi
Hi , how to configure the button submit label for mutilanguage
Al-Mamun Talukder
If you are using WPML, you may try string translation
siak
Hi great tutorial
For Changing the label of Title and Content field / what to do if we used multilanguage ?
Thank you
Al-Mamun Talukder
you can use string translation if you are using WPML
Torrento Kage
Hello Al-Mamun Talukder,
Can i get the Full Source code to edit the post with regular theme. I mean without genesis Theme Code ?
I need it .
Al-Mamun
Hi, this tutorial is for regular theme. You can follow this tutorial and it will work just fine.
Andy Deemer
Al-Mamun, this is so fantastic. Thanks so much! One question: is there a way to add multiple submit buttons? Eg. one for “save as draft” and a second for “publish”? (I recognize that creates complexity on the editing phase, but I’ve worked that one out already.) Thanks!!!
Al-Mamun Talukder
Hello Andy. I don’t think two different submit buttons can be added. Let us know if you can find any solution 🙂
Patrick
Thanks for this. But for some reason my form is not showing when i click the edit button. Works if i take out the _GET conditional…
Thanks
Patrick
Got it working – I had to change ?action=edit” to &action=edit”
Giuseppe
Very useful guide man!!
I’ve to ask an help: I locate the_content() on page.php (copied in child theme) but I don’t understand where to copy the code.
Thank you so much
https://uploads.disquscdn.com/images/fd4158dd29749f00aa9acb9cf74eb9f2df327de04532710638164370f4016a06.png
Al-Mamun Talukder
Thank you. You can add on line 66. If you face any issue, let me know.
Svengard12
Is there a technique for closing the editor form and hiding it?
Al-Mamun Talukder
Hello, I will be posting a tutorial about this soon (hopefully this weekend). Drop me your email address on live chat/contact page, I will inform you when it is available 🙂
Svengard12
Hello there,
I am getting the following two errors after enabling the debugger:
Notice: Undefined variable: current_user in template-parts/content-single.php on line 43
Notice: Trying to get property of non-object in template-parts/content-single.php on line 43
The Edit option doesn’t appear as a result – any idea why these errors are appearing?
https://uploads.disquscdn.com/images/b924160760a6c9d32d0dd325ef118d05313bfc63a43a6c5630bce735ce1982bc.png
Al-Mamun Talukder
Please try adding some extra code on top of line 43.
$current_user = wp_get_current_user();
Svengard12
Out of interest, is it possible to run this as an anonymous user? I will take an email, but don’t really want people to be able to log in to post.
Al-Mamun Talukder
Yes, should be possible but needs change in code where user login conditions are applied.
Svengard12
Ok, great, thanks. I’ll look into it.
Svengard12
Brilliant, you’re a genius. Thanks for you help 🙂
Chad Youngblut
Great post!
I do have a question (more of a request, really). Would you consider tossing in some repeater action?
Thanks again!
Eugene Nyawara
You, friend, are a real hero. I tried creating an ACF front-end post form a few years ago when there was zero documentation on the internet. I just saw this today, tried and it worked flawlessly! Thank you.
mirajadesign
I was able to create the frontend form, but the edit code doesn’t seem to work. I am just getting a white page when viewing my single.php page. If I remove the edit code from above the page displays fine.
Al-Mamun Talukder
Hi, can you please share the code on a pastebin.com so that I can take a look? Thanks
mirajadesign
Thanks for the reply I am still struggling with getting this to work.
The frontend submit form is here: https://pastebin.com/xJ0YzGUr.
The singe.php code is here: https://pastebin.com/ZeZSr2V5
Al-Mamun Talukder
Please check the attached image. On your single.php file, you have an error.
After < ? php }
you should not start a php code like you did on line no 36. Just delete the < ? php on line 36 and you should be fine.
Let me know if you have any other issue with this.
Thanks
https://uploads.disquscdn.com/images/569f969d25dc1e51643e790bea7ecf0538996681a4bd6a2211db3d6c7fbd8ba2.png
mirajadesign
Thank you for this reply. I thought that looked strange and I had tried to remove it but the page still is broken. It seems there are two instances in your code in this tutorial that has these errors in it. I don’t quite know enough about php syntax yet to work it out myself, so I do appreciate your assistance.
Al-Mamun Talukder
Hi, I fixed the code on your single.php file. Here is the link to pastebin. https://pastebin.com/PUfJdWWd
If you still face error, knock me on the live chat. Thanks.
mirajadesign
https://uploads.disquscdn.com/images/604d58e0d050bdbb0a5cc6e87a04848a2ed888cdfa5eede9111a1eef22770bfb.png
mirajadesign
Al-Mamun,
Thank you for this help! You are a hero today. It is finally working.
Al-Mamun Talukder
You are welcome! 🙂
mirajadesign
The post content is showing under the edit fields. Can I disable that so that only the edit fields are displayed on this page?
mirajadesign
Also, when I try to edit the form and hit update, a white page is displayed and the post is not updated. 🙁
Al-Mamun Talukder
I sent you a message on the live chat. Please check 🙂
Al-Mamun Talukder
Your code is still not right. Please add } on line 49 after the word < ?php