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 functions.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:
