WordPress Tips 2018

A few weeks ago, I coded my theme from scratch and I wanted to have my own emoticon like previously, but with the new WordPress I couldn’t without the same old plugin which wasn’t updated in years. Since I wanted to have up to date code, I tried a new one. But nothing. Reading online I discovered that now WordPress uses emoji, using scripts that are full of errors and making the website slow.

I tried to follow tutorials online but nothing worked…

At the end I tried the plugin Classic Smilies, which works fine, the problem was that I wanted my own custom made smilies and with this plugin you can only have the WordPress classic smilies just like the name says.

So I created a new folder in the Classic Smilies plugin folder (I know I could have just changed the one that is already there but I’m anal with order that I wanted to have a backup just in case), called it “images” (the one with the plugin is called “img”), uploaded all my emoticons in that folder and opened up classic-smilies.php. On line 16 there is this line:

return plugins_url( "img/{$img}", __FILE__ );

and I changed it to:

return plugins_url( "images/{$img}", __FILE__ );

so now my emoticons are loaded instead of the classic WordPress ones.

But my emos were all squashed, because WordPress adds a line of style to my emoticons. :angry: I googled some more and found this tutorial, I followed it but my smilies still shrinked.

Fortunately I scrolled down my page, and it was a single page where I had comments in it and found out that the smilies in the comments didn’t shrink. And I said, “how come?” the code is the same! So I searched in classic-smilies.php and found out these lines from line 84 to 86:

 add_filter( 'the_content', 'classic_smilies_rm_additional_styles', 11 );
 add_filter( 'the_excerpt', 'classic_smilies_rm_additional_styles', 11 );
 add_filter( 'comment_text', 'classic_smilies_rm_additional_styles', 21 );

see how in “comment-text” the last number is 21 but the others are 11? So I tried to change that 11 to 21 and boom, the previous tutorial worked. Don’t ask me why, I’m not a coder and I don’t know a lot of php, I don’t even know why those numbers are there, but it worked and it seems that the site isn’t broken so I keep it like this (until it breaks).

So I changed those previous lines to:

 add_filter( 'the_content', 'classic_smilies_rm_additional_styles', 21 );
 add_filter( 'the_excerpt', 'classic_smilies_rm_additional_styles', 21 );
 add_filter( 'comment_text', 'classic_smilies_rm_additional_styles', 21 );

changed this last line, about line 95:

return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="wp-smiley"', $content );


return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="cst-wp-smiley"', $content );

this erase the "height: 1em; max-height: 1em" that wordpress adds automatically.

At the end I added this code to my CSS

img.cst-wp-smiley { 
 border: none !important;
 background: none !important;
 padding: 0;

You don’t need to do the last part if you don’t have images styled in your posts but I have the option to style all my images to a gray border and a gray background when I post an image without adding additional class so I had to add this code to my style.css or I would have had an emoticon with a gray border around it and a gray background.

Share On:
Post on TwitterPost on FacebookPost on WhatsappPost on LinkedinPost on DigPost on StumbleUpon

2 coffees on “WordPress Tips 2018

  1. WordPress is so customizable which is great but sometimes you have to do a lot of your own digging to figure how to do things. I’m glad you got it working though! Smilies remind me of the old Livejournal days when you could customize your smilies. I haven’t used smilies since then, I think. I do the odd :) and :( sometimes but that’s it haha!

    1. Yeah, it took me a while to understand since coding isn’t my field, but I’m happy I was able to figure it out! I love custom smilies and even if I like emoji, I don’t like them that much (I mean they’re fine for phones and messaging but not for blogging, in my amble opinion :D )

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.