WYSIWYG WordPress Comments
I tried and tried to get the CKEditor plugin for WordPress to initalize multiple comment textareas for a custom post type I had created using the pods WordPress plugin. No matter how hard I tried, I failed. Only the first instance would get initialized. I dug through the code and found where the instance was created, but even with the code in front of my eyes, I could not figure out how to adapt the messy PHP / Javascript mesh to do what I wanted.
Eventually, I came accross a great guide explaining how to use NicEdit, a simple WYSIWYG editor that can be used easily to replace the boring WordPress comment box with something more friendly for end users leaving comments.
Following this guide, I downloaded and uploaded the NicEdit files to a folder named "scripts" in my theme's directory (please adjust the path in the functions below if you want to use another directory or place the files elsewhere). I would recommend downloading the non-compressed version, as the code is easier to read and making changes is a lot easier. I inserted the following function into my WordPress theme's functions.php file:
function add_nicEdit() {
if ( !is_admin() ) {
// register scripts
wp_register_script('nicEdit', get_stylesheet_directory_uri() . '/scripts/nicEdit.js', array(), false, true);
// enqueue scripts
wp_enqueue_script('nicEdit');
}
}
add_action('wp_enqueue_scripts', 'add_nicEdit');
Then, I created a new function that I added to NicEdit.js file. After this code:
allTextAreas : function(nicOptions) {
var textareas = document.getElementsByTagName("textarea");
for(var i=0;i<textareas.length;i++) {
nicEditors.editors.push(new nicEditor(nicOptions).panelInstance(textareas[i]));
}
return nicEditors.editors;
},
I added a function called allCommentTextAreas:
allCommentTextAreas : function(nicOptions) {
var textareas = document.getElementsByTagName("textarea");
for(var i=0;i<textareas.length;i++) {
if(textareas[i].className == "comment_editor"){
nicEditors.editors.push(new nicEditor(nicOptions).panelInstance(textareas[i]));
}
}
return nicEditors.editors;
},
The way this function works is that it will replace all textareas that have a class of "comment_editor" only.
Next, in my theme's footer.php file after the <?php wp_footer(); ?> line, I added the following:
<script type="text/javascript">
// We need to initialize the WYSIWIG editor for the comments field bkLib.onDomLoaded(function() { nicEditors.allCommentTextAreas({
iconsPath : '<?php bloginfo( 'stylesheet_directory' ) ?>/scripts/nicEditorIcons.gif', buttonList : ['bold','italic','strikethrough','link','unlink','removeformat']})
});
</script>
In your pods page template, load comments like this:
$args["comment_notes_after"] = "";
$args["comment_field"] = '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) .
'</label><textarea id="comment" class="comment_editor" name="comment" cols="45" rows="8" aria-required="true">' .
'</textarea></p>';
comment_form( $args, $post_id );
Your comments form will now look a lot better, specifically, they will look like this:
