Add Twitter Emoji Support to wordpress post/page and comment form

Add Twitter Emoji Support to wordpress

Automattic announced last week that they have partnered with Twitter to bring its open source emoji icon set to the WordPress.com platform. They are also going to release this functionality through Jetpack plugin so WordPress.org users can add emoji to posts as well.

But before that, what if you want to experience the icon set in advance so that your wordpress blog seems go far beyond others? You have two choices:

  • #1: Install a plugin like Emoji One
  • #2: Make your hands dirty by making some code tweaks

So if you are looking to try #2, read on.

In this post I will show you how to manually integrate Twitter Emoji in your wordpress site so you can add the emoji set to your post and also comment form (I don’t think many others are doing this for the comment form but I do).

Step 1: Download the Twitter Emoji Icon set

Download Download it and extract it to your theme directory.

Please note that there are only 22 icons in this set.

Step 2: Replace default wordpress emoji with twitter emoji

Put following codes to your functions.php

add_filter('smilies_src','fa_smilies_src',1,10);
function fa_smilies_src ($img_src, $img, $siteurl){
    $img = rtrim($img, "gif");
    return get_bloginfo('template_directory').'/smilies/'.$img.'png'; // change twitter emoji pics path if needed
}

Step #3: Output Emoji function

Put following codes to your functions.php

function fa_get_wpsmiliestrans(){
    global $wpsmiliestrans;
    $wpsmilies = array_unique($wpsmiliestrans);
    foreach($wpsmilies as $alt => $src_path){
        $output .= '<a class="add-smily" data-smilies="'.$alt.'"><img class="wp-smiley" src="'.get_bloginfo('template_directory').'/smilies/'.rtrim($src_path, "gif").'png" /></a>';
    }
    return $output;
}

Step #4: Add a quick add button on post editor screen

Still goes to functions.php

add_action('media_buttons_context', 'fa_smilies_custom_button');
function fa_smilies_custom_button($context) {
    $context .= '<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.24);padding: 10px;position: absolute;top: 60px;width: 400px;display:none}.smilies-wrap img{height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block}</style><a id="insert-media-button" style="position:relative" class="button insert-smilies add_smilies" title="Add Emoji" data-editor="content" href="javascript:;">
<span class="dashicons dashicons-admin-users"></span>
Add Emoji
</a><div class="smilies-wrap">'. fa_get_wpsmiliestrans() .'</div><script>jQuery(document).ready(function(){jQuery(document).on("click", ".insert-smilies",function() { if(jQuery(".smilies-wrap").hasClass("is-active")){jQuery(".smilies-wrap").removeClass("is-active");}else{jQuery(".smilies-wrap").addClass("is-active");}});jQuery(document).on("click", ".add-smily",function() { send_to_editor(" " + jQuery(this).data("smilies") + " ");jQuery(".smilies-wrap").removeClass("is-active");return false;});});</script>';
    return $context;

After this step, on the edit screen, it should look like this:

Add Twitter Emoji Support to wordpress

Step #5: Add twitter emoji to comment form

If your theme are using function comment_form(); in the comments.php, put following to functions.php.

add_filter( 'comment_form_defaults','fa_add_smilies_to_comment_form');
function fa_add_smilies_to_comment_form($default) {
    $commenter = wp_get_current_commenter();
    $default['comment_field'] .= '<p class="comment-form-smilies">' . fa_get_wpsmiliestrans() . '</p>';
    return $default;
}

If your theme uses a custom comment form function, add this line to somewhere at the end of comment form in comments.php

<?php echo fa_get_wpsmiliestrans();?>

After this step, check your comment form and the twitter emoji should have been adhered to the end of comment form.
add twitter emoji to wordpress comemnt form

Step #6: Load required javascript

Put this in your js file.

jQuery(document).on("click", ".add-smily",
function() {
        var myField;
        tag = ' ' + jQuery(this).data("smilies") + ' ';
        if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {
            myField = document.getElementById('comment');
        } else {
            return false;
        }
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = tag;
            myField.focus();
        }
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var cursorPos = endPos;
            myField.value = myField.value.substring(0, startPos)
                          + tag
                          + myField.value.substring(endPos, myField.value.length);
            cursorPos += tag.length;
            myField.focus();
            myField.selectionStart = cursorPos;
            myField.selectionEnd = cursorPos;
        }
        else {
            myField.value += tag;
            myField.focus();
        }
    return false;
});

Sample CSS:

.wp-smiley{
	width:16px;height:16px;vertical-align:middle
}
.add-smily{
	background:#fff;border:0;cursor:pointer
}
.add-smily .wp-smiley{
	width:24px;height:24px;margin-right:5px
}

Now enjoy the twitter emoji on your site.

Thanks Bigfa for this great guide.

Save

Author: Leo

My name is Leo who's behind this blog. I've been working with wordpress since 2010. I'll write about themes, plugins, tutorials and all about wordpress here. Hope you find it useful!

Leave a Reply

Your email address will not be published. Required fields are marked *