Skip navigation

The Art of Smilies in WordPress Blogs

I recently ;-) ran across a blog :D that was stuffed with 8O . 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 , the online manual for WordPress users, with Using Smilies and Which Smilies Can I Use on WordPress.com.

Example of smiliesThere 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 8O smilies. :D

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. :D 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 :P .

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.

Enable smilies and emoticons in WordPress

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:D
  • ;-);-)
  • :(:(
  • :o:o
  • :|:|
  • 8O8O
  • :x:x
  • :P:P
  • :?:?
  • :evil::evil:
  • :mrgreen::mrgreen:
  • :arrow::arrow:
  • :idea::idea:

Changing Your Smiley Character Images

Example of smiliesThere 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 Example of a too large smiley 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

Example of a smiley pushing the line height around in the blog post textSome 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;
}

Example of smilies with backgrounds and borders

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

Member of the 9Rules Blogging Network


Site Search Tags: , , , , , , , , , , ,
Feed on Lorelle on WordPress Subscribe Feedburner iconVia 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.

35 Comments

  1. Posted September 30, 2007 at 5:31 pm | Permalink

    You weren’t on my site by any chance were you? haha.

    I’m definitely quite guilty of over-using the smilies, especially in my older blog posts from ~age 13-17. I used to be a huge fan of using custom smilies in my blog, but somewhere along the line I ended up with the default set again.

    As for your tip about setting the line-height:, that’s another spot where I’m guilty. I keep telling myself I should fix the smilies because the space they produce between lines of text is a bit annoying, but I keep putting it at the bottom of my to-do list. I didn’t realize that the smiley images were already assigned to a CSS class. Perhaps that will provoke me to finally fix them!

    Thanks for the prod! :)

  2. Posted September 30, 2007 at 9:05 pm | Permalink

    What a timely post! I use smilies in my posts and I have wondered if I use them too much. I just used two emoticons on my post today. I like the little splash of color they add. I was wondering how to get some of them in the middle of a sentence and now I know! Thanks for that bit of info. If you happen to have some spare time, I’d love to get your opinion on my potential misuse/overuse of smilies. ;-)

    BTW, what does :mrgreen: Mr Green mean? Is he just jealously happy? :mrgreen:

    Is there a place to find these different smiley character sets? I haven’t seen many different ones other than the post-it ones that Wendy at e Moms at Home (http://www.emomsathome.com/blog) uses.

  3. Posted October 1, 2007 at 2:59 pm | Permalink

    Smilies look really annoying in the posts. They take away all the credibility of the blogger. A blogger must be able to express himself without using a single emoticon.

    Though, I don’t mind using an emoticon or two in the comments section ;)

  4. Posted October 2, 2007 at 1:52 am | Permalink

    I tend to agree with Mohsin. I have caught myself numerous times placing an emoticon in my post only to realize that whoever was reading the post would think that I was immature or needed to grow up. So, I stick to using them in my commenting area like so :)

  5. Posted October 2, 2007 at 5:51 am | Permalink

    Does these really add weight to the post… the text things are more classic to view, rather than adding these distracting smileys right? but when it comes to non-proffesional posts, these are really good.

  6. Posted October 3, 2007 at 4:57 pm | Permalink

    I don’t make a habit of using them in my posts, but you gave me an idea on changing them. :)

  7. Posted October 12, 2007 at 11:23 am | Permalink

    Sometimes I think I’m the only person on the planet (or at least, the only one who blogs and writes email) that never uses emoticons. As in, not once that I can think of since the 80s when I was in college, and even then, as now, I preferred to simply type in a (grin) when necessary. Go figure!

  8. Rajab
    Posted October 20, 2007 at 7:31 am | Permalink

    I was wondering if there is a plugin that allows non-tech savvy commenters to add smilies. In other words, instead of inserting ” ;)” ” :-)” …etc, just clicking on the smiley itself and it inserts automatically.

  9. Posted October 20, 2007 at 11:13 am | Permalink

    Yes, there are WordPress Plugins that will add a row of smilies to the comment form. Personally, I think they are clutter and ugly, but young people like them. I like comments without them, though I’ve know to use them myself. ;-) Most non-techy folks figure out smilies really fast, especially young kids who do nothing but write with them.

    Just search for “wordpress plugin smilies emoticons” and you should get some different options if you want to add them to your blog.

  10. Lillian
    Posted November 3, 2007 at 9:37 am | Permalink

    i like smillys # :cool:
    # :lol:
    # :)
    # :D
    # ;-)
    # :(
    # :o
    # :|
    # 8O
    # :x
    # :P
    # :?
    # :evil:
    # :mrgreen:
    # :arrow:
    # :idea:

  11. Posted December 22, 2007 at 9:30 pm | Permalink

    people have smileys hitting walls o wordpress how? tell me

  12. Posted December 22, 2007 at 11:58 pm | Permalink

    @ Ribuu:

    I don’t understand your question. Could you be more clear? Thank you.

  13. Posted March 30, 2008 at 4:51 pm | Permalink

    THANK YOU, THANK YOU!!! I have been trying to figure out how to get those smiley faces off of my blog and your post taught me how! Thanks!!! :)

  14. Posted April 14, 2008 at 6:01 am | Permalink

    I just love this smiley. :p

  15. Connor
    Posted April 25, 2008 at 5:09 pm | Permalink

    :evil: :mrgreen: :lol: :cool:
    i love smilies. these r some of my faves

  16. Posted May 15, 2008 at 5:22 pm | Permalink

    Lorelle:
    Thank you for that little piece of code for the style sheet! Now my smilies aren’t floating up above the test line! :D Once again your information comes to the rescue.

  17. aquaplussan
    Posted August 4, 2008 at 2:07 pm | Permalink

    I like using them though. I’m gonna use them a lot
    :) :lol: :evil: 8) 8O :twisted: ;)

  18. fernwoodnews
    Posted November 24, 2008 at 1:19 pm | Permalink

    It works :P :D

  19. fernwoodnews
    Posted December 15, 2008 at 1:30 pm | Permalink

    I’ve got some now. Thank you wordpress.

  20. oskarmothander
    Posted December 21, 2008 at 6:22 am | Permalink

    Where do I find these options you are talking about..? Maybe they have moved since you wrote this because I cant find them.. and I really hate emoticons or whatever they are called…

    • Posted December 21, 2008 at 1:50 pm | Permalink

      Which options are you specifically talking about? If you don’t like emoticons, don’t use them. If you do use them, make sure you style them accordingly in the stylesheet.css.

  21. Posted January 30, 2009 at 2:50 pm | Permalink

    Hi Lorelle

    I have a question regarding the decode of a smiley.

    Type a space before and after your smiley text. That prevents the smiley being accidentally included in the text around it.
    Make sure not to use quotes or other punctuation marks before and after the smiley text.

    But I want to circumvent this, it just looks nicer when I talk about bridge/diagram/cards. I have added an entry to WP support, but no luck yet.

    Thanks for your attention.

    • Posted January 30, 2009 at 4:08 pm | Permalink

      If you are talking about playing cards, the technique works the same. Your need is very specific and doesn’t apply to millions of WordPress users. However, check out the Plugin I found for displaying card characters in Odds and Ends WordPress Plugins You Must Know About. That might save you. Unless you are on WordPress.com. In that case, live with the space or change the CSS in the smilie to shrink down the margins around it.

  22. Posted March 21, 2009 at 6:08 am | Permalink

    This is amazing. Immediately I shall check on my smileys and make a new smiley pack for the site I have got in mind, which I shall create with no other blogging software but WordPress. Bravo WordPress, and long live Emoticons, a true legacy of the 21st century! :lol:

  23. sugenk
    Posted July 25, 2009 at 1:07 am | Permalink

    how to disable emoticons for some post…? i wan’t to disable it for one post…

  24. guy roundhill
    Posted October 11, 2009 at 5:44 am | Permalink

    :evil: cool

  25. guy roundhill
    Posted October 11, 2009 at 5:48 am | Permalink

    __________________________________________________________________________________________________________________________________________________________________________________________
    coooool :evil:

  26. Posted December 8, 2009 at 1:32 am | Permalink

    :)thanks!

  27. Adrian Castro
    Posted January 25, 2010 at 1:06 pm | Permalink

    Hi! I appreciate the tips of listing the categories and pages on the Footer.

    Is there a way to modify the css so that the categories and pages would look tabulated?

    Category 1 Category 2 Category 3
    Sub Cat a Sub Cat l Sub Cat x
    Sub Cat b Sub Cat m Sub Cat y
    Sub Cat c Sub Cat n Sub Cat z

    I have seen this type of footer arrangement these days – very prominently is the whitehouse.gov layout. Helps readers quite a bit in navigating the site.

    Thanks for your help…

    • Posted January 29, 2010 at 11:14 am | Permalink

      If you are not familiar with HTML and CSS, there are a ton of sites out there that deal with horizontal tabs and such. Please do a search for these tips and articles to find exactly the help you need. Good luck.

  28. Adrian Castro
    Posted January 25, 2010 at 5:49 pm | Permalink

    The desired outcome is here at the whitehouse site – see the footer.

    I believe what I need to do is alter the css display options. Tried enough iterations without success so I need help…

    Thanks again…

  29. Posted May 2, 2013 at 3:01 am | Permalink

    Reblogged this on Sonel's Corner and commented:
    Isadora from Inside the Mind of Isadora was wondering how some of us get those “happy face icons”. When I googled for tips on all the smiley faces, I found Lorelle’s lovely blog again and she explains it perfectly. Thanks Lorelle! :D Here you go Izzy. :)

  30. Posted May 2, 2013 at 3:33 am | Permalink

    Thanks a bunch Lorelle and I am glad I found your lovely blog once again. I tried to reblog but none of the smileys showed up, so I just posted the link as one of my blog friends was wondering how to use smileys and your explained it so beautifully. :) Thanks for sharing hon. :)


12 Trackbacks/Pingbacks

  1. [...] an emoticon in a sentence is annoying. Lorelle explained in this blog why. Here some reasons why you should never use them in a [...]

  2. [...] can also just replace smilies, and remember what the code is. See this page about doing [...]

  3. [...] The Art of Smilies in WordPress Blogs [...]

  4. [...] The Art of Smilies in WordPress Blogs [...]

  5. [...] The Art of Smilies in WordPress Blogs – Lorelle on WordPress [...]

  6. [...] The Art of Smilies in WordPress Blogs – Lorelle on WordPress [...]

  7. [...] I found this tip here. [...]

  8. [...] The Art of Smilies in WordPress Blogs – Lorelle on WordPress [...]

  9. [...] The Art of Smilies in WordPress Blogs « Lorelle on WordPressSimiles can be found just about anywhere; from the printed word to oral conversation; in language, literature, and music. A simile is an analogy that compares … [...]

  10. [...] The Art of Smilies in WordPress Blogs [...]

  11. […] The Art of Smilies in WordPress Blogs 100,000 Edublogs […]

  12. […] The Art of Smilies in WordPress Blogs: As part of the two month celebration, I shared tips on using smilies on your WordPress blog. […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,977 other followers

%d bloggers like this: