How To Web Development

How to use Smileys on a WordPress Post

Smileys, also known as “emoticons,” are glyphs used to convey emotions in your writing and make it more natural. They are a great way to brighten up posts with expressing human behavior. 🙂
Text smileys are created by typing two or more characters.
;-)
is equivalent to smile emoticon   😉
:-)
is equivalent to smile emoticon   🙂
:-(
is equivalent to sad emoticon   🙁
:-?
is equivalent to confused emoticon   😕

 

So how does WordPress handle these emoticons?

By default, WordPress automatically converts text smileys to graphic images. That’s why I’m unable to show the above characters in this post without a tag.

When I wanted to give you the text based emoticons I'm write it as follows.

[code languague="html"] :-)
[/code]

Sometimes this automatic conversion makes me crazy.

To turn off this automatic conversion from the whole website, goto your WordPress Settings. In the Writing tab look for the Formatting section.

smily setting

 

Uncheck the box for "Convert emoticons like 🙂 and 😛 to graphics on display".  Turning off emoticons means that it will stop the conversion and when you type those characters in a post you will see the text as it is when you preview or publish your post. So it doesn't stop you from using emoticons as plain text.

 

Following are few of emoticons that you can use on your posts.

icon text text full text icon full text
🙂 :) :-) :smile:  😆 :lol:
 😀 :D :-D :grin:  😳 :oops:
 🙁 :( :-( :sad:  😥 :cry:
 😮 :o :-o :eek: 👿 :evil:
 😯 8O 8-O :shock:  😈 :twisted:
 😛 :P :-P :razz:  💡 :idea:
 😐 :| :-| :neutral:  ➡ :arrow:
 😉 ;) ;-) :wink:  :mrgreen: :mrgreen:
😕 :?
:-?
:???:
🙄 :roll:
😎 8)
8-)
:cool:
:!:
😡 :x
:-x
:mad:
:?:

You can use either text or full text to represent a emoticon with an image.  In some instances, multiple text options are available to display the same smiley. And did you notice? Few of them are animated.

How to Have a Different Smiley Images rather than Defaults?

The easiest way is to filter the smilies. The smiley or emoticon image graphics are found in the /wp-includes/images/smilies directory.

Upload the images you want with the same name to your server and put this code segment in your theme's function.php:

[code language="php"] add_filter('smilies_src','my_custom_smilies_src', 1, 10);
function my_custom_smilies_src($img_src, $img, $siteurl){
return $siteurl.'/wp-content/images/smilies/'.$img;
}
[/code]

Have fun with smileys!!!

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW