18 Smiley JS Buttons

This post is about the Smiley JS Buttons plugin for WordPress.

Note: This plugin is reported to work with WordPress 2.x and 1.5 as-is. However, it will not work in the admin area if you have the WYSIWYG editor on.

This plugin allows you to display all the smilies in the default WP set as images next to your comment field. When you click on one of them it appends the code needed to produce that smiley to the comment field.

1. Overview

1.1. Distribution terms

This plugin can be freely distributed, modified and used under the terms of the MIT License.

1.2. Plugin demo

See the discussion page for this post (unhide the comment form if needed) to see how the plugin acts. You will notice a row of smilies which you can click on in order to append smiley codes to the comment field. That’s all there is to it.

You can also look at a screenshot to see how the plugin is supposed to look.

1.3. Additional credits

• Probably me, the original author.
• Many thanks to Priyadi Iman Nurcahyo for the inspiration. His plugin (Yahoo/MSN Style Smileys) was the inspiration for this one and also showed a neat method to determine the current WP installation path.
• Thanks to Boriel for the 1.5 suggestions.

2. Get the plugin

1. Current version is 1.5.
2. Grab the plugin here: smiley_js_buttons.txt.
3. Rename it to smiley_js_buttons.php.
4. Upload it to the wp-content/plugins/ directory under your WP installation.
5. Go to your WP administration panel, under “Plugins”, look it up in the list and Activate it.

3. Using the plugin

3.1. For post comments

1. Locate the comments.php file under the theme of your choice. Themes are usually located under the wp-content/themes/THEME_NAME/ directory under your WP installation.
2. Edit the file, choose a proper place near the comment field and insert the following text:

   <?php if (function_exists(\'SJB_outputSmilies\')) {SJB_outputSmilies();} ?>
   

3. In case you renamed your comment field, you can pass an extra string option to the function to let it know what it’s called. Otherwise, it will always assume it’s called “comment”. Example:

   <?php if (function_exists(\'SJB_outputSmilies\')) {SJB_outputSmilies(\'my_comment\');} ?>
   

3.2. For admin forms

3.2.1. Warning about modifying admin files

When you update your WordPress, you will most likely override admin files and have to do the modification all over again. YES, DO IT.

Don’t mind the hassle. It is much better to upgrade your WP files and deal with modifying the files again, than risk to miss on the new version of the files. I wish there was an easier way to do this without having to modify the WP code and I’m looking for it.

3.2.2. Obtaining a classical smiley bar

(Thanks to Leguims.)

Warning: Does NOT work for WP2 when the WYSIWYG editor is activated.

If you want to add the smiley bar to your admin forms, proceed as follows:

1. Look up the following files under your /wp-admin directory:
   • edit-form-advanced.php
   • edit-form.php
   • edit-form-comment.php
2. Search the “textarea” just below the word the_quicktags(), and insert this line for the smileys:

   <?php if (function_exists(\'SJB_outputSmilies\')) {
     echo \'<small><strong>Smilies:</strong> \';
     SJB_outputSmilies(\'content\');
     echo \'</small><br />\';
   } ?>

Note: The textarea in the admin forms is called “content”. Notice how I had to pass the proper name to the smiley function.

3.2.3. Integration with the quicktag buttons

If you have at least version 1.3 of this plugin, there’s an alternative way of using the smilies in admin forms, by integrating them with the quicktag buttons. This method “injects” new buttons as quicktags for each smiley.

Take a look at this screenshot to see if you fancy the outcome.

This variant has the benefit of allowing you to insert smilies right at the cursor position in the main edit field; plus, you only have to edit one admin file instead of three. On the downside, it’s quite different from the smiley bar you’ve been used to, and whether it works with WP 2.x is unknown. Make your own decision.

If you want to do it this way, here’s what you have to do:

1. Update to at least plugin version 1.3!
2. Undo the modifications to edit-form.php, edit-form-advanced.php and edit-form-comment.php, if you made them.
3. Instead, edit and modify wp-admin/admin-functions.php.
4. Locate a line that says function the_quicktags () {.
5. Shortly after it, you’ll find two lines that look like this:

   <script src=\"quicktags.js\" type=\"text/javascript\"></script>
   <script type=\"text/javascript\">edToolbar();</script>

6. Add an extra line between them, that looks like this:

   \'.SJB_adminSmilies().\'
   

That’s all.

4. Support

I’m usually very busy so I won’t provide any support for individual installations, sorry.

The plugin is very small and simple and it does what I need, so I will most likely not expand it any further. If you absolutely must have more features added, the license allows you to publish your own derived plugin, which I encourage you to do.

If you find any bugs, I’d appreciate a note. See the contact page or leave a comment.

4.1. Known issues

• It is clash-safe as far as other plugins are concerned. It contains only one function, which has a special prefix. It also starts by checking if another function with the same name already exists and bails out if it does. The main concern here is making sure your blog doesn’t choke.
• Regarding WP compatibility:
  • The plugin grabs the $wpsmiliestrans array from WP, flips it, and uses it. As long as that array exists and contains correct image names, the plugin will most likely output correct smilies.
  • The path to the default smilies is composed using the blog installation directory plus wp-images/smilies/.

5. Version history

• 1.5, Jul 31, 2007:
  • Fixed compatibility with WP 2.2.x on all setups.
• 1.4, Nov 21, 2006:
  • Ability to detect smiley directory on its own. This makes it compatible out of the box with both WP 2 and 1.5.
  • Handle visitors without JavaScript activated graciously (output just a message letting them know what they’re missing).
• 1.3, Mar 29, 2006:
  • Cleaned up code to avoid redundancies.
  • Implemented an alternate kind of smiley bar for admin pages, by integration with the quicktag buttons.
• 1.2, Nov 27, 2005:
  • Updated homepage, download links, author name and email, due to development takeover. License remains MIT.
• 1.1, Jul 13, 2005:
  • Fixed typo (get_settingsx changed to get_settings). Updated link to this page.
  • Updated homepage link.
• 1.0, Jun 9, 2005:
  • First release.