Basic Comment Quicktags

If you’re looking for a way to spice up the default WordPress comment form, this plugin might come in handy. The Basic Comment Quicktags plugin by Mika Epstein is simple, yet effective. It uses the WordPress Quicktag API to add bold, italics, link & quote buttons to the “Comment” <textarea> field on your WordPress comment form.

HTML Code in WordPress Comments

HTML code has always been allowed in WordPress comments, but in 2014-2015, WordPress removed the line of text that appeared below the comment form, telling users which HTML tags were supported in comments. Also, keep in mind that not all users understand how to use HTML, even if the tags are shown to them.

Therein lies a problem. How can a non-technical user highlight an area of his or her comment, or easily add a link? That’s where Basic Comment Quicktags comes into play. Follow along to add bold, italic, link & quote buttons to your WordPress comment form.

WordPress Comment Quicktags Example

Here’s an example of what your WordPress comment form will look like after enabling the Basic Comment Quicktags plugin.

WordPress Comment Quicktag Buttons
WordPress comment form with Quicktags enabled. (shown on Twenty Sixteen theme)

How to Add Quicktags To WordPress Comments

Once you’ve installed & activated the plugin, you need to enable it in your settings.

  1. Navigate to Settings > Discussion

WordPress Discussion Settings

  1. Scroll down just before the Avatar section. You should see an option for Quicktags.
  2. Check the box to enable comment quicktags
WordPress Basic Comment Quicktags Settings
Enable Comment Quicktags in Discussion Settings

Add Quicktags to bbPress

If you use bbPress to add a forum on your WordPress website, you can enable Quicktags for bbPress forum posts & replies. You’ll see a 2nd option on your Settings > Discussion screen specifically for bbPress. Just check the box to enable it.

Quicktags CSS

The plugin adds one CSS file to the <head> section of your page. The styles are minimal, but you have the option to copy them from the plugin and add them to your theme’s style.css file. If you plan on customizing the style of the buttons (see next section below), I recommend you add them to your theme, or a child theme.

Remove the CSS

If you’re including the styles on your own, you don’t need to load the CSS file that comes with the plugin. To prevent this file from loading, add the following to a custom functionality plugin, or your theme’s functions.php file.

NOTE: Normally you would use the wp_enqueue_scripts action hook because wp_print_styles is deprecated, but since the plugin uses it, we have to use it, too.

function smackdown_unprint_styles() {
	wp_dequeue_style( 'basic-comment-quicktags' );
}
add_action( 'wp_print_styles', 'smackdown_unprint_styles', 100 );

Change Styles for Comment Quicktags

I love the functionality that the quicktags bring to the comment form, but I wasn’t in love with the design. I wanted the buttons to match the design of my site. Since a large part of my audience is comprised of WordPress users, I decided to use the same styles that the WordPress admin uses for the TinyMCE toolbar.

Here’s what the quicktags look like on escapecreative.io, after adjusting the styles.

WordPress Comment Quicktags New Styles
Updated styles on escapecreative.io

JavaScript

The Basic Comment Quicktags plugin does add one super-small JavaScript file to all comment-enabled posts. This file does, however, require both jQuery and the included WordPress quicktags.min.js file. Your theme is most likely already loading jQuery in the header, and the remaining two JavaScript files get loaded in the footer.