How to Hide “Edit with Elementor” from the WordPress Admin Toolbar
In a previous tutorial, we showed how to hide the “Edit with Elementor” button for specific users. However, one customer pointed out that the tutorial only works for users in the backend of WordPress. They also wanted to hide “Edit with Elementor” link on the WordPress frontend. This is possible with the Frontend Features option in PublishPress Capabilities.
This screenshot shows the “Edit with Elementor” button that we will hide:
With the Frontend Features option, you can hide CSS elements or add new CSS to your website. What sets this feature apart is that you can choose to target specific groups of users. This means you can customize the CSS for different user roles, such as logged-in or logged-out users.
In this post, I want to specifically hide “Edit with Elementor” from the WordPress admin toolbar for the author user role.
So whenever the author visits the URL, they will not be able to edit with Elementor because the button on the toolbar has been hidden.
This is a common request from our customers where they have set up some custom fields on the editing page so their author doesn't have to go to the Elementor editor.
Hide The “Edit with Elementor” Button from The Toolbar
- Make sure you have PublishPress Capabilities installed.
- Go to “Capabilities” then “Frontend Features” in your WordPress admin menu.
- Select the role on the top left dropdown.
- Enter a “Title”.
- Make sure that “Hide IDs or Classes” is selected.
- We are going to fill in the ID from the Elementor button. You can find this using the inspect tools in your browser, as in this screenshow below.
- As you can see from the image above, the ID is: #wp-admin-bar-elementor_edit_page. Enter this into the “Features” box.
- Click “Add New”.
- After you click new, there will be new item showing below.
- Make sure to the box has a checkmark and click “Save Changes”.
That's it. Now you can test the author role using the User Testing option in PublishPress Capabilities. You will no longer see the “Edit with Elementor” button on the toolbar when you visiting the page.
More with PublishPress Capabilities PRO
Frontend Features available for both the free and Pro version of PublishPress Capabilities. In the Pro version, you will be able to click the decide whether your CSS is for the whole site or only for selected pages and posts. You will also receive priority support from our team in case you have any questions.
