[Resolved] How to edit posts with a front-end form if using Elementor templates?

[Author]

Posts

[Nigel]

The normal workflow for editing posts with front-end forms doesn't work very well if using Elementor templates for the type of posts that you want to edit.

Either the edit form doesn't appear on the front end at all, or the normal output of the template is shown and the edit form only replaces part of the output (where the post content would normally appear).

How can you edit posts on the front end where only the edit form appears in place of the normal output?

[Nigel]

The problem

Here's a recap of the normal workflow, and an explanation of why it doesn't work when using Elementor templates (or other page builders that offer templates) to display single posts.

With Toolset, you create an edit form and then add that form to an unassigned Content Template (required to provide context for the form). Then, in the Content Template assigned to a post type (i.e. used to display single posts of that type) you insert a shortcode to generate the link to edit the post.

The URL of that link points to the same post (the current post, to be edited), but adds a URL parameter content-template-id which passes the ID of the content template containing the edit form. When the page loads Toolset intervenes to output the content from the template specified by the url parameter instead of the normal template.

If using Elementor templates this fails, because it is Elementor not Toolset controlling what is displayed, and the content-template-id URL parameter is ignored.

The solution

So an alternative is to add the edit form directly to a page. In that context the edit form doesn't know which post to edit, so we use a custom URL parameter to tell it. We can name the parameter what we want, so let's call it editID.

In the Elementor template for the single posts where we want the Edit link to appear, we will construct a dynamic link using Toolset shortcodes inserted into an Elementor Text module, like so:

<a href="[wpv-post-url item='123']?editID=[wpv-post-id]">Edit [wpv-post-title]</a>

The wpv-post-url will output the URL of the page containing the edit form (we use the item attribute to specify the ID of the post or page we want to output the URL of, in the example the page has an ID of 123), and we append a URL parameter editID whose value is provided by the wpv-post-id shortcode (the ID of the current post, the one we want to edit).

Next, where the edit form is inserted on a page, it needs to know to listen for the URL parameter editID to determine which post to edit. The wpv-search-term shortcode will output the value of a specified URL parameter, and that can be used to provide the value for the post attribute of the cred_form shortcode that is used to insert the form.

The form needs to be inserted with a shortcode, so don't use the Form block (if editing the page with the block editor use the Fields and Text block, in HTML mode) or the Elementor Toolset Forms module (use the Text module).

[cred_form form="name-of-edit-form" post="[wpv-search-term param='editID']"]

When visiting a post the resulting edit link should link to the page containing the edit form with an editID URL parameter, and when clicking the link that page should load with the edit form displayed, editing the content of the post you just left.

Links
https://toolset.com/course-lesson/front-end-forms-for-editing-content/
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-url
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-id
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-post-title
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#wpv-search-term
https://toolset.com/documentation/programmer-reference/forms/cred-shortcodes/#cred_form