Adding Bootstrap Styles to the Comment Moderation Message in WordPress

Hi Ashley! I love how you’ve styled the “your comment is awaiting moderation” with a Bootstrap alert—it looks great! I was wondering if there is anyway you could share the code that allows you to do that? Thank you! 🙂

Thank you! I love adding little touches like that to my blog. 🙂 For those of you who haven’t seen it, my moderation message looks a bit like this:

The easy way is to just use custom CSS

The easiest way to implement this is to use custom CSS to make the message look like Bootstrap’s styles. So you don’t actually apply the Bootstrap class names (which are alert alert-warning by the way). Instead, you target the message in CSS and add your own code to replicate the Bootstrap styling.

An example might be:

.comment-awaiting-moderation {
	background: #fcf8e3;
	border: 1px solid #faebcc;
	border-radius: 4px;
	color: #8a6d3b;
	margin-bottom: 20px;
	padding: 15px;
	text-align: center;
}

That’s the exact same CSS that the Bootstrap classes use to style warning alerts. You can add this custom CSS using a plugin like Simple Custom CSS.

Note: You may have to use your browser’s Inspect Element tool to get the exact class name of your moderation message.

The hard way is to code your own comment layout!

There is another method. This is the method I use on my own blog. But it requires a lot more coding, and if you’re using a pre-made theme then you’ll definitely want to create a child theme so your changes don’t get lost.

This method will also only work if your theme is built on Bootstrap.

I suggest you back up any theme files before you begin in case you make a mistake with your code. I also suggest you make these changes through FTP instead of the WordPress Editor.

Step 1: Modify comments.php

Open up your comments.php file from your theme. Then you need to do a search for the wp_list_comments() function. It may look something like this:

wp_list_comments( array(
	'style'      => 'ol',
	'short_ping' => true,
	'callback'   => 'post_comment_layout'
) );

Yours may have more or less parameters.

We need to change the value of 'callback'. So replace 'post_comment_layout' (or whatever is there for you) with 'my_custom_comment_layout'.

If your function doesn’t have a callback, then you need to add one like this:

'callback' => 'my_custom_comment_layout'

Make sure there’s a comma at the end of the previous line (like in my first example). Otherwise you could get a PHP error or white screen!

Basically we’re telling WordPress what layout to use for comments. In this case above, I’m telling it to use a function called my_custom_comment_layout. But that function doesn’t exist yet, so the next step is to create that function.

Create your comment callback

We’re going to put your comment callback function inside your theme’s functions.php file.

You can see a sample comment layout inside the codex entry for wp_list_comments() so let’s use that as a starting point. Here it is:

function my_custom_comment_layout($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
	extract($args, EXTR_SKIP);

	if ( 'div' == $args['style'] ) {
		$tag = 'div';
		$add_below = 'comment';
	} else {
		$tag = 'li';
		$add_below = 'div-comment';
	}
?>
	<<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
	<?php if ( 'div' != $args['style'] ) : ?>
	<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
	<?php endif; ?>
	<div class="comment-author vcard">
	<?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
	<?php printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
	</div>
	<?php if ( $comment->comment_approved == '0' ) : ?>
		<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
		<br />
	<?php endif; ?>

	<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
		<?php
			/* translators: 1: date, 2: time */
			printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
		?>
	</div>

	<?php comment_text(); ?>

	<div class="reply">
	<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
	</div>
	<?php if ( 'div' != $args['style'] ) : ?>
	</div>
	<?php endif; ?>
<?php
}

That’s what you should put in your functions.php file. But there’s something we need to edit first—the moderation message!

If you look about halfway down, you’ll see the moderation message here:

<?php if ( $comment->comment_approved == '0' ) : ?>
	<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
	<br />
<?php endif; ?>

In this example, the moderation message is just wrapped in <em> tags. We don’t want that! Let’s change that whole segment so it looks like this instead:

<?php if ( $comment->comment_approved == '0' ) : ?>
	<div class="comment-awaiting-moderation alert alert-warning"><?php _e( 'Your comment is awaiting moderation.' ); ?></div>
<?php endif; ?>

I’ve changed the <em> tags to <div> tags and added the Bootstrap classes alert alert-warning. That’s how the alert style will be applied.

There are more tweaks you can do to the comment layout to incorporate more Bootstrap classes, but that goes beyond the scope of this tutorial today. 🙂 But all the comment markup is inside that my_custom_comment_layout() function, so feel free to add more classes and rearrange the markup as you see fit.

Save, and you’re done!

Make sure you’ve saved your comments.php file with the new callback, and also saved your functions.php file with the layout function itself.

Have you ever customized your theme’s comment layout like this?