As you can see in the bottom of this page, smilies can be inserted easyly using Javascript into my comment’s textarea. This only a simple Javascript feature using simple function. Before we start, i recommend you to use these plugins: Smilies Themer. Download and install the plugin.
I consider you already done that. So we go to the next step. Go to your admin panel, and open the Appearance Editor to edit your page. Open/click Comments (comments.php) to edit comment php file. Find this tag:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
Put a name of the form so the function will work, it look like this:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" name="chat">
Skip it for a while, open notepad or any text aditor the copy this codes:
<div id="smilies" width="90%"> <a href="javascript:DoSmilie(' smilies_code1 ')"><img src="smilies_url1"></a> <a href="javascript:DoSmilie(' smilies_code2 ')"><img src="smilies_url2"></a> <a href="javascript:DoSmilie(' smilies_code3 ')"><img src="smilies_url3"></a> </div>
Legend:
- red = codes that used for smilies to appear. (ex: ‘ :D ‘ ) This symbol will becomes
when you post a comment. - blue = visitor/poster can select the smilies based on the preview.
How to find two of them? Remember you already installing the recomended plugins? Open it from your setting. You’ll see something like this:
Select one of available smilies and click Update Options. Click on the Preview link to preview the selected smilies. You’ll see the popup windows like this:
Copy the symbol and insert into the red, then right click at the image preview and copy the image location and paste into the blue. Repeat this step for more smilies.
When you are done in notepad, copy the wole codes, open the comment.php file we skipped before, paste before <textarea> tag.
For the final step, add some javascript to make it work, copy this javascript codes and insert on the bottom or comment.php file.
<script type="text/javascript">
function x(){
return;
}
function DoSmilie(addSmilie, messageDef){
var addSmilie, messageDef, revisedMessage;
var currentMessage = document.chat.comment.value;
if(currentMessage==messageDef){currentMessage='';}
revisedMessage = currentMessage+addSmilie;
document.chat.comment.value=revisedMessage;
document.chat.comment.focus();
return;
}
</script>
What are you waiting for?? Save it quickly and see the live preview.. 
