Custom WordPress Smiley Icons

Following Mike's instructions, I was able to make a personal 1955 Design smiley in a matter of minutes. Genius, I tell you. The guy's a genius.

Who wouldn’t want their own custom WordPress smiley icon?

I often visit at Mike Cherim’s Beast-Blog. Mike is a genius withto WordPress, and I always learn something new when Mike writes about tweaking WordPress. Adding Your Own WordPress Smilies explains how to make your own personal smilies / emoticons for use with WordPress. Following Mike’s instructions, I was able to make a personal 1955 Design smiley in a matter of minutes. :1955:

Using a text editor, open the vars.php file in the wp-include directory. Look for an array that contains the following code:


     ';)' => 'icon_wink.gif',
    ':!:' => 'icon_exclaim.gif',
    ':?:' => 'icon_question.gif',
    ':1955:' => 'icon_1955.gif',

I added the last line of code and created a small icon in Photoshop and named it icon_1955.gif. Save your icon in the /wp-includes/images/smilies directory. That’s all there is to it. Any time I type the text :1955: into a line of text, the graphic smiley icon is inserted in its place. Pretty cool.

Custom Formatting with CSS Markup

The one tip I can add is that you might have to make some adjustments to your CSS file to make the smilies work correctly. On this website my CSS floats images and adds a border by default. So I needed to write some CSS markup to keep the smilies inline and borderless. No problem. WordPress automatically adds the class wp-smiley to code that it generates for all smiley icons. You simply need to write some CSS markup to handle that class. In my case, I had to make certain that the smiley icons did not float and remained as inline images with no padding and no borders.


.wp-smiley {
    padding:0 0 0 0;
    margin:0 0 0 0;
    float:none;
    display:inline;
}

That’s all there is to it. Now the smiley image appears in the text as if it was another text character.

In fact, the little graphic at the end of this paragraph is another WordPress smiley! Many thanks again, Mike, for helping the world become more proficient with WordPress.

:eof:


del.icio.us| Digg| blogmarks| Ma.gnolia| StumbleUpon| Technorati|

3 Comments & Trackbacks to “Custom WordPress Smiley Icons”

 

Hey Dave, nice tip about adding a class to that line. I didn’t dig down into that file, but you made me think: what should be added to that line are dimensions. They don’t do it I think to allow people to make smilies of different dimension, but if they will all be the same (mine will I think) that’d be a good add-on.

Darn, I forgot, I wanted to add to that comment this: :1955:

Great suggestion about adding dimensions to the IMG tag, Mike. I think I will take a look at the file again later today and do just that!

Enter Your Details

  • First time commenters will have their comment moderated before it appears.
  • If there is a link in your comment, it will also require moderation.
  • This site uses Akismet to stop Spam in it's tracks.
  • So, if you are sending Spam, just forget about leaving a comment, OK?

Please Leave Your Comments Below