Custom comment bubbles in the Customizr WordPress theme

Customizr comes with a default comment bubble using a font icon and displaying the number of comments next to each posts. (see below)

You might want to change this and add specific content and/or a custom style. This snippet will show you how to do it and get something like shown below :

PHP code

In the following example, I simply apply a filter to the core bubble rendering which adds the text “comment” (with a WP plural filter function __n).

add_filter('tc_bubble_comment' , 'my_custom_comment_buble');
function my_custom_comment_buble() {
	if ( 0 == get_comments_number() ) 
		return '';

	return sprintf('<span class="my-custom-bubble">%1$s %2$s</span>',
                                    get_comments_number(),
                                    sprintf( _n( 'comment' , 'comments' , get_comments_number(), 'customizr' ),
                      number_format_i18n( get_comments_number(), 'customizr' )
                      				)
     );

}

See How to customize the Customizr WordPress theme for more information on how to set up a functions.php file in a child theme.

CSS Code

.my-custom-bubble {
	position: relative;
	bottom: 28px;
	right: 10px;
	padding: 4px;
	margin: 1em 0 3em;
	border: 2px solid #F00;
	background: #FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 10px;
	color: #F00;
}
.my-custom-bubble:before {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 10px;
	border-width: 14px 8px 0;
	border-style: solid;
	border-color: #F00 rgba(0, 0, 0, 0);
	display: block;
	width: 0;
}
.my-custom-bubble:after {
	content: "";
	position: absolute;
	bottom: -11px;
	left: 11px;
	border-width: 13px 7px 0;
	border-style: solid;
	border-color: #FFF rgba(0, 0, 0, 0);
	display: block;
	width: 0;
}

Source : http://www.sitepoint.com/pure-css3-speech-bubbles/

Hope you’ll enjoy this little snippet and as always your comments/improvements are more than welcome!