Tutorial: Adding WYSIWIG comments to WordPress

Today I was working through the last 20% of a new WordPress site for Dr. Ali Binazir, TED speaker and New York Times bestselling author. As worked through the details, I realized the comments area looked terrible:
commentsfield-oldUh, yeah, well THAT’S user friendly, isn’t it? As though the average reader has any freaking clue what to do with XHTML instructions. As a matter of professional pride, I decided a better solution had to be within arms reach. As it turns out, I was right. The goal of today’s lesson then becomes to turn that into this: commentsfield

Choosing an Editor

I knew that I could apply any WYSIWYG editor to the textarea but I also didn’t want to water the garden with a fire hose. While WordPress has TinyMCE built in already and it would have been easy enough to hook, it was a lot more UI than I needed. In the end, I selected NicEdit because it is lightweight and can be stripped down to include only the basic components a project requires. In fact, all the average WP theme really needs for a comment editor is a set of buttons for bold, italic, links, and possibly a strike-through format. For good measure, we’ll include a “remove all formats” button as well. Adding the <code> and <pre> tags is beyond the scope of today’s tutorial but perhaps I’ll tackle that in a more advanced tutorial later on.

Downloading the Package

First, head on over to NicEdit’s download page to grab the latest code. In order to support WordPress comments code-free (we’re not bothering with an XHTML editor window here) we only need five components. nicCore, nicPane, nicAdvancedButton, nicButtonTips, and nicLink. Your options on the download screen should look like this: NicEdit download options   Once you download the package you will need to unzip the package and retrieve two files: nicEdit.js and nicEditorIcons.gif. Both will need to be stored wherever you feel is appropriate in your theme’s hierarchy. At this point, I will remind everyone that it is best to make these sorts of modifications in a child theme. Editing the master theme directly is a terrible idea. If you need a primer on child themes, Hongkiat and Tuts+ both have excellent ones. Moving on from that thought, make a mental note of where you have placed your script and image files, you are about to need them.

Setting up WordPress to use the Script

With the files in place within your custom or child theme, all that remains is to register and enqueue the script, then initialize the editor. For the purposes of this tutorial, we will assume that you are directly editing functions.php, though I realize many of you will have a scripts file broken out separately. The advanced themers among you will probably have already minified the .js file and bundled it into your global.js equivalent, which is also cool. We’re going to come from this like newbies though so the rest can follow along.  Everybody else: you are going to need two files:

  • functions.php
  • footer.php

Go ahead and open those up in your editor or IDE. Register and Enqueue the Script Go ahead and paste the following code between the opening and closing brackets in your functions.php file. The /path/to/file represents the folder structure between the theme folder and where you put your nicEdit.js and you will need to make sure it matches your theme:

OK! The script is registered and enqueued. If you refresh your front end at this point, you should see nicEdit.js in the footer. If you don’t, then something went wrong and you’ll need to review the last step. Go ahead and make sure that the script in the source code is going to the right location (click it, does it 404? No? Good, now you know it’s correct).

Initializing the Script and Targeting the Comments Textarea

One more step! We need to initialize the script at the bottom of your footer.php file.  Look for wp_footer() in the code and directly after, paste this:

We need to change two things here:

  1. Change /path/to/file/ to the actual path to your icons GIF
  2. Check the ID of your comments area. It should be “comment” but if it is named something else, you’ll need to update the panelInstance() call.

Some of you will no doubt see what we have done here. We initialized the Editor, told it where to find the icons using a generic WordPress conditional for the theme root, then told it which buttons to display. NicEdit supports many more buttons by default, however, the WordPress comments editor just strips their output. Adding things like lists and images, like code markup, is for a more advanced version of this tutorial.

One More Thing

The text area will be transparent by default. If you want the background to be white, try inserting this into your CSS. Note that you may need to adjust the class call to your theme’s namespace. The div:nth-child(2) part is the main thing you want since the plugin doesn’t assign a targetable class to the text area:

And you’re done!

Assuming you followed the steps correctly (and I didn’t make any horrifying errors/omissions), you should now have a working WYSIWIG editor for your reader’s comments. Enjoy!

PS. I realize the irony in the fact I’m not using a WYSIWIG comments field on my own site. Let’s face it though, this entire design needs an overhaul :)

 

  • NeoCsatornaja

    Hy dear!
    You miss the one thing:
    This is you wrote:

    function add_nicEdit() {
    if ( !is_admin() ) {
    // register scripts
    wp_register_script(‘nicEdit’, get_stylesheet_directory_uri() . ‘/path/to/file/nicEdit.js’, array(), false, true);

    // enqueue scripts
    wp_enqueue_script(‘nicEdit’);
    }
    }

    add_action(‘wp_enqueue_scripts’, ‘add_nicEdit’);

    But this not correct becouse,this is correct:

    function add_nicEdit() {
    if ( !is_admin() ) {
    // register scripts
    wp_register_script(‘nicEdit’, get_stylesheet_directory_uri() . ‘/path/to/file/nicEdit.js’, array(), false, true);

    // enqueue scripts
    wp_enqueue_script(‘nicEdit’);
    }
    add_action(‘wp_enqueue_scripts’, ‘add_nicEdit’);
    }

    This is a big issu,becouse broke the admin site and front page!
    After the last parenthesis, are no longer allowed to put anything, unless you start a new shell functions.

  • NeoCsatornaja

    And i suggest the simpler souliton:
    Steps:
    1. Search the wp-includes/comment-template.php
    2. search this text:”textarea”
    3. if you find add this in text area:
    class=”editor1″
    example:

    4. save and upload your ftp.
    5 download this:
    http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.2/ckeditor_4.2_full.zip
    And upload here:
    wp-content/plugins/
    6,final step:

    That’s it Enjoy =)

  • https://www.google.com/profiles/112807562108075843959 Ian Armstrong

    Hey Neo,

    Thanks for catching that. I’ll fix the script in this post. As for CKEditor, it’s a nice tool but it’s very heavy. I chose to feature NicEdit because it has a very small footprint, which really matters when we’re talking about a bandwidth/cpu hog like WordPress.

  • https://www.google.com/profiles/112807562108075843959 Ian Armstrong

    Now that I look at this in more detail – I’m not clear why my version would have broken your site. The only difference I see is that you attempt to enqueue the script even in the admin pages instead of only on the front end.

    Mind explaining?

Contact Imperative Ideas

A real contact widget is coming soon. For now, contact me by email using [email protected], or by phone at 415.797.7097.