2

I am using wordpress 3.8. I am using comment_form(); I need to display a success message on successfully posted comment on blog. How to do this?

2

Without Ajax or plugins. Add to function.php:

add_action( 'set_comment_cookies', function( $comment, $user ) {
    setcookie( 'ta_comment_wait_approval', '1' );
}, 10, 2 );

add_action( 'init', function() {
    if( $_COOKIE['ta_comment_wait_approval'] === '1' ) {
        setcookie( 'ta_comment_wait_approval', null, time() - 3600, '/' );
        add_action( 'comment_form_before', function() {
            echo "<p id='wait_approval' style='padding-top: 40px;'><strong>Your comment has been sent successfully.</strong></p>";
        });
    }
});

add_filter( 'comment_post_redirect', function( $location, $comment ) {
    $location = get_permalink( $comment->comment_post_ID ) . '#wait_approval';
    return $location;
}, 10, 2 );
1

Try this: http://wordpress.org/plugins/wp-ajaxify-comments/

or (manually)

Add the following lines of code to your theme’s functions.php file

    add_action('init', 'wdp_ajaxcomments_load_js', 10);  
function wdp_ajaxcomments_load_js(){  
        wp_enqueue_script('ajaxValidate', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/jquery.validate.min.js', array('jquery'), '1.5.5');  
        wp_enqueue_script('ajaxcomments', get_stylesheet_directory_uri().'/wdp-ajaxed-comments/js/ajax-comments.js',    array('jquery', 'ajaxValidate'), '1.1');  
}  
add_action('comment_post', 'wdp_ajaxcomments_stop_for_ajax',20, 2);  
function wdp_ajaxcomments_stop_for_ajax($comment_ID, $comment_status){  
    if(!emptyempty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){  
    //If AJAX Request Then  
        switch($comment_status){  
            case '0':  
                //notify moderator of unapproved comment  
                wp_notify_moderator($comment_ID);  
            case '1': //Approved comment  
                echo "success";  
                $commentdata=&get_comment($comment_ID, ARRAY_A);  
                $post=&get_post($commentdata['comment_post_ID']); //Notify post author of comment  
                if ( get_option('comments_notify') && $commentdata['comment_approved'] && $post->post_author != $commentdata['user_ID'] )  
                    wp_notify_postauthor($comment_ID, $commentdata['comment_type']);  
                break;  
            default:  
                echo "error";  
        }     
        exit;  
    }  
}  

You will need to add two JavaScript files jquery.validate.min.js and ajax-comments.js in the js directory of your theme. http://bassistance.de/jquery-plugins/jquery-plugin-validation/

and the ajax-comments.js is:

jQuery('document').ready(function($){  
    var commentform=$('form[action$=wp-comments-post.php]');  
    commentform.prepend('<div id="wdpajax-info" ></div>');  
    var infodiv=$('#wdpajax-info');  
    commentform.validate({  
        submitHandler: function(form){  
            //serialize and store form data in a variable  
            var formdata=commentform.serialize();  
            //Add a status message  
            infodiv.html('<p>Processing...</p>');  
            //Extract action URL from commentform  
            var formurl=commentform.attr('action');  
            //Post Form with data  
            $.ajax({  
                type: 'post',  
                url: formurl,  
                data: formdata,  
                error: function(XMLHttpRequest, textStatus, errorThrown){  
                    infodiv.html('<p class="wdpajax-error" >You might have left one of the fields blank.</p>');  
                },  
                success: function(data, textStatus){  
                    if(data=="success")  
                        infodiv.html('<p class="wdpajax-success" >Thanks for your comment. We appreciate your response.</p>');  
                    else  
                        infodiv.html('<p class="wdpajax-error" >Error in processing your form.</p>');  
                    commentform.find('textarea[name=comment]').val('');  
                }  
            });  
        }  
    });  
});  

Customize the style of messages

.wdpajax-error{   
    border:1px solid #f9d9c9;   
    padding:5px;   
    color:#ff3311;   
}  
.wdpajax-success{   
    border:1px solid #339933;   
    padding:5px;   
    color:#339933;   
}  
label.error{   
    float:none !important;   
    padding-left:5px;   
    color:#ff3311;   
} 

Open your theme’s comments.php and add some CSS classes to comment form input fields as described: To comment author name input, add class="required" To comment author email input, add class="required email" To comment author URL input, add class="url" To the comment textarea, add class="required"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.