Display different smiley when entering ":)"

Question

If you enter :) in WordPress, it automatically replaces it with:

Is there a way to use a different smiley for the :)

Answer 1

Overriding the emoji of :) to 😎

The content smilies are converted with:

add_filter( 'the_content', 'convert_smilies' );

where this part of the convert_smilies() function is of importance:

$content = preg_replace_callback( $wp_smiliessearch, 'translate_smiley', $content );

If we peek into translate_smiley() then we find the following:

// Don't convert smilies that aren't images - they're probably emoji.
if ( ! in_array( $ext, $image_exts ) ) {
     return $img;
}

before the smilies_src filter is applied.

So this filter isn't available in the case of the :) smiley.

We have the smilies initialized with:

add_action( 'init', 'smilies_init', 5 );

and within the function description for smilies_init() we can read the following:

Plugins may override the default smiley list by setting the $wpsmiliestrans to an array, with the key the code the blogger types in and the value the image file.

Here's the global $wpsmiliestrans array:

$wpsmiliestrans = array(
    ':mrgreen:' => 'mrgreen.png',
    ':neutral:' => "\xf0\x9f\x98\x90",
    ':twisted:' => "\xf0\x9f\x98\x88",
    ':arrow:' => "\xe2\x9e\xa1",
    ':shock:' => "\xf0\x9f\x98\xaf",
    ':smile:' => "\xf0\x9f\x99\x82",
    ':???:' => "\xf0\x9f\x98\x95",
    ':cool:' => "\xf0\x9f\x98\x8e",
    ':evil:' => "\xf0\x9f\x91\xbf",
    ':grin:' => "\xf0\x9f\x98\x80",
    ':idea:' => "\xf0\x9f\x92\xa1",
    ':oops:' => "\xf0\x9f\x98\xb3",
    ':razz:' => "\xf0\x9f\x98\x9b",
    ':roll:' => 'rolleyes.png',
    ':wink:' => "\xf0\x9f\x98\x89",
    ':cry:' => "\xf0\x9f\x98\xa5",
    ':eek:' => "\xf0\x9f\x98\xae",
    ':lol:' => "\xf0\x9f\x98\x86",
    ':mad:' => "\xf0\x9f\x98\xa1",
    ':sad:' => "\xf0\x9f\x99\x81",
    '8-)' => "\xf0\x9f\x98\x8e",
    '8-O' => "\xf0\x9f\x98\xaf",
    ':-(' => "\xf0\x9f\x99\x81",
    ':-)' => "\xf0\x9f\x99\x82",
    ':-?' => "\xf0\x9f\x98\x95",
    ':-D' => "\xf0\x9f\x98\x80",
    ':-P' => "\xf0\x9f\x98\x9b",
    ':-o' => "\xf0\x9f\x98\xae",
    ':-x' => "\xf0\x9f\x98\xa1",
    ':-|' => "\xf0\x9f\x98\x90",
    ';-)' => "\xf0\x9f\x98\x89",
    // This one transformation breaks regular text with frequency.
    //     '8)' => "\xf0\x9f\x98\x8e",
    '8O' => "\xf0\x9f\x98\xaf",
    ':(' => "\xf0\x9f\x99\x81",
    ':)' => "\xf0\x9f\x99\x82",
    ':?' => "\xf0\x9f\x98\x95",
    ':D' => "\xf0\x9f\x98\x80",
    ':P' => "\xf0\x9f\x98\x9b",
    ':o' => "\xf0\x9f\x98\xae",
    ':x' => "\xf0\x9f\x98\xa1",
    ':|' => "\xf0\x9f\x98\x90",
    ';)' => "\xf0\x9f\x98\x89",
    ':!:' => "\xe2\x9d\x97",
    ':?:' => "\xe2\x9d\x93",
);

or the nicer ksorted display:

