The Edit Post Widget

The Edit Post Widget

Required plugins: Elementor Pro, Advanced Custom Fields (free), and ACF Frontend (free)

The Edit Post Form widget enables users to edit existing posts from the frontend of a WordPress website, without needing to interact with the WordPress dashboard.

Important: By default a user needs to be logged in and carry the “administrator” role to edit posts. This can be changed, however, in the Permissions settings of this widget.

Overview

By adding the widget to a Single Post Template in Elementor we are able to have it appear automatically on all posts. This will display a form to allow your users to edit the post currently being viewed. 

Please note that custom templates are built using the Elementor Theme Builder, which is only available in Elementor Pro.

Adding the Widget

If you don’t already have a template for your posts, you need to create one. To create a new template click Add New under Templates in the WordPress dashboard. Choose Single Post to create a template for your posts. 

You can choose to insert an existing template to edit or start from scratch. You can learn more about templates in Elementor’s official tutorial here.

Navigate to the template’s edit page by clicking Edit with Elementor, and drag in the Edit Post Widget. This can be found in the Frontend Forms section or by searching for the “Edit Post” widget.

Form Fields

The structure of the form itself is highly customizable. All the options from the New Post Form are available. 

By default, the form will include the Title, Content, Featured Image, and Categories fields, but the form can be wholly customized to whatever you need. 

Default Fields
By default, the form will have the Title, Content, Categories, and Featured Image fields activated. These can be customized to whatever fits your needs.

Adding and Removing Fields
To add more fields simply click the Add Item button. The form on your page will change to reflect these new fields. Fields can also be deleted by clicking the X.

ACF Fields
You can add ACF fields by clicking Add Item and changing the field type to ACF Fields or ACF Fields Groups and then selecting the desired fields or groups.

Form Title
The Form Title is the title for the entire form. By default it will be called “Add Post”, but it can be left blank if you wish.

Submit Button
At the very bottom we can edit the text displayed on the Submit button.

Basic Field Attributes

The Field Type defines the type of field being edited. Changing this will affect the other available options. 

All the field types have options which can be changed to customize both the content and the style of the field. 

  • Label – This is shown above the field’s text box. This can be toggled to be displayed or hidden according to your needs.
  • Instruction – This is shown in smaller text under the Label.
  • Required – Indicates if the field can be left blank.
  • Hidden – This will hide the field. It is useful if the field is being used with a default value. 
    Warning: do not hide a required field if it does not have a default value!
  • Disabled – This will prevent users from editing the field and will not send the data.

Field Specific Options

As mentioned above, there are many options which are unique to a specific field type. We will cover some of the options for the default fields. There will be more articles going in depth to each field’s options.

Post Title
The Title Field is a simple text box. We have the standard Label, Instruction etc. Additionally, there is an option for adding Placeholder text, indicating what type of content is expected from the user.

Content
The Content Field is also a text box. You can customize the text box type, it can be a Text Area or a Text Editor.

Featured Image
This allows your users to add a featured image to the post. In addition to the basic attributes, you can add a default image if you wish.

Categories
This allows the users to select the category for the post, using the standard “Category” field of WordPress posts.

We can restrict the user to a single choice or allow multiple selections.

The single choice options are radio buttons or select, and the multi-choice options include checkboxes or multi-select.

Additionally, we have the option to allow the user to add more categories right from the form, with the Add Term setting.

Actions

Here we have several options for additional actions to take place outside the form itself. 

You can customize where the page redirects to after submitting. By default it will stay on the current page. This will allow the user to instantly see their edits in the actual post.  

Additionally, you can redirect them to a different page of your choosing, or even dynamically redirect to the page which linked to this one. 

By default, there is a success message which is displayed after the form is submitted. This can be customized, and can even include dynamic data. For example, you can use the [post:title] shortcode to to display the current post’s title as part of the message. 

If you would prefer no success message it can be easily hidden by toggling off the Show Success Message button.

Post

Here you can configure the status the post will have after editing. 

The post can retain its current status by leaving this blank.

You can also have it be published upon submission by choosing Published, or set to Pending Review if you would like to approve them. 

You can also choose Draft or Private if those would fit your needs better.

Permissions

This is where we limit which kinds of users can access the page. It is very important to configure this correctly, as otherwise your users might not be able to see the form at all!

There is a message displayed to those who try to access the form without sufficient permissions. This is configured under the No Permissions Message option. The default is a simple text based message. 

You also have the option to use custom content with the full Text Editor, complete with formatting, images, and even shortcodes.

If you prefer no message then simply choose None.

By default, only administrators can see the form. If you want to allow other users to access it, you need to add them. There are several ways to do that.

First you can specify whether or not users need to be logged in to view the form, under the Who Can See This… option.

You can allow certain Roles to access the form under the Select By Role option. This allows you to add all Editors, for example.

You can also add specific users under the Select By User option. The users selected here will always be able to see the form.

If you would like the author of the post  to be able to edit his/her post, you will need to add that under the Dynamic Permissions option.

Appearance

By default the widget will display the form in the post page itself. 

If you would rather have the edit form be shown in a popup you can choose the Show in Modal option under the Modal Window tab. 

This will hide the form under an Edit button which will open in a popup over the existing post.

Saving the Template

When you finish designing the form, you will need to save the template. By limiting the template to specific pages or post types you can ensure the edit button is only shown on those types of posts or pages. 

If you want the edit button to appear on all posts then choose Include -> Posts -> All as the condition.

To see the conditions of a given template click the arrow next the the “Update” button and then click Display Conditions. To learn more about Display Conditions, see the official Elementor tutorial here.

Result

Here you can see the edit widget in action. It has been added using the Show in Modal Option so appears as a popup after clicking. 

The Edit Post Widget

Still stuck? 
Contact our support team here.

Get the free plugin and receive updates