How to Add EmojiOne Support to Your WordPress Site

If you aren’t familiar with the new EmojiOne project, it is already taking the web by storm. It’s basically the first time Emojis are actually cool! Even open source software such as Discourse already has an integration with it. Today I am going to share with you how to add EmojiOne support to your WordPress site. 😂

fun with emojione

Emojis

In the past I have not been a huge fan of Emojis, especially when it comes to performance. And usually I disable emojis altogether. But if you add them correctly, using only SVGs, they can be quite fast. Under 1 KB in size! And of course, they add a little fun to your WordPress posts. Follow the steps below to add them to your site.

Step 1

The very first thing to do is to create a plugin to handle the emojione support. There is actually a free Emoji One plugin on the repository, unfortunately it hasn’t been updated for 2 years and is using an out of date library. So in this tutorial, we will create our own. To do this, you will need to navigate to your “wp-content/plugins” folder and create a new directory. In our example, ours is called “emojione.”

emojione plugin folder

Step 2

Inside your newly created folder, create a PHP file with the same name as your folders. In our example, ours is “emojione.php.”

emojione php file

Step 3

In your PHP file, add your plugin info, title, author, etc. You will also need to add our filter function which will add a EmojiOne filter to your WordPress content. You could experiment with adding more filters to other sections of your site, excerpts, comments, etc… the same logic would still apply, just would just need to write slightly different filter functions But today we are just focusing just on the content filter.

You can grab all the code for this below. Of course, you will need to update the plugin info accordingly.

<?php
 /*
 Plugin Name: EmojiOne
 Plugin URI: https://woorkup.com/
 Description: This plugin adds EmojiOne support to WordPress content.
 Version: 1.0
 Author: Brett Jackson
 Author URI: https://woorkup.com/
 License: GPL2
 */

//add emojis to content
 function emojione_content_filter($content) {

include plugin_dir_path(__FILE__) . 'emojione-loader.php';
 $content = $client->toImage($content);
 return $content;
 }
 add_filter('the_content', 'emojione_content_filter', 1);

Step 4

In the above code, you can see that it is including another file, “emojione-loader.php.” Go ahead and create that in your plugin folder and add the following code below. This will load the EmojiOne library which we will be grabbing next. Make sure to update imagePathSVG value to your domain.

<?php
 namespace Emojione;

//include the PHP library (if not autoloaded)
 require('inc/lib/php/autoload.php');

$client = new Client(new Ruleset());

$client->imageType = 'svg';

//ignore ASCII smileys like :)
 $client->ascii = true;

//default svg path
 $client->imagePathSVG = 'https://yourdomain.com/wp-content/plugins/emojione/inc/assets/svg/';

Step 5

Now that the plugin is created, you need to grab the EmojiOne PHP library, the assets, and add them to the plugin. First, start by creating an “inc” directory inside the plugin folder. This will be used to store all the EmojiOne stuff. Below is the full directory structure in case you already got lost. 🤤

emojione plugin contents

Step 6

Go and download the files from Rank’s EmojiOne project. For this tutorial you need the contents of two directories, and make sure to keep the parent directories in place as well.

Step 7

Grab “lib/php” and all the files inside it and copy that into the “inc” directory of your plugin. So you will end up with “emojione/inc/lib/php/” and then all the library content in there.

Step 8

Next, grab “assets/svg” and all the files inside and copy that into the “inc” directory of your plugin. So you will end up with “emojione/inc/assets/svg/” and then all the files inside there.

emojione svg contents

Note: We are using the EmojiOne SVGs for this tutorial due to performance. But you could swap them for PNGs or another asset type. You would just need to copy different asset files and then make some alterations to your “emoji-loader.php” script.

Step 9

Next, go to your plugins page in your WordPress admin and you will see your plugin in the list. Go ahead and activate it.

emojione plugin in wordpress

Step 10

You then need to add some CSS to scale your emojis correctly. If your WordPress theme panel has a custom CSS box you can add this in there. Or you can use a free plugin like WP Add Custom CSS.

.emojione {
 max-height: 1.5em;
 max-width: 1.5em;
 display: inline;
 vertical-align: sub;
}

You can tweak the numbers above to your liking if you want bigger or smaller ones. Assuming you have everything setup correctly, your WordPress posts and content should now support EmojiOne! 😍 Since they are SVGs, each Emoji is under 1 KB, so they are super small in comparison to everything else you are loading on your site. And if you are using a plugin like CDN Enabler, they will automatically load from your CDN.

emoji small under one kb

Keep in mind that the safest way to to use these are with EmojiOne codes like : smile : and : snail : (without the spaces in between). We have also used their function to enable ASCII emoji support like ‘:)’ or ‘:p’ (without quotes) which in most cases will work, but there can be issues every now and then if for example they are placed right next to an html element tag with no space in between.

If you are wanting to take our code and customize a bit further, check out https://demos.emojione.com/latest/index.html for some additional function variations you can use.

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

8 Comments

  1. Matt Moreli April 5, 2017
    • Brian Jackson April 5, 2017
  2. Chris B April 6, 2017
    • Brian Jackson April 6, 2017
      • Chris B April 25, 2017
  3. Santhosh veer April 19, 2017
    • Brian Jackson April 19, 2017
      • Santhosh veer April 19, 2017

Add Comment

28 Shares
Tweet
Share
Share
Buffer