The Art of Smilies in WordPress Blogs

I recently 😉 ran across a blog 😀 that was stuffed with 😯 . You know, those yellow smiling faces 🙂 that grin, wink, blink and snarl at you from many blog posts?

They are called emoticons by their proper term, but also known as smilies or smileys.

Sometimes they work, and sometimes they don’t, but they certainly help add emotional context to the intent of your text.

I’ve written about how to add smilies to your blog and there are two great how to articles in the WordPress Codex, the online manual for WordPress users, with Using Smilies and Which Smilies Can I Use on WordPress.com.

There are a lot of different types of smilies you can add to your WordPress blog to customize their look, but honestly, what ever happened to the cute traditional text smilies :-) that we used to use in our emails? Aren’t they good enough?

When used properly, smileys can express the emotional intent of your words. When used excessively, often as a replacement for words, they tend to clutter up a blog post or comment.

Avoid Too Many Smilies

It’s really hard 🙂 to read a blog post 😉 when it’s filled 🙂 with too many 😯 smilies. 😀

The easiest way to avoid the clutter is to not use them so much.

The proper usage of a smiley is to place it at the end of a sentence, after the period. 😀 In English, we put a lot of emphasis on the meaning of a sentence towards the end of the sentence, thus, the emoticon should be near the end.

However, if you write long sentence, or compound sentences, then you could, if you wanted 😉 , put the smiley in the middle where it would have the most impact, but take care. The comma or punctuation needs to be separate from the smiley for WordPress to recognize it :D, as in these examples, to convert it into the graphic image :(. If you want to use it in a sentence, put the smiley keystrokes 🙂 in the middle of the text, with space :8 on either side, or with a space between the punctuation and the smiley keystrokes 😛 .

Turning Smilies On and Off on a WordPress Blog

WordPress blogs have the ability to turn on and off the graphic versions of the smilies. In the Options > Writing panel:

1. Check the box that says “Convert emoticons like :-) and :-P to graphics on display”.
2. Click Update.

With the checkbox enabled, when you use the various smiley keystroke combinations, they will automatically convert to the characters.

Here are the most common keystrokes which create the most used smilies:

• :) – 🙂
• :D – 😀
• ;-) – 😉
• :( – 😦
• :o – 😮
• :| – 😐
• 8O – 😯
• :x – 😡
• :P – 😛
• :? – 😕
• :evil: – 👿
• :mrgreen: –
• :arrow: – ➡
• :idea: – 💡

Changing Your Smiley Character Images

There are many smiley character sets available which can be used to replace the default smileys that come with WordPress.

The character images are image files, typically gifs with a transparent background. To change your WordPress blog smilies, you need to replace the graphics with a new set using an FTP program to access the server files and directories on your WordPress blog.

The key to a successful replacement of the old smilies with the new is that the image file names must match the old names for the same images. If you want your grinning face to respond to the :D keystrokes, the image file names must match. Change them accordingly before uploading them to your WordPress blog.

1. Open the /wp-includes/images/ directory.
2. Using your FTP program, create a new directory called something like smiliesbackup.
3. Go to the /wp-includes/images/smilies/ directory and move all of the image files to the new smiliesbackup directory.
4. Upload the new smiley image files to the /wp-includes/images/smilies/ directory.
5. Write a test post with smilies in it to ensure the new smilies are working.

Here are some tips for choosing replacement smiley emoticon graphic images:

• Keep Them a Reasonable Size: The emoticon graphic image should be all the same size and a reasonable size that does not exceed the height of your blog content text and line height. This prevents space distortions in your text.
• Transparent Background: Emoticons are typically saved as gif files with a transparent background rather than colored or white. This allows the circled face to “float” on the background color of the page instead of being in a colored box. If the set you are using has a colored background, you can edit the image with a graphic editor and remove the background color or export it as a GIF, choosing an option that turns the background color to transparent.
• Choose Appropriate Emoticons: If your blog is about computer war games, than an emoticon set with warriors or soldiers is appropriate. A set with hearts and bows might not be appropriate.

The Art of CSS and Smilies

Some WordPress Themes automatically insert space around an image so it isn’t mashed up against the content text. A smiley is an image, thus it can inherit the space around an image, making it look strange within the flow of your blog’s text.

To remove this unwanted space, so the smiley will sit inline with the text, add the following to your WordPress Theme style sheet (style.css):

img.wp-smiley {
margin:0;
padding:0;
}

If you have an option in your style sheet to add a border around images on your WordPress Theme, you may want to consider removing it around your smiley images.

img.wp-smiley {
border:0;
}

If you are using a large sized emoticon set, and you want to keep it, even though the font size you are using in your blog content area is smaller than the image size, consider enlarging your font size, or increasing the line-height and spacing to fit the smiley into the structure of the words so it doesn’t push the content or line height around in your post text.

Related Articles

• WordPress.com Blog Bling: Lines and Smilies
• Adding or Removing Link Borders Around Images
• WordPress.com Blog Bling: Decorating Your WordPress.com Blog with photographs, graphics, and more
• Social Bookmarking Submit Links on WordPress Blogs
• WordPress.com Blog Bling: Fun Font Bling
• WordPress.com Blog Bling: Blockquotes and Quotes
• WordPress.com Blog Bling: Blogroll and Sidebar Bling
• WordPress.com Blog Bling: Signatures and Writing Code
• Adding Video and Podcasting Bling to Your WordPress.com Blogs
• WordPress.com Blog Bling: Show Off Your Blog Bling

---

Site Search Tags: wordpress tips, emoticons, blogging tips, post content, smilies, smiley, smilies, little faces, happy faces, blog bling, changing smilies, wordpress
Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.