Hello Ashley,
Is there any way to replace the automatic WordPress emoticons (eg. if you type in :), it automatically translates to a smiley) with customized ones? Thanks!
Cecilia
Hi Cecilia!
It’s actually quite easy to customize your smilies in WordPress. All it takes is a small snippet of code and some custom images.
The smiley URL filter
Here’s the exact bit of code we want to use:
function my_custom_smilies_src( $img_src, $img, $siteurl ) {
return $siteurl . '/wp-content/images/smilies/' . $img;
}
add_filter( 'smilies_src', 'my_custom_smilies_src', 1, 10 );
This changes the path to the smiley directory on your site.
This bit of code assumes that your new smilies will be located in your /wp-content/images/smilies/ folder. But you can change that path to whatever you want if you want to put the smilies somewhere else.
Here’s an example using a custom theme and a smilies folder inside that theme:
return get_stylesheet_directory_uri() . '/smilies/' . $img;
You would have to create a new folder in your theme directory called smilies and put all your smilies in there.
Naming your smilies
Your smilies have to have the EXACT same names as the original. You can reference the smiley chart on WordPress.org. Just click on each smiley and you’ll see the URL in the address bar. For example:
https://codex.wordpress.org/File:icon_smile.gif
The file name for that smiley is icon_smile.gif
You can use my custom plugin!
I created a suuuuper simple WordPress plugin you can use. All you have to do is download the zip file, unzip it, paste your smilies inside the smilies folder, then re-zip the main ng-custom-smilies folder into a zip file, and upload it into WordPress like a normal plugin. Easy!
I also included just a few sample icons you can use straight away. The icons in the plugin were created by creativesplash on DeviantArt.
Other plugins on WordPress.org
I’m sure there are TONS of other plugins on WordPress.org that would allow you to upload custom smilies with a pretty, user-friendly graphical interface. But honestly the code is so small and simple, that I think it’s best to just create it yourself. đ
I am going to be honest. This is fucking awesome!
How friggin’ cool is this? Love it!
I always love these posts, but I never know if it’s possible to use these when using Book Host. Since I didn’t technically download or install anything for WordPress.org, I’m not sure of how it would work!
You can use it on Book Host, you’d just need to set up the plugin how you want it (download the file and add the emoticons you want), then send it to me so I can install it for you. đ
This so cool , i may do this when i move to WordPress self hosted.
Thank you so much for the free download, Ashley! I can’t wait to try it out.
You’re very welcome! đ
How cool! I never would have thought to do this… But now! I’m going to have to! So fun!
Great, Let me try
đ đ đ đ
I tried putting the functions part in my theme, added my smilies to my folder but it did not work… maybe because WP was updated? I put smile icon and I get this image instead https:// s.w.org/images/core/emoji/2.3/svg/1f642.svg
myuption, I’m attempting to do this as well, but found that Chrome and Safari don’t seem to obey the php code. It seems to work fine in Firefox, but sadly Firefox is trending down as a browser.
I’m going to try the plugin (instead of placing php code in functions.php) and see if that helps… I’ll post back
Well it doesn’t seem to matter… it appears as though WP has gone with an SVG set of emojis (and is calling them emojis now instead of smilies), and any emojis you use with this plugin or functions.php code are relegated to “alt” status.
Firefox has always been wary of svg (since malicious code could theoretically be embedded), so I’m guessing their browser avoids the svg and uses the alt (gif, png, etc). Sadly, all the svg (vector) emojis I’ve seen are pretty lame.
Not sure what can be done… if anyone has a solution please post!
Thanks Fred, I gave up, all I can do is add some custom smilies editing the WP file.
I think I may have found what’s going on (and it has nothing to do with sinister svg files :). More importantly, I think I may have found a potential solution. Apparently, WP has implemented a javascript-based substitute for emojis that feed directly from a CDN system they maintain. They did this to give a bit of standardization across platforms and browsers, since the constantly evolving emoji scene has been a bit of a mess.
So the vector file you’re seeing upload in place of your chosen emoji is a relatively new substitution system for the old WP emojis. The old ones were truly crappy (unless of course you prefer the charm of ’80s pixel art). The new ones are better I suppose, but still inelegant in my opinion â svg art is typically limited to flat shapes of color. Plus any weight/speed gains in using a vector format are probably outweighed by the remote server setup. So I have to say the new system is probably a well-intentioned misstep because it keeps you from modifying the images yourself and it can actually slow your site according to some critics. It’s also a poorly-timed solution, as it seems to have arrived just as the world is finally sorting things out a bit (emoji-wise, anyway :). Fortunately you can turn the new system off using the plugin or php code found here:
http://www.jeriffcheng.com/disable-emojis-in-wordpress-4-2-and-above-for-better-performance.html
When I did this, the old “alt” system took over and all the emojis I set up according to Ashley’s instructions are now working great on all browsers. For some very nice hi-rez emoji files, you can go to the following site:
https://emojiisland.com/pages/free-download-emoji-icons-png
and downloaded their free hi-rez png files (best to use right-click on the download link and ‘Save As…’ to preserve the png transparency). You can then bring them into Photoshop and re-save as either GIF (they seem fine with 64 colors) or 8-bit PNG, whichever the original file was. Incidentally, use “Save for Web & Devices” in Photoshop… it strips out all unnecessary metadata, icons, etc., that can increase file sizes.
It took me awhile to save all the files properly, but I think it’s worth it; nothing says “truck-pulling enthusiast site” like crappy 8-bit emojis (of course, if you’re building a truck-pulling enthusiast site then you now have the ability to customize your emojis with beer and hats and cool stuff… lessee…. what was the key combo for that eye-roll emoji again?).
Hope it’s helpful!