Adding your own WordPress Smilies
On a site I’m making I added a table of available smilies on one of the pages in the help section (similar to the smiley list my daughter has on her blog). It’s part of the site’s help section. The audience will be a mix of somewhat savvy surfers and complete novices. Many I’d say won’t know what a blog is. Thus I’m offering a lot of passive site support. While making this table of smilies I decided to add three of my own. It’s really quite easy. Here’s how I did it:
Make the images
First step is to make the smilies or emoticons. An easy way to jump start this process, if you plan on making round smilies, is to grab one of the existing smilies (located in wp-includes/images/smilies/) and overlay it with a solid color, starting the creation from there. Doing this ensures all of the image properties are set and well optimized. Saves time.
Once made, just export them to the same folder. You can name them whatever you want to, and they don’t have to be GIFs I suppose, but I stuck to the precedent set by WordPress: icon_iconname.gif. Upload the images to the same directory (located in wp-includes/images/smilies/) on your web server.
Add them to the array
Next thing you have to do is to add the image names and the character combinations you’ll want to use to make them with to the array in the vars.php file located in the wp-includes directory. Make sure you use a text editor like NotePad to do this. The array is pretty easy to spot. It begins on line 44 (version 2.0.10). You add the lines you need for your new custom smilies the same way the others are done. It’s really quite straightforward. Here’s what I added to mine:
':beast:' => 'icon_beast.gif', ':E' => 'icon_beast.gif', ':goof:' => 'icon_goofy.gif', ':goofy:' => 'icon_goofy.gif', ':lady:' => 'icon_ladybug.gif', 'O:' => 'icon_ladybug.gif',
As you can see there are six lines of code, but I only made three smilies. The reason is I wanted two different ways to make them.
Done
Here’s the end result:
- If I write
:beast:or:EI get
(Green-Beast) - If I write
:goofy:or:goof:I get
(Goofy) - If I write
:lady:orO:I get a
(Ladybug)
If I ever get bored I think I’ll make a few more! The ones I made aren’t real good, but I can work on that and in due time… for now, it sure was fun making them.
Custom Designed WordPress Smilies via Beast-Blog.com » 1955 Design » Accessible Website Design responds:
Posted: July 21st, 2007 at 8:22 am →
[…] In today’s article, Mike wrote an article titled How to Make Your Own WordPress Smilies. This article explains how to make your own personal smilies / emoticons for use with WordPress. Following Mike’s instructions, I was able to make a personal 1955 Design smilies in a matter of minutes. Genius, I tell you. The guy’s a genius. […]
Joe Dolson responds:
Posted: July 21st, 2007 at 3:33 pm →
Nice one, Mike. I’ve never really thought about customizing that aspect of Wordpress. It’s a great touch, though!
Jermayn Parker responds:
Posted: July 23rd, 2007 at 8:56 pm →
Yeah I have seen this done before with a forum before..
Are there any tutorials which help you edit the admin section? I feel that this is the ‘untouched’ area of WordPress..
Mike Cherim responds:
Posted: July 23rd, 2007 at 10:52 pm →
I do some editing of the admin, but only a little bit. I will add an admin page for related stuff I want to access via the admin only, change textarea sizes, modify quick tags, archive pagination changes, add header links for domain stats and what not, I don’t know of any tutorials, though.
Custom WordPress Smiley Icons » 1955 Design » Accessible Website Design responds:
Posted: July 30th, 2007 at 10:18 am →
[…] I often visit at Mike Cherim’s Beast-Blog. Mike is a genius withto WordPress, and I always learn something new when Mike writes about tweaking WordPress. Adding Your Own WordPress Smilies explains how to make your own personal smilies / emoticons for use with WordPress. Following Mike’s instructions, I was able to make a personal 1955 Design smiley in a matter of minutes. […]
Michael responds:
Posted: August 10th, 2007 at 3:10 pm →
Don’t forget, since WordPress 2.2 you have to edit the functions.php instead of the vars.php
Mike Cherim responds:
Posted: August 10th, 2007 at 3:35 pm →
Thanks Michael. I haven’t used 2.2 on my own yet, only for other people, so I didn’t know that. Appreciate the heads up.
rakkie.net » Blog Archive » Smilies working! responds:
Posted: August 15th, 2007 at 4:18 am →
[…] okay, i finally got the smilies working I think, using the instructions given here: http://green-beast.com/blog/?p=201 […]
Getting Clever with WordPress Smilies - Beast-Blog.com responds:
Posted: September 19th, 2007 at 4:37 pm →
[…] Want to know more? I’ve written about WordPress smilies before, specifically how to make your own. Read that post, then the how-to for this post will be known. And in the end you’ll offer one anti-FUD solution to the most intimidated of clients. I’ve discovered that with a little imagination, WordPress smilies can make life richer and easier — especially if you make sites for others. […]