WordPress Plugin: Read More, the Patchset

Current Version: v0.1.0

Features:

Control the textual content the “read more” link created from clicking the “more” button in your visual and HTML editors. No need to edit your templates.
Uses the exact same function to generate the “read more” link as WordPress and supports all of the same functionality. Simple click the “more” button from your visual and HTML editors just like before!
Insert custom text or HTML before and after your “read more” links.
No coding required. My previous solution was to patch WordPress. This plugin requires absolutely no changes to WordPress other than installation of the plugin.
Removal is easy. If you don’t like this plugin, simply delete it from your plugins folder and your templates will work exactly as before.

If you’re like me, you’ve found WordPress’ template system to be amazingly simple and easy to use. Unfortunately, certain things like the_content() don’t act as one might expect. For example, some functions in WordPress have options to pass before and after attributes to modify their output from within the template. the_content() does not.

One handy thing about the_content() is its ability to accept a text argument for displaying a “read more” link and the only thing you have to do to activate this functionality (called a “teaser” in the WordPress lexicon) is to add <!–more–> to your post at the point you want to cut the teaser off.

However…

the_content() accepts three valid arguments in the form of:

function the_content($more_link_text = null, $teaser = 0, $more_file = '') { }

Where:

$more_link_text is the text to display for the “read more” link
$teaser if true strips the teaser from the full post body once the reader has clicked on “read more,” but defaults to displaying both the teaser and the full text (false).
$more_file appears unused according to the source

Now, you might expect to be able to do something like this from within your template:

// Show the content and create a custom <div> for our link text
the_content('<div class="read-more">Read More...</div>');

But, you’ll notice that this outputs instead as:

<a href="permalink/to/article/#more-article_id" class="more-link"> <div class="read-more">Read More...</div></a>

This will generally render fine in Firefox even with a DOCTYPE declaration but more other browsers are a little more strict with their processing. So, if you specify CSS attributes for .read-more a or .read-more a:hover, Opera, Chrome (KHTML and WebKit), and IE 7+ won’t display the mouse-overs consistently. This is, of course, because of the position of the DIV tag.

The Solution

I have created a plugin that resolves this particular dilemma by letting you choose both the textual display for your “read more” link and control the enclosing HTML. I’m sure there’s another plugin out there that does the same thing more thoroughly, but I wanted to use this as an excuse to learn WordPress’ plugin system. So far, I’m impressed.

Installation

Installation is quite simple. Simply download the latest version and unzip into your wp-content/plugins directory. The plugin will add a new administrative option:

options_window

That will give you control over setting these values:

options_main

Simply update the fields with whatever you prefer, click “Apply Changes,” and there you go! No need to make any alterations to your template sources and 100% code free.

***