Using ACF to Delete Post From Frontend

• ashleynting

• February 16, 2024 at 5:19 pm

I’ve got my ACF-powered forms set up and working perfectly for adding a new post and editing an existing post, but am stuck on how to create the ability to delete a post from the front end. I’m reading this tutorial, but it’s not explaining where I’m supposed to be placing the first code snippet (5 lines) or the last code snippet (13 lines). I have my true/false field set up via ACF already (“delete_book”):

https://studiosimpati.co/developer-center/acf-form-delete-post/

I’ve put the second snippet (15 lines) into my theme functions.php, changed the post type to my desired post type, and changed the field retrieved to my “delete_book” field.

Can anyone suggest guidance from that point?

• John Huebner

• February 18, 2024 at 10:12 am

The first portion of the code in that example is added using custom JavaScript.

The second portion of code goes in your functions.php file.

• ashleynting

• February 19, 2024 at 2:17 pm

Thanks for the link! I will definitely use that resource in placing the custom js in the 3rd code snippet 🙂

I’m still confused about the first code snippet provided in the tutorial I originally linked, though. Where does this code go?

let editForms = $('.edit-proj-form form');
const deleteBtn = 'Delete this project';
editForms.each(function() {
$(this).append(deleteBtn);
});

• John Huebner

• February 19, 2024 at 2:29 pm

You are also missing the 3rd piece.

The first piece of code is JavaScript that adds a button to any form inside a element with a class of “edit-proj-form”

<div class="edit-proj-form">
   ACF form added here
</div>

Then at the bottom of the page you find a 2nd JS. This is called when the button is clicked to set a hidden true false field to true.

This depends on the previous discussion about adding a field to the field group that is hidden by CSS.

When the acf/save_post action runs it is looking for this field to be set to true and it it is it deletes the post.

• ashleynting

• February 19, 2024 at 2:36 pm

ETA: Just tested the below solution, no delete button :/

I’m confused, but maybe I’m partially correct here? Using the inline method of including js per the link you provided, I’ve got this in my functions.php, which is basically all 3 code pieces provided in the tutorial I originally linked:

add_filter('acf/save_post', 'delete_project');
function delete_project($post_id) {
$post_type = get_post_type($post_id);
// change to post type you want them to be able to delete
if ($post_type != 'post') {
return;
}
if (get_field('delete_post', $post_id)) {
$force_delete = false; // move to trash
// change above to true to permanently delete
wp_delete_post($post_id, $force_delete);
header("Refresh:0");
exit;
}
}

function my_acf_input_admin_footer() { 
?>
<script type="text/javascript">

let editForms = $('.edit-proj-form form');
const deleteBtn = 'Delete this post';
editForms.each(function() {
$(this).append(deleteBtn);
});

$(document).on('click', '.js-delete-proj', function() {
const confirmDelete = window.confirm('This will permanently delete the project. Are you certain you wish to proceed?');
const deleteCheck = $(this).siblings('.acf-form-fields').find('input[name="acf[delete_book]"]');
const submitDiv = $(this).siblings('.acf-form-submit')[0];
const submitBtn = $(submitDiv).find('.acf-button');
if (confirmDelete) {
deleteCheck.each(function() {
$(this).val(1);
});
submitBtn.click();
}
});

</script>
<?php      
}
add_action('acf/input/admin_footer', 'my_acf_input_admin_footer');

But am I understanding I now need to wrap the existing ACF edit post form I already have on my single post template in this div like so and then the delete post button will also appear?

<?php
if ( is_user_logged_in() && get_the_author_meta( 'ID' ) === get_current_user_id() )  { ?>
<details style="float:right;">
  <summary>Edit Details</summary>
<div class="edit-proj-form">
	
	
<?php acf_form(array(
        'field_groups' => array(182, 1031, 156, 710), // Used ID of the field groups here.
         'post_title' => true, // This will show the title filed
         'post_content' => false, // This will show the content field
        'submit_value'  => __('Update')
)); ?>	
</div>
</details> 
<?php }	?>