Two Simple WordPress Tweaks: Comments Only Emoticons and Thinly Spaced Em-Dashes

While building Kingdom Geek at, I packed my theme’s custom/custom_functions.php file to the brim with all sorts of customizations — some simple, some common, and others that maybe only I would ever appreciate.

Still, I wanted to share a couple of these code snippets with you, on the off chance that they may be useful to you as well.

An Emotional Tweak

When it comes to using emoticons — or smileys — I admit that I enjoy using them; however, I do not find them to be appropriate for blog posts. I especially dislike it when I attempt to write a Bible verse reference such as “(Matthew 1:8)” only to find that WordPress converts it to the much less desirable “(Matthew 1:8).” Not cool.

However, while the option to disable emoticons exists (“Convert emoticons like :-) and :-P to graphics on display” in Settings → Writing), I did not want to disable emoticons for comments.

Emoticons are most beneficial when used to add tone to conversation, so while I did not want WordPress to add any emoticons to my posts and pages, I did still want the emoticons converted in my comments.

Unfortunately, no such options exist to do something like that, so I had to tweak the actions myself, which turned out to be fairly simple to do.

  1. Leave the option enabled in Settings → Writing to convert emoticons.

  2. Add this bit of code to your theme’s functions.php file; if you are using the incomparable Thesis theme, this snippet goes in custom/custom_functions.php. If you are using Thesis with OpenHook enabled, skip this step. Here’s the code:

    remove_filter('the_content', 'convert_smilies');
    remove_filter('the_excerpt', 'convert_smilies');
  3. Thesis OpenHook users can use this bit of code in OpenHook’s “Before HTML” field, making sure to turn on PHP for that field:

    <?php remove_filter('the_content', 'convert_smilies');
    remove_filter('the_excerpt', 'convert_smilies'); ?>
  4. Save and, if applicable, upload. Enjoy.

You’ll now be able to write posts with impunity, no need to worry about WordPress mangling your code or parenthetical comments or whatever else, yet you’ll still be able to liven up your comments with a little smile!

The Emperor’s Em-Dash’s New Clothing

The more I learn about typography, the more finicky I become with the markup and even punctuation of my writings.

Take for instance the em-dash (—). WordPress automatically converts two hyphen-minuses (--) to an em-dash, and by default it surrounds these em-dashes with a space, which is great; em-dashes look best when surrounded by a space.

However, an ordinary space is too much, as illustrated:

  • No spaces: Nunc semper—nisi a accumsan sodales—velit nisl tempor augue, in scelerisque odio mi eu tellus.
  • Ordinary spaces: Nunc semper — nisi a accumsan sodales — velit nisl tempor augue, in scelerisque odio mi eu tellus.
  • Thin spaces: Nunc semper — nisi a accumsan sodales — velit nisl tempor augue, in scelerisque odio mi eu tellus.

Notice the difference? I love how the third looks, but I didn’t want to waste time while writing replacing ordinary spaces with thin spaces. Clearly, a programmatic solution was needed.

The solution I came up with probably isn’t the best — I replaced wptexturize() with my own implementation of the same function, and I set up this replacement to affect all the various places wptexturize() is used: posts, category names, and so on. Here’s how:

  1. Add this bit of code to your theme’s functions.php file; if you are using the Thesis theme, this snippet goes in custom/custom_functions.php. Thesis OpenHook users can use this bit of code in OpenHook’s “Before HTML” field, making sure to turn on PHP for that field. Here’s the code:

    function custom_wptexturize($text) {
    	global $wp_cockneyreplace;
    	$next = true;
    	$has_pre_parent = false;
    	$output = '';
    	$curl = '';
    	$textarr = preg_split('/(<.*>|\[.*\])/Us', $text, -1, PREG_SPLIT_DELIM_CAPTURE);
    	$stop = count($textarr);
    	if ( isset($wp_cockneyreplace) ) {
    		$cockney = array_keys($wp_cockneyreplace);
    		$cockneyreplace = array_values($wp_cockneyreplace);
    	} else {
    		$cockney = array("'tain't","'twere","'twas","'tis","'twill","'til","'bout","'nuff","'round","'cause");
    		$cockneyreplace = array("&#8217;tain&#8217;t","&#8217;twere","&#8217;twas","&#8217;tis","&#8217;twill","&#8217;til","&#8217;bout","&#8217;nuff","&#8217;round","&#8217;cause");
    	$static_characters = array_merge(array(' --- ', '---', ' -- ', '--', 'xn&#8211;', '...', '``', '\'s', '\'\'', ' (tm)'), $cockney);
    	$static_replacements = array_merge(array('&thinsp;&#8212;&thinsp;', '&#8212;', '&thinsp;&#8212;&thinsp;', '&#8211;', 'xn--', '&#8230;', '&#8220;', '&#8217;s', '&#8221;', ' &#8482;'), $cockneyreplace);
    	$dynamic_characters = array('/\'(\d\d(?:&#8217;|\')?s)/', '/(\s|\A|")\'/', '/(\d+)"/', '/(\d+)\'/', '/(\S)\'([^\'\s])/', '/(\s|\A)"(?!\s)/', '/"(\s|\S|\Z)/', '/\'([\s.]|\Z)/', '/(\d+)x(\d+)/');
    	$dynamic_replacements = array('&#8217;$1','$1&#8216;', '$1&#8243;', '$1&#8242;', '$1&#8217;$2', '$1&#8220;$2', '&#8221;$1', '&#8217;$1', '$1&#215;$2');
    	for ($i = 0; $i < $stop; $i++) {
     		$curl = $textarr[$i];
    		if (!empty($curl) && '<' != $curl{0} && '[' != $curl{0} && $next && !$has_pre_parent ) {
    			$curl = str_replace($static_characters, $static_replacements, $curl);
    			$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
    		} elseif (strpos($curl, '<code') !== false || strpos($curl, '<kbd') !== false || strpos($curl, '<style') !== false || strpos($curl, '<script') !== false) {
    			$next = false;
    		} elseif (strpos($curl, '<pre') !== false) {
    			$has_pre_parent = true;
    		} elseif (strpos($curl, '</pre>') !== false) {
    			$has_pre_parent = false;
    		} else {
    			$next = true;
    		$curl = preg_replace('/&([^#])(?![a-zA-Z1-4]{1,8};)/', '&#038;$1', $curl);
    		$output .= $curl;
      	return $output;
    $filters = array(
    foreach ($filters as $filter) {
    	remove_filter($filter, 'wptexturize');
    	add_filter($filter, 'custom_wptexturize');

    I’m not 100% sure that WordPress is posting that code without mangling some part of it, so just to be certain, you can get the unadulterated code at PasteBin.

  2. Save and, if applicable, upload. Enjoy.

Note that the code may only work properly in WordPress 2.7RC1 — the wptexturize() code changed ever so slightly from WordPress 2.6.2 to 2.7RC1. Still, caveat emptor.

Also, I’m fully aware that “hair spaces” are the preferable method of wrapping em-dashes, but as I understand it, browser support for hair spaces is a bit flaky; I use thin spaces instead as the closest, best supported alternative.

And & Symbols

A quick bonus tip here: pretty ampersands! Just check out the difference:

  • Cheese & sausage make excellent omelets.
  • Cheese & sausage make excellent omelets.

See how awesome that second ampersand is?

I can’t recall where I first read about the importance of pretty ampersands, but I cannot deny the awesomeness with which they imbue my text.

The particular styling I’m using comes from Tripoli, and you can get the same awesomeness by adding this to your theme’s stylesheet (for Thesis users, that would be custom/custom.css):

.amp { line-height: 1em; font-weight: normal; font-style: italic; font-family: 'baskerville italic', 'Warnock Pro', 'Goudy Old Style', 'Palatino', 'palatino linotype', 'Book Antiqua', Georgia, serif; } /* */

Then within your text, you’ll need to wrap your ampersands thusly: <span class="amp">&</span>

And thank you for doing your part to beautify the Web!

10 thoughts on “Two Simple WordPress Tweaks: Comments Only Emoticons and Thinly Spaced Em-Dashes”

  1. Wow! I didn’t know WP automatically converted en and em dashes! I use the html entities in my posts. :P

    That fix for the emoticons is great. So simple! Actually, to be honest, I like how those text ones (is that a monospace font?) look in your post better than the yellow ones!

  2. You’re kidding?! I’ve been using &hellip; in my posts for a while. Definitely giving that up!

    Actually from what Matt Mullenweg said at WordCamp, it seems that typography is one one of the things that spawned WordPress. He was using b2 and was continually typing in the entities for curly quotes and everything. So, he decided to create something smarter.

  3. I have heard that; the autop() (I think) function was also a big deal — auto placement of paragraph tags.

    With a name like “WordPress,” excellent portrayal of words ought to be a huge priority.

    Can’t believe you’ve been doing all this manually. :D Glad I could save you some time from now on! :D :D

    1. The custom.css file cannot be edited within WordPress (can be via OpenHook if various conditions are met), but should instead by edited via whatever file manager you use for upload/download to your host. It’s in thesis/custom/.

  4. Avinash D'Souza

    I had a very basic question Rick…where is the custom.css file stored?

    When I go to Appearance>>Editor, I don’t see any such file. Am I missing something here?

    * Archives Page Template (archives.php)
    * Comments (comments.php)
    * Custom Template Page Template (custom_template.php)
    * Footer (footer.php)
    * Header (header.php)
    * Main Index Template (index.php)
    * No Sidebars Page Template (no_sidebars.php)
    * Theme Functions (functions.php)
    * Stylesheet (style.css)

    That’s all I see…I just bought Thesis today so maybe that has something to do with it. :-)


  5. Avinash D'Souza

    Sorry for the lack of clarity with th above post…I’m referring to the typography issue you’ve discussed.

    When I paste the following code into the Before HTML component of OpenHook(Killer plugin btw!!) I get the code outputted as text above the header. Any ideas as to why this might be so?

    function custom_wptexturize($text) {
    global $wp_cockneyreplace;


  6. hello dear Webmaster,
    i love this site: All looks nice & clean and very very tidy. How to manage the theme 2016?
    i switched from twentyfourteen to twentysixteen. And now i wonder how to achieve a three column design. See the page –
    at the moment i think that the center area is toooo small.
    Do you have any idea to achieve a three column design!?
    love to hear from you
    regards martin

Leave a Comment

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

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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

the Rick Beckman archive
Scroll to Top