This article will detail the steps needed to use the Trash Button widget in the ACF Frontend plugin for Elementor. The Trash Button widget enables a user to delete a post they have created from the frontend of your website.
Important: A user needs to be logged in to delete a post. A user can only delete a post they have created.
The following tools or plugins need to be installed for this example. All these plugins can be installed or downloaded from the WordPress Plugin Repository and can be accessed using the WordPress MENU and then clicking on PLUGINS and then the ADD NEW button at the top of the page.
- Elementor Free or Pro Edition
- ACF (Advanced Custom Field Plugin) Free or Pro Edition
- ACF Frontend Plugin
- Elementor Custom Skin (If you do not have Elementor Pro)
In this example on how to use the Trash Button widget, we will be adding the Trash Button widget from ACF Frontend to our Single Post Template used for our Standard WordPress Posts and then configure the appropriate setting within the Trash Button widget to Delete a post from the frontend of our website using Elementor Page Builder.
In order to proceed ensure you have the following already setup.
- A Single Post Template created using the Elementor Theme Builder or Elementor Custom Skin plugin for your post type.
- Login to the WordPress Dashboard
- On the WordPress Menu goto Templates->Theme Builder. Locate your Single Post Template and click the Edit with Elementor text link.
- Once the Template has finished loading, click on the Search Field of the Elementor widgets list and type Trash Button.
- Click and Drag the Trash Button widget onto the page on the right anywhere you would like the Delete button to appear. In our case, we will be placing it at the bottom of the page below the Post Content.
- Click on the Trash Button drop down to expand its settings.
- In the Trash Button Setting Panel, you can make the appropriate changes for your solution like changing the button text and adding an icon. In our case, we will be leaving most of the settings as is except for:
- We will add an icon next to the Delete text for our button
- Turn the Force delete option to No. This will place any delete posts in the trash or bin of your WordPress custom post type for later recovery. Setting the Force Delete Option to Yes will permanently Delete the post with no option for Recovery.
- In the Redirect After Delete setting, we will direct the Author back to our blog post after deletion which is a much cleaner method. Not redirecting the user will cause a 404 Not Found error on the page after the post is deleted.
- Next, click the Permissions Dropdown to expand its settings panel. We will only make one minor change and leave all the other settings as is:
- In our case under the Dynamic Selection Field, we will set the option to Post Author which will allow only the author to delete posts that they themselves have created.
- Next, click the Green UPDATE button at the bottom of your page to save your settings.
- Once the settings have been saved you can return back to your WordPress Dashboard.
- In the WordPress Dashboard, view your Blog Posts Archive page by going to pages and hovering your mouse over the Blog Page title and clicking the View text link.
- A new tab will load in your browser and all the posts of your website will be displayed. In this example, we have a few test posts we created earlier and displayed them on the page using the Post Archive widget.
- Click on one of the posts to show the full post content. Then scroll down to the bottom of the page to access the Delete button. In this case, the button is Red as its styling is inherited from our theme so it may look different on your page. You will also need to be logged in as the author of the post to edit or delete it.
- Click the Delete button to delete the post.
- Once you click the delete button a Warning Message will pop up asking you to confirm. Click OK to delete the post or Cancel to go back to the post.
- The post has now been removed from the website frontend, and based on the Force Delete setting you set earlier will either be placed in the Trash or Bin of your custom post type or completely deleted from the website.
- If you set the Redirect after Delete option, the post author will be redirected to the link you set up. In our case, we redirected the author back to the Blog archive page.