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

While building Kingdom Geek at RickBeckman.com, 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:.” 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(
   	'bloginfo',
   	'comment_author',
   	'comment_text',
   	'link_description',
   	'link_name',
   	'link_notes',
   	'list_cats',
   	'single_post_title',
   	'term_description',
   	'term_name',
   	'the_content',
   	'the_excerpt',
   	'the_title',
   	'wp_title'
   );
   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; } /* http://devkick.com/lab/tripoli/ */

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!