( WP Plugins)

WP Plugins

Wordpress Plugin: Read More Right Here

A small, simple to use plugin to automatically transform your <!--more--> links into “view right here” links. When clicked, the rest of that entry’s content will be loaded and made visible to the reader immediately, without redirecting them to the post’s single page display.

To view this plugin in action, visit the Wooliet front page and find an entry with a “read more” link. Click the link and watch the content load. Click again and the content will slide back out of view.

Download and Use Right Now!

The latest version of the “Read More Right Here” plugin is available for download at Wordpress’s plugin directory

Install

  1. Extract the ‘read-more-right-here’ directory to your Wordpress installation’s ‘wp-content/plugins’ directory
  2. Find the ‘Read More Right Here’ entry in the “Plugins” listing within your Wordpress dashboard and click “Activate”

How It Works

“Read More Right Here” uses the jQuery framework already included with Wordpress installations. When your blog is loaded, all links of the “more” class (as created by Wordpress when you include the <!--more--> quicktag) are modified to no longer send the user to that post’s single page display when clicked. Instead, the Wordpress database is queried for that specific post, and all content after the <!--more--> tag (i.e. only what you need) is returned. The new content is then immediately displayed to the user, inline with the opening content.

If clicked once more, the new content will slide out of view. Now that it has loaded, any subsequent clicks will simply re-display that existing content. No new server requests are made!

If, for some reason, the request fails, an error message is displayed where the new content would have been seen. The <!--more--> link then reverts to normal use so that the reader can still click on it to go to its single page display.

Lightweight and Unobtrusive

I consider this a “lightweight”, unobtrusive plugin for two reasons:

  1. Your WP blog is not modified in any way. All existing and future entries will look exactly the same. You can choose to modify the “more” text passed to the_content to reflect the new behavior (e.g. “View the rest of this entry right here”) if you choose, but that is entirely up to you.
  2. There are no “options” or any other modifications to your WP database. If deactivated and deleted, this plugin will leave no trace of itself behind.

In short, “Read More Right Here” is a quick and easy way to quickly upgrade your Wordpres blog’s functionality without the need for unnecessary options or modifications to your existing Wordpress installation.

Modifying

1. Available Options

The read-more-right-here.php source file contains variable whose values can be modified. This is not as nice as a full-blown ‘options’ page within Wordpress, but it does avoid any additional database clutter and queries that would otherwise be needed. (I will most likely add that options page at some point, but for now it’s just variable values).

The current options:

  • $loadImageName: change the name of image file displayed as part of the ‘loading’ process
  • $moreLinkText_OnExpand: change anchor text when the ‘read more’ link has been clicked (e.g. ‘read less’)
  • $addLinkToEnd_OnExpand: add a copy of the ‘read more’ link to the bottom of the new content
  • $animateSpeed: speed of new content slide in/out

2. The “Loading” Image

The “loading” image used to visually inform the user that the new content is arriving was created using the excellent Ajax Load website. If you would like to modify the default image used with this plugin (i.e. make it bigger, match your theme’s colors, etc.), simply create a new image named “ajax-loader.gif” and drop it into this plugin’s root directory (plugins/read-more-right-here).

Alternatively, and related to the ‘Available Options’ given above, create the new image with any name you like. Change the value of $loadImageName to your file, and it can then be dropped in the plugin’s root directory.

3. Debugging the Javascript

The javascript used for this plugin is found in “read-more-right-here/js/wt_rmrh.js“. It has been compressed using Google’s Closure Compiler. The original, uncompressed javascript is also included and is named “wt_rmrh-debug.js”. To use the uncompressed javascript file, open “read-more-right-here.php” and find the call to wp_register_script. The second parameter in that function call is the name of the javascript file loaded by Wordpress for this plugin. Modify it to “js/wt_rmrh-debug.js” and the uncompressed version will be used.

        // wt_rmrh.js can be replaced with wt_rmrh-debug.js
        // to debug uncompressed javascript source
        wp_register_script(
            'wt_rmrh', 
            wt_rmrh_getBasePath() . "js/wt_rmrh.js",
            array('jquery'));
 
        wp_enqueue_script('wt_rmrh');

4. Calling the Plugin Manually

If the plugin needs to be executed manually for any reason (see this support thread for an example), it can be called directly:

    // No arguments: executes plugin on entire document (but already modified 'more links' will be ignored)
    $.fn.ReadMoreRightHere();
 
    // Within a more specific context: executes plugin within provided context
    $.fn.ReadMoreRightHere('div.dynamic-content');

Related Posts