Array
(
    [;-)] => 😉
    [;)] => 😉
    [:|] => 😐
    [:x] => 😡
    [:wink:] => 😉
    [:twisted:] => 😈
    [:smile:] => 🙂
    [:shock:] => 😯
    [:sad:] => 🙁
    [:roll:] => rolleyes.png
    [:razz:] => 😛
    [:oops:] => 😳
    [:o] => 😮
    [:neutral:] => 😐
    [:mrgreen:] => mrgreen.png
    [:mad:] => 😡
    [:lol:] => 😆
    [:idea:] => 💡
    [:grin:] => 😀
    [:evil:] => 👿
    [:eek:] => 😮
    [:cry:] => 😥
    [:cool:] => 😎
    [:arrow:] => ➡
    [:P] => 😛
    [:D] => 😀
    [:???:] => 😕
    [:?:] => ❓
    [:?] => 😕
    [:-|] => 😐
    [:-x] => 😡
    [:-o] => 😮
    [:-P] => 😛
    [:-D] => 😀
    [:-?] => 😕
    [:-)] => 🙂
    [:-(] => 🙁
    [:)] => 🙂
    [:(] => 🙁
    [:!:] => ❗
    [8O] => 😯
    [8-O] => 😯
    [8-)] => 😎
)

So if I correctly understand the above core comment, then we could do the following:

/**
 * :) as the cool emoji
 */
add_action( 'init', function() use ( &$wpsmiliestrans )
{
    if( is_array( $wpsmiliestrans ) && get_option( 'use_smilies' ) )
        $wpsmiliestrans[':)'] = $wpsmiliestrans[':cool:'];

}, 6 );

but this only works for predefined smiley keys, for the $wp_smiliessearch to work.

But I don't like this suggested approach, modifying the global array! Hopefully there's another one better!

Demo plugin - 🎅

I tried to come up with an application for this. I'm not sure if this already exists, but here it is:

<?php
/**
 * Plugin Name: Santa's Smile In December
 * Description: Change the emoji of :) to the Santa Claus emoji, but only in December
 * Plugin URI:  https://wordpress.stackexchange.com/a/218496/26350
 */
add_action( 'init', function() use ( &$wpsmiliestrans )
{
    // :) as Santa Claus
    if( 
           is_array( $wpsmiliestrans ) 
        && get_option( 'use_smilies' ) 
        && 12 == current_time( 'n' ) 
    )
        $wpsmiliestrans[':)'] = "\xF0\x9F\x8E\x85";

}, 6 );

Thanks to Ismael Miguel for the global comment, I rewrote the snippets accordingly.

Here's the newly created ticket #35905 by Pieter Goosen, regarding a new smilies_trans filter.

Update - WordPress 4.7+

The new filter will be available in WordPress 4.7+, but it's name will be smilies not smilies_trans.

Our above examples can be written as:

add_filter( 'smilies', function( $smilies )
{
    if( isset( $smilies[':cool:'] ) )
        $smilies[':)'] = $smilies[':cool:'];

    return $smilies;
} );

or explicitly with:

add_filter( 'smilies', function( $smilies )
{
    $smilies[':)'] = "\xf0\x9f\x98\x8e";

    return $smilies;
} );

The demo plugin becomes:

<?php
/**
 * Plugin Name: Santa's Smile In December
 * Description: Change the emoji of :) to the Santa Claus emoji, but only in December
 * Plugin URI:  https://wordpress.stackexchange.com/a/218496/26350
 */

add_filter( 'smilies', function( $smilies )
{
    // :) as Santa Claus
    if( get_option( 'use_smilies' ) && 12 == current_time( 'n' ) )
        $smilies[':)'] = "\xF0\x9F\x8E\x85";

    return $smilies;
} );

We don't need to mess around with the global $wpsmiliestrans array anymore!

Answer 2

According to the WordPress Codex on using smilies:

Upload the images you want with the same name to your server (say in wp-content/images/smilies) and put this in your theme's function.php:

add_filter( 'smilies_src', 'my_custom_smilies_src', 10, 3 );
   function my_custom_smilies_src($img_src, $img, $siteurl){
       return $siteurl.'/wp-content/images/smilies/'.$img;
   }

That will replace http://example.com/wp-includes/images/smilies/icon_question.gif with http://example.com/wp-content/images/smilies/icon_question.gif