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.  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 );

to:

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: