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 <em> 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

A couple weeks ago I made a WordPress plugin to generate unique monsters for each commenter. Don Park came up with the original idea for representing users with geometric shapes. Since I already had the framework in place I thought I’d make a WordPress plugin for the original geometric Identicons. If you want to visually represent users (but maybe you don’t like monsters so much?) then this plugin is for you.

So what is an Identicon? It’s a randomly generated assortment of shapes that is specific to a commenter’s email (or if you prefer IP address). Identicons allow visual representations of commenters without requiring any external sites or user interactions. With 40 possible shapes (about 70 with inversions) in 3 possible positions, around 8000 distinguishable colors and four different rotations for each part, there should be several billion possible shape combinations which, even with the increasing chance of overlap with each additional user, should be quite enough for almost any blog.

Features

• Dynamically generated avatars for each commenter
• Consistently themed geometric icons
• Consistent on any blog
• Gravatar support
• Theme edits no longer necessary

Current Version:

WP_Identicon v1.02

Installation instructions:

Unzip wp_identicon.zip. Upload wp_identicon.php and the identicon folder. Make sure the identicon folder is writable. If your unzipping program creates a wp_identicon folder please only upload the contents (wp_identicon.php and the identicon folder). That should be it. Identicons should now appear next to your commenter’s names.

You can adjust the background and foreground colors, the number of squares in and the size of the identicons in the Identicon Control Panel. You can also clear the Identicon image cache in the control panel.

Configuration:

Identicon Size in Pixels

How many pixels high and wide you want your Identicons. 35 by 35 seems like a decent compromise between compactness and clarity but they should remain mostly clear at any reasonable size.

Number of Squares

Number of shape blocks to build Identicon out of. Don Parks uses 3 by 3. I kind of like 4 by 4 myself. More than 4 starts to get a bit cluttered but can be interesting.

Background colors

The color of the background (empty part) of the Identicon. Personally I really like when the background matches the surroundings and the identicon appears to blend into it. Setting this to 0,0,0 makes the background transparent (what I’m using here) but IE6 does not like transparency in PNG’s and just fills the background with grey. If you know the R,G,B values of your background then you could set them directly here or you can put in a range of colors (like 1-255,255,255 to get backgrounds ranging from blue to light blue to white).

Foreground colors

The color of the foreground (colored part) of the Identicon. If this is 1-255,1-255,1-255 you will get Identicons of all the possible R,G,B colors. If you want only a certain color you could set the R,G,B values here (like 255,0,0 for only red Identicons) or you can put in a range of colors (like 1-255,255,255 to get Identicons ranging from blue to light blue to white).

CSS Styling

This is not in the Options menu. You can edit the CSS styling by adjusting the style.css file of your current theme. Identicons can be selected by img.identicon. A good start might be to add img.identicon{float:left; margin-right:3px;} to the bottom of your style.css.

For Advanced Users:

You can add CSS for img.identicon in your theme’s style.css. For even more control, you can disable the automatic placement in the Identicon Control Panel and add an identicon to any comment with identicon_build($comment->comment_author_email, $comment->comment_author);. For example, find the comments.php of your current theme (it should be in the folder wp-content/themes/[currentThemeName]/). Open it up and look for something similar to foreach ($comments as $comment). Inside this loop there should be code that displays the comment author’s name or metadata like <p class="comment-author"> or <p class="comment-metadata">. Just before all this enter:
<?php if (function_exists(identicon_build)) echo identicon_build($comment->comment_author_email, $comment->comment_author); ?>

If you would prefer to base the Identicons on the commentor’s IP address instead of the commentor’s email just replace $comment->comment_author_email in the above with $comment->comment_author_IP.

icoguo has kindly translated the install instructions to Chinese and Tai has translated them to Japanese although these are a bit outdated since version 0.51.

If any of this is unclear just let me know in the comments and I’ll do my best to guide you through it.

Change Log:

• v1.02 5-6-2008:
  • Fixed WP 2.5+ built-in avatars when $id_or_email not email
• v1.01 5-2-2008:
  • Fixed WP 2.5+ built-in avatars and gravatar support
• v1.0 5-1-2008:
  • Fixed automatically adding identicons to sidebar in single posts bug
  • Supports WP 2.5+ built-in avatars
• v0.62 2-14-2008:
  • Added Recent Comment (with Identicons) Widget
  • Deals with nested directories
• v0.56 1-27-2007:
  • Fixed manual identicon global problem (Thanks again to Anton)
• v0.55 1-27-2007:
  • Fixed gravatar option (Thanks Anton)
• v0.51 1-9-2007:
  • Added custom random number generator
  • Monsters now consistent across servers
  • Added greyscale option (nice for B&W themes)
  • Added auto placement option
  • Added gravatar support
  • Obscured filenames
  • Clarified options page
  • Changed get_settings to get_option
  • Fixed bug in random number generator seed
  • Changed download link to WordPress Extends
• v0.2 2-6-2007:
  • Switched to heading/distance shape representation
  • Added a bunch of shapes
  • Added transparency
  • Added option to choose number of pieces in Identicon (I’m partial to 4×4)
  • Added height and width attributes to img for accessibility
• v0.1 1-31-2007:
  • Implemented 9 block identicon as per Don Park’s idea but using the srand() setting method of MonsterID