The Edit Site Options widget enables users to edit the WordPress Site Options from the frontend of a WordPress website, without needing to interact with the WordPress dashboard. The page to host the form is built in Elementor.
Important: By default a user needs to be logged in and carry the “Administrator” role to see this form. This can be changed, however, in the Permissions settings of this widget.
Adding the Widget
Create a new page to host the form, then click “Edit with Elementor” to open the Elementor page builder. Search for “Site Options Form” in the sidebar, and drag the widget into the page.
To learn more about using the Elementor page builder click here.
This section defines the fields which are shown within the form itself. This is where you actually define what data the end user can access.
The Form Title is the title for the entire form. By default it will be called “Add Product”, but it can be left blank if you wish.
By default, the form will have the Product Title, Price, and Main Image fields activated, with all three set to Required. 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.
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.
We have the standard Label, Instruction etc. Additionally, there is an option to set the field as Read Only. This will submit the data as has been defined by the default value, however the end user will not be able to modify it at all.
This field has only the standard options of Label, Instruction, Hidden, etc.
Here we have several options for additional actions to take place outside the form itself.
You can define where the page should redirect to after submitting. By default it will reload the current page (i.e. the form itself). We can choose to redirect to a different page by selecting Custom URL.
You can also define a custom success message, or choose no success message, whatever suits your needs.
This is where we limit which kinds of users can access the form. It is very important to configure this correctly, as otherwise your users might not be able to see the form at all!
By default, only administrators can see the form. If you want to allow other users to access it, you need to add them. You can choose Roles under the Select By Role option, or add specific users under the Select By User option.
If you would like to form to be visible to anyone, set the Who Can See This option to All Users.
Note that the different role options work via OR logic. This means if a given user satisfies any of the conditions they will be able to access the form. For example, if you select a specific user and the Administrator role then that user will have access even if they are not an Administrator.
Here you can customize display options across all the fields. This includes hiding all the field labels, hiding the red asterisk for required fields, and moving the instructions to below the field instead of above.
This will hide the entire form in a button which then will pop open in a modal window when clicked. This can be useful if you want to build multiple forms into the same page.
That’s it! Now your users can edit the site options from the front end!