Comments with CSS #1 - WordPress Snippet Generator Tool

Nimbus Themes / Magazine / Code / Comments With CSS #1 – WordPress Snippet Generator

Functions.php

Add this code to your functions.php file. Scroll down to learn more.


// Custom Callback
            
function {{themeSlug || 'your_theme_slug'}}_comments($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
	    
		<div class="comment-wrap">
			<div class="comment-img">
				<?php echo get_avatar($comment,$args['avatar_size'],null,null,array('class' => array('img-responsive', 'img-circle') )); ?>
			</div>
			<div class="comment-body">
				<h4 class="comment-author"><?php echo get_comment_author_link(); ?></h4>
				<span class="comment-date"><?php printf(__('%1$s at %2$s', '{{textDomain || 'your-text-domain'}}'), get_comment_date(),  get_comment_time()) ?></span>
				<?php if ($comment->comment_approved == '0') { ?><em><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> <?php _e('Comment awaiting approval', '{{textDomain || 'your-text-domain'}}'); ?></em><br /><?php } ?>
				<?php comment_text(); ?>
				<span class="comment-reply"> <?php comment_reply_link(array_merge( $args, array('reply_text' => __('Reply', '{{textDomain || 'your-text-domain'}}'), 'depth' => $depth, 'max_depth' => $args['max_depth'])), $comment->comment_ID); ?></span>
			</div>
		</div>
<?php }

// Enqueue comment-reply

add_action('wp_enqueue_scripts', '{{themeSlug || 'your_theme_slug'}}_public_scripts');

function {{themeSlug || 'your_theme_slug'}}_public_scripts() {
    if (!is_admin()) {
        if (is_singular() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); }
    }
}

// Enqueue fontawesome

add_action('wp_enqueue_scripts', '{{themeSlug || 'your_theme_slug'}}_public_styles');

function {{themeSlug || 'your_theme_slug'}}_public_styles() {
        wp_enqueue_style( 'font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', array(), '4.7.0', 'all');
}

Comments.php

Add this code to your comments.php file. Scroll down to learn more.

            
<?php if ( post_password_required() ) { return; } ?>
<div id="comments" class="comments-area">
	<?php if ( have_comments() ) { ?>
		<h4 class="comments-title"><?php comments_number(__('No Comments', '{{textDomain || 'your-text-domain'}}'), __('1 Comment', '{{textDomain || 'your-text-domain'}}'), '% ' . __('Comments', '{{textDomain || 'your-text-domain'}}') ); ?></h4>
		<span class="title-line"></span>
		<ol class="comment-list">
			<?php wp_list_comments( array( 'avatar_size' => 70, 'style' => 'ul', 'callback' => '{{themeSlug || 'your_theme_slug'}}_comments', 'type' => 'all' ) ); ?>
		</ol>
		<?php the_comments_pagination( array( 'prev_text' => '<i class="fa fa-angle-left" aria-hidden="true"></i> <span class="screen-reader-text">' . __( 'Previous', '{{textDomain || 'your-text-domain'}}') . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next', '{{textDomain || 'your-text-domain'}}') . '</span> <i class="fa fa-angle-right" aria-hidden="true"></i>', ) ); ?>
	<?php } ?>
	<?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) { ?>
		<p class="no-comments"><?php _e( 'Comments are closed.', '{{textDomain || 'your-text-domain'}}'); ?></p>
	<?php } ?>
	<?php comment_form(); ?>
</div>

Style.css

Add this code to your style.css file. Scroll down to learn more.

   

/* Images */
    
.img-responsive{display: block;max-width: 100%;height: auto;margin: 0px auto;}
.img-circle { border-radius: 50%; }    
    
/* Comments */

textarea, input {border:1px solid #e4e4e4;}
textarea {width:100%;}
.comment-list, .children{list-style:none;}
ul.children {list-style:none;padding-left:0px; margin-left:0px;}
.comment-wrap { border-bottom: 1px solid #ccc; padding-bottom: 40px; margin-bottom: 50px; position:relative; }
.comment-wrap .comments-title{padding-top:60px;}
.comment-wrap .comment-img { float: left; margin-right: 20px; padding-bottom:25px;}
.comment-author {text-align:left;}
.comment-reply {position:absolute;top:0px;right:0px;font-style:italic; padding:5px 5px;background:#f5f5f5;}
.comment-author,.comment-author a{font-size: 14px;text-transform: uppercase; letter-spacing: 2px;margin-bottom:2px;}
.comment-date{font-size: 10px;text-transform: uppercase; letter-spacing: 2px;font-style:italic;display:block;padding-bottom:7px;}
.depth-2 .comment-wrap {padding-left:30px;}
.depth-3 .comment-wrap {padding-left:60px;}
.depth-4 .comment-wrap {padding-left:90px;}
.depth-5 .comment-wrap {padding-left:120px;}
.depth-6 .comment-wrap {padding-left:150px;}
.depth-7 .comment-wrap {padding-left:180px;}
.depth-8 .comment-wrap {padding-left:210px;}
.depth-9 .comment-wrap {padding-left:240px;}
.depth-10 .comment-wrap {padding-left:270px;}
#commentform #comment,#commentform #author,#commentform #email,#commentform #url{display:block;width:100%;}
#commentform input[type="submit"]{display:inline-block;padding:8px 15px;border:1px solid #e4e4e4;font-size: 10px;text-transform: uppercase;letter-spacing: 3px;background: #fff;margin-top:15px;}
#commentform input[type="submit"]:hover {background: #e2fcff;}
.title-line{border-top: 1px dotted #ccc;display: block;max-width: 30%;margin: 0 auto 25px;}

/* Responsive */

@media (max-width: 767px) {
    .comment-list, .children { padding-left: 0px; }
    .comment-wrap .comment-img { float: none;margin: 0px;width: 100%;padding-bottom: 0px; }
    .comment-img>img { display: block;margin: 0px auto; }
    .comment-author, .comment-author a, .comment-date { text-align:center; }
    .depth-2 .comment-wrap,.depth-3 .comment-wrap,.depth-4 .comment-wrap,.depth-5 .comment-wrap,.depth-6 .comment-wrap,.depth-7 .comment-wrap,.depth-8 .comment-wrap,.depth-9 .comment-wrap,.depth-10 .comment-wrap {padding-left:0px;}
    .comment-reply { position: relative; text-align: center; display: block; margin-top: 25px;}
}

Evan ScoboriaFeb 08 2017Comments

If you’re developing a WordPress theme, one of the most important page elements you’ll need to implement is the comments layout. As it so happens, it’s also one of the most frustrating components to develop. Getting the style right is difficult, and messing it up is incredibly easy.

The comments section of a website is a great place for readers to engage with one another and allows website owners to increase user interaction. With this in mind, we’ve put together this simple yet powerful code snippet generator that helps developers add a responsive comments section to their WordPress themes.

How Does the Comments Template and the Custom Callback Work?

By default, WordPress displays comments in a theme based on the code and configuration settings of the comments.php file in the theme’s directory.

Comments Template

To start things off, the comment template tag is wrapped in a conditional statement (using the have_comments() function) to determine whether there are any comments to loop over or not. If true, the template proceeds to display the total number of comments for the current post using the comments_number() function.

Next, the template specifies arguments, filters, and callbacks for the wp_list_comments() function. This function is used to display the entire comments list.

Finally, we have a conditional statement (combining the comments_open(), get_comments_number(), post_type_supports() functions) which determines whether or not comments are open for the post or not (i.e. does the post support comments). If true, the message Comments are closed. will be displayed on the screen.

Custom Callback

The callback argument for the wp_list_comments() function is used to reference the function that will build the beginning of an individual comment. This means that the callback will make your custom function get called to display each comment bypassing WordPress’ internal functionality.

How Do I Use This WordPress Comments With CSS Snippet Generator Tool?

This comments with CSS code snippet generator is designed specifically to help you integrate a well-designed comments section into your WordPress theme. Since I’m using Bootstrap, I’ve pulled a few image styles over from bootstrap.css. Additionally, the generated code ensures that the comments section’s styling will default to the user’s theme’s font style.

To use the tool, all you have to do is enter your theme’s details and let the tool generate a theme-specific code snippet for you to use on your WordPress theme.

General Tab
- Theme Slug: The theme’s slug should be in all lowercase letters, numbers, and/or underscores. It’s used to prefix any functions or variables that could potentially cause incompatibility issues with the WordPress core, themes, or plugins. Typically, the theme slug is the exact same string as the text domain with any underscores replaced by hyphens.
- Text Domain: The text domain is a unique key that will be used to identify translatable strings in your theme or plugin. It should be the same string as your theme’s name in all lowercase letters, numbers, and/or hyphens. In most cases, the text domain matches the theme’s directory name in your site’s root directory.
Code Tab
- Once you’ve entered both of the required fields, head over to the Code tab. You’ll see that the Functions.php, Comments.php, and Style.css areas are populated with custom code snippets for adding a pre-designed comments section to your WordPress site.

What Will the Comments Sections Look Like?

Here’s a preview of how the comments section will look like once you’ve added the code snippet to your WordPress theme:

And it looks great on mobile, too!

How Do I Add the Code Snippets to My Website?

The quickest way to add the generated code snippets to your site is by pasting them directly into your current theme’s functions.php, comments.php, and style.css files. You can edit them directly by navigating to Appearance > Editor from the WordPress admin panel.

Alternatively, you can download the theme’s functions.php, comments.php, and style.css files to your desktop via an FTP client. Next, open them up one by one in a text editor and paste the corresponding code snippets at the bottom of each of the files. Hit the Save button and re-upload all of the files to your theme’s root directory.

Conclusion

The look and feel of your theme’s comments section can potentially influence user engagement. Styling your comments section with a little bit of CSS can significantly improve its visual appeal and invite users to contribute comments to your blog. Hopefully, having this pre-configured coding base will save you some time and effort from having to code an elegant-looking comments section for your theme.

Do you have any questions about the Comments With CSS code snippet generator tool? Let us know in the comments section below!