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.
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
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.
![]()

Posted: July 21st, 2007 at 9:34 am
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.