I’ve been burned a few times in WordPress when posting something like:

This is how you make text italic: This is italic.

when I actually wanted:

This is how you make text italic: <em>This is italic.</em>

Of course it’s not too hard to remember to encode the special characters but this is WordPress and things are supposed to be easy. So I thought I would throw together a simple WordPress plugin to convert HTML special characters inside <code></code> tags. That was a few months ago and I got the plugin most of the way done and then got distracted with other things. But after reading about another person having the same annoyance, I decided I should finish the plugin.

So here is WP_CodeShield. It simply looks for <code></code> tags in posts and comments and makes sure the contents are encoded properly. You just type the code you want inside <code></code> tags and it should appear correctly. So you can type <code><em>This is italic.</em></code> instead of <code>&lt;em&gt;This is italic.&lt;/em&gt;</code>.

If you have any questions, suggestions or requests, please leave them in the comments below. You can also test WP_CodeShield out in the comments if you are curious.

Current Version:

WP_CodeShield v0.4

Installation instructions:

Unzip wp_codeshield.zip. Upload wp_codeshield.php to wp-content/plugins/ and active in the Plugin Control Panel. That’s it. Anything inside <code></code> tags will now automatically be converted to proper HTML.

Technical Details

Most people should be OK just using WP_CodeShield naturally but for especially fancy users here are the more technical details:
Nested code tags are ok (I’ve been using them in this post) but unequal numbers of <code> and </code> will cause the plugin to leave the entire post or comment alone. WP_CodeShield will leave any string which already contains HTML special characters alone. For example &lt;em&gt; will be left alone. This is in case you have previously hand entered the special characters or want to describe something more complex than the plugin can handle. To keep track of these special occurrences, WP_CodeShield adds a small invisible comment tag (<!--formatted-->). WP_CodeShield only looks for <code></code> tags. <code ></code > or <code class="fancy"></code> will not be filtered. One small gotcha is that if a post contains <code class="fancy"></code> no filtering will occur on that post (WP_CodeShield will think that the tags are unbalanced). You can get around this by making sure both the opening and closing tags do not match WP_CodeShield’s target like <code class="fancy"></code > (the extra space keeps WP_CodeShield from seeing the tags but are still valid HTML).

Change Log:

  • v0.4 02-04-2008:
    • Changed filter to match updated wordpress the_editor_content
  • v0.3 2-26-2007:
    • Properly converts when saving and unconverts when editing
    • Doesn’t convert contents that are already encoded
    • Corrected wordpress hooks
  • v0.2 2-26-2007:
    • Allows nested codes
  • v0.1 2-13-2007:
    • A rough filter