It’s not very hidden… I’m a huge fan of “FEATT” (front end all the things). Yes, that’s an acronym I just made up right now, but I might just continue to use it. I love building websites that keep the users on the front end for posting & editing new posts, editing profiles, and more. Sometimes that’s not feasible for the type of site you’re working on, but many times it is, especially with some of the tools available now that make things easier for us to setup. Enter Caldera Forms.
This tutorial walks you through a clean (and safe) setup for front end posting and editing with a Caldera Form.
Before getting into the details, let me mention some of the limitations of Caldera Forms that I’ve come across in working with front end posting and editing. At the time of writing this post Caldera Forms is at version 1.3.02 and the Caldera Custom Fields add-on is at 2.0.3.
The current limitations
No WYSIWYG Editor – This is kind of a big one. This means that the post content you are posting/editing will only have a text area field. No TinyMCE with image upload. No simple method for bold, italic, headings,etc. I’m sure this may get added in the future, but for now it’s not available. I saw somewhere that a WYSIWYG field add-on was made, on Github, but not fully tested. I’m not comfortable using it on a production site so I didn’t test it for this write up.
No Featured Image when editing a post – The current implementation for front end posting and adding a featured image is pretty smooth. It works great. The issue is when editing a post you don’t see the currently uploaded featured image in the file upload field. That means you have to reset it each time you edit the post. Not fun. There’s a nice filter to add the current featured image as the default for the field, but even doing this won’t show the actual image, just the file name in the field.
Taxonomies/Categories/Tags – There’s very limited native support for taxonomies when posting/editing posts in Caldera Forms. It’s easy to auto-populate a field with term names, but it requires lots of extra work/code to save the terms, especially when trying to use the same form for new posts and editing existing posts.
The fun part – Let’s Build A Form!
Make sure you have Caldera Forms and Caldera Custom Fields installed.
Let’s create a simple form with 4 total elements.
- Title – Single Line Text field
- Content – Paragraph Text field
- Save – Submit button field
- Editing Post ID – Hidden field to $_GET the post ID we want to edit
The first 3 are pretty obvious, I’ll leave them to you. The hidden field is tricky. We’re going to be adding a link on each existing post that adds a link to the edit post form with a query arg that includes the post ID. This is pretty basic, but we need some custom code (custom shortcode) that does some safety checks to make sure the logged in user is the author of the post they are trying to edit.
Form Processors
Just over to the Processors tab in Caldera Forms.
Save as Post Type processor
- Click the “Add Processor” button and choose “Custom Fields: Save as Post Type”
- Set your post type and post status (publish, draft, {custom status here}, etc)
- Set Post ID to “{get:post_id}” without the quotes
- Set your Title/Content fields
The {get:*} magic tag allows Caldera Forms to use a specific query arg value to process the form. Our code later on will add the post_id query arg/value for the form to process.
Redirect processor
- Click the “Add Processor” button and choose “Redirect”
- Set URL to “{post_type:permalink}” without the quotes
- Set Redirect Message to whatever you want. We won’t be using this here since we’re not going to save with Ajax
At this point, it may be smart to save the form if you haven’t already. 😉
Form General Settings
At the top of the Caldera form dashboard, let’s edit the General Settings. The most important settings here are making sure we don’t save via Ajax and making sure we’re not saving (form) entries.
- Name the form “Edit Post”. You can change this, but you’ll have to alter the code below with your new name.
- Set “Capture Entries” to “Disabled”
- Make sure “Ajax Submissions” is unchecked. We want to force a page reload after saving so our redirect processor fires during that process. It will work with Ajax, but you’ll get an unnecessary flash on the page after ajax is done processing. This is not necessary since will be redirecting/reloading a page anyway.
Even More Fun – Let’s Code
First, create a WordPress page called “Edit Post”. You can change the name later, but you’ll have to change the code below as well.
Custom Shortcode
We need to write some code to make the experience much smoother and safer.
Let’s create a shortcode to display the form. We could just use the Caldera shortcode, but we want to do some custom checking to make sure the currently logged in user is the author of the post they are trying to edit.
This following code creates an [edit_post] shortcode we can put on any page.
Custom ‘Edit Post’ link(s)
I’m giving you 2 different options for adding these front end edit post links. The first is a standalone link before the post content, the second is a filter on the native WordPress edit link. They both work fine, it’s just a preference which you like better.
Standalone Edit Post link
I started with a nice helper function to check if the currently logged in user is the author of the post we’re trying to edit.
Now, our filter on the_content to display the edit post link before our content post’s content.
This filter adds a custom ‘Edit Post’ link on posts the logged in user has authored. The link also adds ?post_id=123 query arg to the end of the /edit-post/ page URL. This is the post ID that allows the form to know which post to edit.
I also made this function really easy to add your own custom post types as well. If your form is meant to edit a custom post type, just use that post type name in place of the ones in the current array below.
WordPress Edit Post link filter
This filter adds the same link as the above code, but uses the default WP edit posts link (displayed in different locations in different themes, if displayed at all). This filter also alters the WP toolbar Edit Post link.
Once you decide on one of these methods, you will see a link on archives and single posts for the post types you’ve set.
Add shortcode to your page
The last step is to add our custom [edit_post] shortcode to the ‘Edit Post’ page.
That’s it, edit your posts on the front end!
That’s all there is too it. Authors will now be able to edit their posts on the front end, and access will be restricted if they try to edit other posts, or if a none author tries to do anything tricky.
Let me know in the comments how it works for you…
Hi Jiv ;
Thanks a lot for this great information , I’m kinda still beginner in WordPress , so i don’t get it where to put the code , is it in “edit post” page in text , do i have to download a plugin that support PHP ? and where to put other codes? ,is it in the same place just copy and paste?
best regards
Hmzeh
The shortcode should go on a page with a slug of /edit-post/.
The rest of the code can go in functions.php or a custom plugin (Pluginception could help here).
Thanks!
works for me , thanks Jiv
hi mike this is my first visit here its a great article on Caldera Form, I was searching for the Information thanks hey out of the box question can you tell me how to change font size in genesis is it in Parent or child theme If you have the blue prints can you forward me on my email If you get time thanks a lot for your good work
Hi Rohit, you should never edit the parent Genesis theme. Always make changes in the child theme or a custom plugin. Thanks for stopping by!
This is great! Thanks so much!
In the screenshot showing the hidden field in the form, it shows a Visibility field, I don’t see that in my pod.
My only problem is that my pod is an ACT, not a CPT…so a lot of this won’t apply…
any suggestions for modifications for a noob to Pods but not to WordPress? I know it has to do with the url setup…I have watched hours of “POD”casts about Pods…but just don’t quite have my head wrapped around it yet…
Thanks in advance…
Hey Doris, are you trying to use Caldera Forms to create new content (via Pods)? Not really sure I can help at this point, posting to ACT’s is totally different then to CPT’s. Pods has it’s own front end posting stuff built in though, but I haven’t played with it much.
Yes, I am using Pods. It seems I had assumed that Caldera Forms was just for Pods, but I realize now that it is for just about anything WordPress related. I thought that Caldera Forms was that built in stuff you commented…Thanks!!!
Mike,
This is great!
It just works, only one thing is puzzling me. Why won’t the form not disappear after a succesfull save. It now stays on the page.
Thanks!
When editing your form, go to General Settings. There is an option to ‘Hide form after submission’ or something like that.
This visual editor works very well for Caldera Forms.
https://github.com/Desertsnowman/cf-visual-editor
Hey thanks Luke! I actually tested that one when I was playing around. It’s decent, but IMO it still can’t be a true WP front end editor without the Add Media buttons that go with it. But that plugin certainly helps for regular text enhancements.
Caldera was my last hope after trying almost every other form builder on the market that I can find – excluding those that use woocommerce to take payments – woocommerce is just so damn slow and in any event can’t be used on a single page register-create post-make payment form.
But it is just so flakey it’s beyond belief. At random points throughout the day, whilst trying to create a form for the above, I have found myself (a) unable to publish test posts because I am asked first to enter a url (b) found that after submitting, posts have simply vanished into the ether and, more importantly (c) been unable to save and use a taxonomy. What the hell is the use of creating custom post types if you can’t use the taxonomies you created or if you don’t know if the posts will ever get saved or not? It’s absurd.
I cannot for the life of me see how you can justify promoting it, no matter how much you are paid for these reviews.
First off, definitely not paid for reviews. I post about what I use and what I like. I’ve never had those issues with Caldera, or WooCommerce for that matter. Caldera was(is) the easiest of all the form builders (IMO) for creating posts on the front end. All of them work well though (Gravity/Ninja/Formidable), but the UI of Caldera just felt the most natural for me.
Not sure what you mean by “save and use the taxonomies you created”. I create a post and the taxonomy term I select is what’s assigned to the newly created post when i check in the Dashboard.
No it is possible to add a media button to the WP editor field type for Caldera Forms
https://wordpress.org/support/topic/adding-tinymce-to-a-calderaforms-textfield
wp_editor( $field_value, $field_id, array(
‘media_buttons’ => true,
‘textarea_name’ => $field_name
)
That thread links to the same plugin from David Cramer that I linked to above. Simply using your code will apparently render an editor, but won’t save the data. Can you verify you have it working? Either way, I’d feel much better about WP Editor field in core Caldera. Sadly, this has been a bit of a pain point for me on some projects, enough for me to bail on Caldera.
Mike, thanks for this! I’m trying to implement this process on a survey site I’m developing and I’m a bit confused.
I’m using a caldera form as a survey and it’s currently set up to create posts upon the survey suvlbmission. Each form field is converted to a custom field within the newly created post.
My question is how do I get your ‘Edit Post’ page to display the custom fields in that post? Do I create a duplicate survey form?
Any help would be greatly appreciated!
Hey Jim sorry for the slow reply, missed this one.
Displaying custom field data in a post is totally separate from the form. You want to look into the get_post_meta() function in WordPress. That’s how you get specific field data so you can display it.
Thanks for your reply! I certainly understand how to output custom field values with get_post_meta(). I guess I was hoping that I could pull the current post’s custom fields into form fields in the “Edit Post” page. Essentially, I’d like to use your solution, but edit custom fields rather than the standard Title, Content, and Featured Image. Do you know if this is possible?
Thank you for the tutorial. It is working great.
I have a small issue, whenever I edit a post, it changes the publish date too. Are there any possibilities to keep the published date intact as WordPress normally do and adding a modified date?
I haven’t seen that happen before, not sure what the issue is. Last time I did this my publish date stays in tact.
Hi Jive,
Thank you very much for this great article! I have added your php code ( all the codes except the last one, right after each other) using Pluginception and the code is running. When I submit the form, it redirects to :
http://stemcell.staging.wpengine.com/caldera_form/post_type:permalink?
When I am logged in to the website and I choose one of the posts, I can see the [Edit Post] hyper link and it leads me to http://stemcell.staging.wpengine.com/edit-post/?post_id=…. but it is empty and I can not see the fields to edit them.
I have Caldera Forms version 1.5.0.5 and Caldera Custom Fields version 2.1.1 installed.
Thanks,
Sara
Hi,
Yes, i manage to implement this edit function to my form, but not completely.
I can edit the post, but only title. Form is not getting category and contents of post.
After submission, those are cleaned, if i do not add them again.
The purpose is, i assume, that there can be edit previous values, instead of writing whole post again to content-field.
I’m missing one feature more to this. Delete posts also.
For now, i use ugly frontier-post plugin, what handles all these functions. But i like to move on to caldera forms, if possible.
I would like to know how to make a list of the pages that an author owns with edit links dynamically using Caldera Forms. This is the only thing that is keeping me from committing to it!
You could build a list like this pretty easily with WP_Query and set the author as the current logged in user.
Hi Mike!
Thanks for your efforts! Suited my site just perfect. I’ve managed to edit title and content in my posts, but when I try to edit the post photo nothing happens if I’ve chosen the “Advanced File Uploader”-field in the form. Then the original picture stays the same. With the normal “File”-field all is ok. Any ideas about what causes this?
Keep up the good work! 🙂
regards, Johan, Sweden
Hello, when I use the Checkbox field, the checkbox itself does not show, so it is imposible to complete the form.
Could anyone give me a help with this?
Thank you in advance,
António
Hi,
This works nicely but i appear to have one issue. once the author of the post has made edits they no longer see the stand alone [Edit Post] link until the post has been updated in the backend of the site… The changes are made to the post no problem, but it is almost as if it loses the author information.
I have the post status set to publish in the ‘Save as post type’ processor.
Thanks,
MAx