How to Change Comment Parent ID in /wp-admin/ ?

The first thought that came to my mind is to add the comment parent field somewhere on the Edit comment page, here:

Edit Comment Page

But I changed my mind because when I look through comments, I need a fast way to change comment parents, I do not want to open another browser tab to do it! So, I choose this solution with AJAX and columns:

Change comment parent ID with jQuery ajax in WordPress admin area.

Let me show you how to implement it in 2 easy steps.

1. Columns in Comment Table

You can look at the separate tutorial about creating columns on the Comments page. But in the code below one of the columns will be with <input> field. Code is for functions.php.


// here we add the columns
add_filter( 'manage_edit-comments_columns', 'misha_add_comment_columns' );
function misha_add_comment_columns( $cols ){

	// previous columns + new columns + previous columns
	return array_slice( $cols, 0, 3, true ) 
	+ array( 'm_comment_id' => 'ID', 'm_parent_id' => 'Parent ID' )
	+ array_slice( $cols, 3, NULL, true );
	
}

// here we populate our new columns with data
add_action( 'manage_comments_custom_column', 'misha_fill_columns' );
function misha_fill_columns( $col ) {
	global $comment;
	switch ( $col ) :
		case 'm_comment_id' : {
			echo $comment->comment_ID;
			break;
		}
		case 'm_parent_id' : {
			echo '';
			break;
		}
	endswitch;
}

If you insert the code in the right place, the columns should appear on the Comments page. If not, check if they are turned on in Screen Options.

This is how to turn on comment columns in Screen Options.

2. Update Comment Parents with jQuery AJAX

The second and the last step. First of all, please look at this jQuery code:


jQuery(function($){
	// you can use another event more convenient for you
	$('.mchangeparent').blur(function(){
		var input = $(this),
		    parent_id = input.val(),
		    comment_id = input.attr('data-comment-id');
			
		$.ajax({
			type: 'POST',
			data: {
				action: 'mishachangeparentid', // part of wp_ajax_ action (in the next part of the code)
				parent_id: parent_id,
				// in case you will insert the jQuery code with admin_footer hook or so, consider using AJAX nonces, but you can pass it with wp_localize_script() as well
				// myajaxnonce : '',
				comment_id: comment_id
			},
			url: ajaxurl, // it is predefined in /wp-admin
			success: function(data){
				if ( data == true ) {
					// add checkbox
					input.after('').next().hide().fadeIn(300);
				}
			}
		});
	});
	
	// remove checkbox when we focus in this field again
	$('.mchangeparent').focus(function(){
		$(this).next().remove();
	});
});

I hope you know what to do with that jQuery code, but in case you don’t, here is the step by step guide for you:

  1. Create any JavaScript file in your theme directory, example: misha.js,
  2. Include the file with this code which should be inserted to the functions.php:
    
    add_action( 'admin_enqueue_scripts', 'misha_admin_js' );
    function misha_admin_js(){
    	wp_enqueue_script( 
    		'anyidhere', 
    		get_stylesheet_directory_uri() . '/misha.js', 
    		array('jquery')  
    	);
    }
    

And the last step – we have to process the AJAX request somehow. WordPress wp_ajax_ action hook will help us with it. If you’re not sure where to insert the below code, insert it to the functions.php.


add_action('wp_ajax_mishachangeparentid', 'misha_change_comment_parent');
// add_action('wp_ajax_{ACTION}', '{CALLBACK FUNCTION NAME}' ); 

function misha_change_comment_parent(){

	// if you're using ajax nonce
	// check_ajax_referer( 'anystring', 'myajaxnonce' );

	// if comment is updated, the function returns 1, if isn't - 0
	echo wp_update_comment( array(
		'comment_ID' => $_POST['comment_id'],
		'comment_parent' => $_POST['parent_id']
	) );

	die;

}

That’s all! 🎉

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter