Boost Engagement By Prioritizing Comments On Your WordPress Site

WordPress authors crave comments. They tells us that someone felt strongly enough to take time out to share their thoughts – complimentary or otherwise.

The problem is that a single comment in the wrong place can undermine all your good work. Wouldn’t it be good to be able to put those comments that enhance your post front and center and hide those that don’t?

In this post I’ll show you how to take control of your comment lists so that they work for your WordPress site and not against it and make engagement easier by moving that comment form to the top of the comment list.

Featured image
Not all comments are equal – put the best in front of your visitors

Last week, we looked at how to put your WordPress site’s comments in a slideout sidebar, just like the New York Times does. As one of the comments on that post mentioned, the NYT also uses tabs to segment its comments into featured and staff comments.

As I started looking into how to replicate this functionality, it also became apparent that we can do more to ensure that comments make a positive contribution to the post:

  1. Display featured (hand-picked) comments at the top of the comment list
  2. “Bury” a comment
  3. Display comments in tabs (all, featured, by the post author)
  4. Display the comment form at the top of the list
  5. Hide the comment form and toggle display with a link

The 30,000 Feet Overview

The solution is a combination of 2 plugins: a custom-built plugin and Featured Comments a collaboration of WordPress stalwart Pippin Williamson and developer Utkarsh Kukreti.

Featured Comments provides the functionality that allows the site administrator to tag a comment as featured or buried, either in the Admin interface or, even more usefully, directly on the public-facing site. The tagging manifests itself as a class on the individual comment which makes it easy to apply styling to but also, as we’ll see, to manipulate client-side.

The custom plugin, Enhanced Comments, is primarily concerned with inserting the client-side javascript that handles the tab display, the display of the featured comments (normal or at the top of the listing) and the display of the comment form (normal or top, hidden). The plugin also provides an options page in Settings to allow the site admin to have some control over the functionality.

The only additional requirement is some custom styling. As this will dependent on both your theme and personal tastes, I’ve kept the CSS separate and left the decision with you on how to inject it into your site. All the usual suspects (custom CSS plugin, child theme, new CSS file) are options.

The solution requires no changes to your theme’s templates or WordPress core. Featured Comments uses the appropriate comment hooks to add the feature or buried class to a comment element but that’s the only change. All the other functionality is provided client-side.

Taking Control Of Your Comments

Step 1 – Install The Featured Comment Plugin

In the WordPress Admin Interface, go to Plugins > Add New and search for ‘featured comments’. Install and activate.

Once installed, visit a page on your site that has comments. It shouldn’t look any different apart from the appearance of Feature and Bury links at the bottom of each comment (if you are logged in as the site admin). Feature and Bury a couple of comments for testing.

Screengrab of a comment showing the Feature and Bury action links
Easily prioritize comments and enhance your WordPress posts

Highlighting, Hiding Just With CSS

If you are not interested in tabs, or moving featured comments to the top or buried comments to the bottom of the comment list, then you don’t need the Enhanced Comments plugin: you can achieve that, and more, with the Featured Comments plugin and some custom CSS.

To highlight the featured comments add CSS for the .comment.featured clause. For example:

{code}
/* make featured background blue */
.comment.featured {
background: #a4d3eb;
}
{/code}

For buried comments, we’d want to make them less visible so we need to add CSS for the .comment.buried clause. For example:

{code}
/* hide buried comments */
.comment.buried {
display: none;
}

/* or just fade */
.comment.buried {
opacity: 0.25;
}
{/code}

Screengrab of a two comments, one with a blue background (featured) and one with opacity set to 0.25 (buried)
A little CSS can go a long way to provide visual cues for what’s worthy of attention

WordPress itself automatically adds a number of classes to a comment which you can leverage to further enhance your comment lists:

  • bypostauthor – identifies a comment by the author of the post. Style these comments using the CSS clause .comment.bypostauthor
  • byuser – identifies a comment by a registered user. Style these comments using the CSS clause .comment.byuser

There’s quite some scope there using just the Featured Comments plugin and CSS but if we really want to step it up then we need Enhanced Comments.

Step 2 – Install And Configure The Enhanced Comments Plugin

Download the zipped master file for the plugin from GitHub. Go to Plugins > Add New > Upload Plugin. Select the downloaded file and activate.

Once installed, we need to configure the plugin, so go to Settings > Enhanced Comments.

Let’s step through the options.

Screengrab of the comment list  and comment identifier options in the Enhanced Comments settings page
You need to tell Enhanced Comments how to identify the comment list and an individual comment

Comment container identifier, Individual comment identifier

In order to enable the plugin to work with a wider range of themes, the plugin allows identifiers to be specified for both the comment list container and the comment itself.

In all likelihood, the comment will be .comment but the comment list can vary, can be an ordered list or a div. For example, Twenty Twelve uses an ordered list with a class of .commentlist, so the identifier would be ol.commentlist. Twenty Thirteen and Twenty Fourteen, on the other hand use an ordered list with a class of .comment-list.

To check your theme, it’s probably easiest just to take the look at the page source.

Screengrab of the featured, buried and comment form placement options
Control the placement of featured, buried comments and the new comment form

Placement of featured comments

This option allows you to control the placement of the featured comments:

  • normal – leave the featured comments in place
  • top – move the featured comments to the top of the comment list

Placement of buried comments

This option allows you to control the placement of the buried comments:

  • normal – leave the buried comments in place
  • bottom – move the buried comments to the bottom of the comment list
  • remove – remove the buried comments from the comment list

Placement of new comment form

The new comment form is usually wrapped in its own div and so can also be moved. The options are:

  • normal – leave the comments form in place
  • top – move the comment form above the comment list

Hide comment form until Add Comment clicked?

Whilst you might want to have the new comment form above the comment list, you might not want to show it immediately. This checkbox controls whether the form is visible or not; if the form is hidden, then a link (Add Comment) is added to the top of the comment list to toggle the display of the form.

Screengrab of the tab options
Control the tabs and their content

Show comment-related tabs?

This checkbox controls whether the comments are arranged in tabs. The tabs that are displayed are determined by the following options although an All tab is automatically created to display all the comments for the post.

Comment class names to use as tabs

This is a comma-separated list of classes that will be used to control the comments that are displayed under each tab. The available classes are:

  • featured – comments that have been tagged as featured by the Featured Comments plugin
  • buried – comments that have been tagged as buried by the Featured Comments plugin (this would be unusual)
  • bypostauthor – comments created by the author of the post
  • byuser – comments created by registered users of the site

The most likely value is featured,bypostauthor which will create 3 tabs that will show all comments (automatically added), featured comments and comments by the post author.

If no comments exist for the post that have a tab class assigned then the tab is not created.

Tab headings

This is a comma-separated list of headings to use as the tab labels. Obviously, you want to make sure that they are synchronized with the tab classes. So, if the tab classes are featured,bypostauthor then this option will be Featured,Author.

Again, you do not have to specify All as this is automatically added.

Tab to show on load

This option allows you to specify the class name of the tab you’d like to show on the initial display of the post. There’s obviously advantage to be gained in showing the featured comments as you’ve hand-picked these comments, so the most likely setting is featured.

If a post does not have any comments tagged with the specified class then it will default to showing the All tab.

The placement options for featured and buried comments and the new comment form all work whether tabs are used or not, and, of course, you can also use this plugin in conjunction with the CSS highlighting discussed earlier, so there’s enough permutations to allow good control over how your comments look and operate.

Step 3 – Style Those Tabs

Adding the necessary CSS to style is heavily dependent on the theme itself, so I haven’t included it in the plugin: you’ll need to add it yourself.

Just for testing purposes (and perhaps even in a live environment), using a plugin such as Custom CSS is as good a method as any.

The best approach is to use the CSS below, see how it works with your theme (this was tested on Twenty Thirteen and should work with a number of themes) and tweak it until you get the look that you want:

{code}
.comment-tabs {
border-bottom: 1px solid #ccc;
margin: 10px 30px 0px 30px;
padding-bottom: 7px;
}

.comment-tabs li {
list-style: none;
display: inline;
padding: 10px 15px;
background: #ccc;
margin-left: 10px;
}

.comment-tabs li.active {
background: #ffffff;
border: 1px solid #ccc;
border-bottom: 1px solid #ffffff;
}

.comment-tabs li.tab-add-comment {
border: 0;
background: none;
}

.comment-tabs li.tab-add-comment a:before {
content: ‘+’;
}
{/code}

The .tab-add-comment is where the Add Comment link is placed when the new comment form is being hidden. Although it forms part of the tab unordered list, it is not styled as a tab:

Screengrab of the top of a comment list complete with 3 tabs (all, featured, author) and CSS styling
Use your own combination of styling and tabs to enhance the display of comments

If you’ve followed the 3 steps you should now have well and truly enhanced your WordPress comments. As the solution makes minimal changes to the HTML (merely adds classes to the comments), you’ll find that it should play nicely with the Slideout Comments.

How It Works

For the interested, here’s more detail on how the Enhanced Comments plugin works.

The WordPress Plugin

The plugin has 3 main actions:

  1. Handling the Settings > Enhanced Comments options page
  2. Injecting the client-side javascript into the HTML
  3. Passing the option values from WordPress to the javascript

I won’t go into the options page here as the Settings API is a topic in itself, suffice to say that I used the WordPress Settings Generator to create the basic framework.

Injecting the client-side javascript into the HTML is achieved by first registering the script using the wp_register_script function and then enqueuing it using the wp_enqueue_script function.

In between those two functions is where the plugin’s options are pulled out of WordPress and provided to the client-side script using the wp_localize_script function which takes an array and recreates it as a global javascript object that can be accessed by our script.

The plugin does not alter any HTML other than inserting the javascript. All the major functionality is provided by the client-side javascript.

Client-Side Script

The plugin injects a jQuery-based javascript file into the page that provides all the major functionality. It uses the settings that are passed to it via the localize function to determine what actions it needs to take.

It uses the iQuery (document).ready() event to:

  • move buried comments to the bottom of the comment list
  • remove buried comments (if required)
  • move featured comments to the top of the comment list (if required)
  • generate the tabs (if required)
  • move the comment form to above the comment list (if required)
  • hide the comment form and add the Add Comment link (if required)
  • change the tab to the specified tab (if required)
  • add the handler for clicking on a tab link
  • add the handler for clicking on the Add Comment link
  • add the handler for clicking on an inline reply link

How Tabs Are Handled

The tabs are added as a unordered list, with a list item generated for each of the passed tab classes (but only if comments exist with that class) as well as an universal all tab.

When a tab is clicked (and the handler is activated), the script determines which class needs to be shown using the tabs href attribute and then filters the existing comment list with that class. In that sense, the tabs are really fake: they don’t have their own content, they simply filter the one structure which is not only simpler but also doesn’t break inline replies.

Catering For Inline Replies

By default, WordPress provides for inline replies to comments – that is replies that have a parent comment. It does this by using its own javascript to move the comment form to sit under the parent comment and to prefill the comment form with the comment id which is why we filter the comment list when using tabs rather than duplicating the content.

Hiding the comment form creates another issue. When the reply link is clicked we want the default WordPress behavior to take place (moving and setting up the form) but we also need to toggle the display of the form as the chances are that it is hidden.

For some reason, WordPress hardcodes the click handler for the reply function on the link itself, so adding a click handler to the link won’t work so the handler is added the link’s parent instead.

Taking Control Of Your Conversations

Comments are an essential part of many, many sites yet can often be a double-edged sword: good comments can greatly enhance the post whilst a single bad comment can undermine it completely.

Deleting negative comments is possible but can create more problems than it solves. Being able to prioritize comments, to get those comments that enhance immediately in front of visitors, including the authors own comments, allows you to combat negative comments without reaching for the delete button, maintain the quality of the conversation and to encourage others to join in.

Is it time for you to take control of your WordPress comments?