javascript - Front end post delete error confirmation and success message

admin管理员组

文章数量:1122846

I am allowing Authors to delete their posts on the front end as they cant access the admin. I have this working, but what bothers me is the standard javascript onclick alert message - is there are way to style a js alert? From my understanding, no. Or to use jQuery for the message and use a modal window that I can style?

Also, after deletion the user is returned to the same page which is good, but there is no confirmation message - I'd like to have a message saying "Post successfully deleted". I just think these touches would provide a better user experience. Here's the code I am using:

function wp_delete_post_link($link = 'Delete This', $before = '', $after = '') {
global $post;
if ( $post->post_type == 'post' ) {
if ( !current_user_can( 'edit_page', $post->ID ) )
  return;
} else {
if ( !current_user_can( 'edit_post', $post->ID ) )
  return;
}
$message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
$delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
$htmllink = "<a href='" . $delLink . "' onclick = \"if ( confirm('".$message."' ) ) { execute(); return true; } return false;\"/>".$link."</a>";
echo $before . $htmllink . $after;
$redirect = add_query_arg( 'success', 'true', $redirect );
}

<?php wp_delete_post_link('Delete your Entry', '<p><em>Delete your Entry: </em>', '</p>'); ?>

And was added to the author.php where the post delete button is

 <?php if ( ! empty( $_GET['success'] ) ) {
                            echo 'Wahey!';
                            }
                        ?>  

I am allowing Authors to delete their posts on the front end as they cant access the admin. I have this working, but what bothers me is the standard javascript onclick alert message - is there are way to style a js alert? From my understanding, no. Or to use jQuery for the message and use a modal window that I can style?

Also, after deletion the user is returned to the same page which is good, but there is no confirmation message - I'd like to have a message saying "Post successfully deleted". I just think these touches would provide a better user experience. Here's the code I am using:

function wp_delete_post_link($link = 'Delete This', $before = '', $after = '') {
global $post;
if ( $post->post_type == 'post' ) {
if ( !current_user_can( 'edit_page', $post->ID ) )
  return;
} else {
if ( !current_user_can( 'edit_post', $post->ID ) )
  return;
}
$message = "Are you sure you want to delete ".get_the_title($post->ID)." ?";
$delLink = wp_nonce_url( get_bloginfo('url') . "/wp-admin/post.php?action=delete&post=" . $post->ID, 'delete-post_' . $post->ID);
$htmllink = "<a href='" . $delLink . "' onclick = \"if ( confirm('".$message."' ) ) { execute(); return true; } return false;\"/>".$link."</a>";
echo $before . $htmllink . $after;
$redirect = add_query_arg( 'success', 'true', $redirect );
}

<?php wp_delete_post_link('Delete your Entry', '<p><em>Delete your Entry: </em>', '</p>'); ?>

And was added to the author.php where the post delete button is

 <?php if ( ! empty( $_GET['success'] ) ) {
                            echo 'Wahey!';
                            }
                        ?>  

• posts
• javascript

Share Improve this question edited Oct 8, 2015 at 11:46 Coalition Partners asked Oct 6, 2015 at 7:57 Coalition PartnersCoalition Partners 533 bronze badges 1

• PS: the deleting is done on the front end by a user with the role of Author and they do not have access to wp-admin. – Coalition Partners Commented Oct 6, 2015 at 12:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

There are two questions here. For styling alerts/modals, that's a generic HTML/CSS question - check out these to get you started.

For the second, it depends what you're doing after the delete - are you redirecting back to the frontend, or staying in the admin? (I will update my answer following your response).

You shouldn't be reinventing the wheel - use the core function get_delete_post_link to get the delete URL. This will handle nonces and any future changes to core, if and when they occur.

Update: For your redirect, add a param that you can then check for on page load:

$redirect = add_query_arg( 'success', 'true', $redirect );

And then in your template file:

if ( ! empty( $_GET['success'] ) ) {
    echo 'Wahey!';
}

本文标签： javascriptFront end post delete error confirmation and success message