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:
- Check the box that says “Convert emoticons like :-) and :-P to graphics on display”.
- 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.
- Open the
/wp-includes/images/
directory. - Using your FTP program, create a new directory called something like
smiliesbackup
. - Go to the
/wp-includes/images/smilies/
directory and move all of the image files to the newsmiliesbackup
directory. - Upload the new smiley image files to the
/wp-includes/images/smilies/
directory. - 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.
35 Comments
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! ๐
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 Mr Green mean? Is he just jealously happy?
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.
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 ๐
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 ๐
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.
I don’t make a habit of using them in my posts, but you gave me an idea on changing them. ๐
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!
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.
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.
i like smillys # ๐
# ๐
# ๐
# ๐
# ๐
# ๐ฆ
# ๐ฎ
# ๐
# ๐ฏ
# ๐ก
# ๐
# ๐
# ๐ฟ
#
# โก
# ๐ก
people have smileys hitting walls o wordpress how? tell me
@ Ribuu:
I don’t understand your question. Could you be more clear? Thank you.
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!!! ๐
I just love this smiley. :p
๐ฟ
๐
๐
i love smilies. these r some of my faves
Lorelle:
Thank you for that little piece of code for the style sheet! Now my smilies aren’t floating up above the test line! ๐ Once again your information comes to the rescue.
I like using them though. I’m gonna use them a lot
๐ ๐ ๐ฟ 8) ๐ฏ ๐ ๐
It works ๐ ๐
I’ve got some now. Thank you wordpress.
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…
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.
Hi Lorelle
I have a question regarding the decode of a smiley.
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.
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.
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! ๐
how to disable emoticons for some post…? i wan’t to disable it for one post…
Se Writing and Publishing Code In Your WordPress Blog Posts for how to turn an emoticon or smilie into text. Just use the HTML character entities for the text you want to use. For example, a smile which consists of a colon and the letter D would be:
:D
๐
๐ฟ cool
__________________________________________________________________________________________________________________________________________________________________________________________
coooool ๐ฟ
:)thanks!
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…
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.
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…
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! ๐ Here you go Izzy. ๐
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. ๐
Glad to help as always!
12 Trackbacks/Pingbacks
[…] an emoticon in a sentence is annoying. Lorelle explained in this blog why. Here some reasons why you should never use them in a […]
[…] can also just replace smilies, and remember what the code is. See this page about doing […]
[…] The Art of Smilies in WordPress Blogs […]
[…] The Art of Smilies in WordPress Blogs […]
[…] The Art of Smilies in WordPress Blogs – Lorelle on WordPress […]
[…] The Art of Smilies in WordPress Blogs – Lorelle on WordPress […]
[…] I found this tip here. […]
[…] The Art of Smilies in WordPress Blogs – Lorelle on WordPress […]
[…] 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 … […]
[…] The Art of Smilies in WordPressย Blogs […]
[…] The Art of Smilies in WordPress Blogs 100,000 Edublogs […]
[…] The Art of Smilies in WordPress Blogs: As part of the two month celebration, I shared tips on using smilies on your WordPress blog. […]