Optimize the CommentLuv wordpress plugin

CommentLuv is a wordpress comment plugin powered by Comment Luv. This plugin is compatible with the latest WordPress version up to now, it helps give something back to every single commentator as well as entice them to come back and visit more often by automatically adding a titled link to their last blog post at the end of their comment. In this article, I will show you how to make a bit optimization for CommentLuv.

As you see, Intenseblog.com is now using CommentLuv as website comment, this is a Win-Win comment system that’s not only grow the community but also the SEO ranking of both the website owner and the commentator:

The plugin fetches the feed found at commenters site URL while they type their comment and extracts the last blog post title with link and displays it below the comment form. When they submit their comment, the last blog post link gets added on the end of their comment for all to see.

The installation process is very simple, you need to download the CommentLuv plugin at:
http://comluv.com/download/commentluv-wordpress/ and follow the plugin instruction. You can read more about CommentLuv at the More resources section of this post, and now I want to show you how to optimize this plugin for your website.

Maybe your websites had already called the Jquery script (or you use another jquery version) but after you install the CommentLuv, the plugin calls for Jquery a second times; Andy Bailey (the admin of CommentLuv) was told that “wp_enqueue_script is already built to do that , it shouldnt show 2x jquery calls unless your theme has it hard coded” , so let check your website before we start to do this:

Besides the Jquery script, the plugin also calls for two other script are: hoverIntent.js and commentluv.js, so that you should:

1. Repair step.

The header data for config commentluv needs to be in the header section of your website and it should be dynamic but if you want to improve the performance a bit more, you should follow this:
View your website source and then copy the following source:

	<script type='text/javascript'>
	/* <![CDATA[ */
	var cl_settings = {
.... // copy all of this source (it's different for a specific website)
		usetemplate: ""
	};
	/* ]]> */

…then paste it to your footer.php in your theme and add two wordpress conditional tags at the top and bottom:

	<?php if (is_single()) { ?>
	<script type='text/javascript'>
	/* <![CDATA[ */
	var cl_settings = {
.... // the source you have copied before
		usetemplate: ""
	};
	/* ]]> */
	</script>
	<?php } ?>

When you change plugin settings please modified this script so it will not break the plugin use. Please aware what you are doing. (Thanks Andy Bailey for that)

2. Combine the javascript.

First, you should combine the content of hoverIntent.js and commentluv.js into 1 file, ex: combine.js and then add this line to the footer.php of your theme, for example:

<script type="text/javascript" src="http://www.domainexample.com/.../combine.js" ></script>

3. Modify the Plugin.

Second, you need to edit the commentLuv.php (in the plugin folder) by deleting these lines:

				wp_enqueue_script ( 'jquery' );
				global $wp_version;
				// see if hoverintent library is already included (2.7 >)
				if (version_compare ( $wp_version, "2.8", "<" )) {
					wp_enqueue_script ( 'hoverIntent', '/' . PLUGINDIR . '/' . dirname ( plugin_basename ( __FILE__ ) ) . '/js/hoverIntent.js', array ('jquery' ) );
				} else {
					wp_enqueue_script ( 'hoverIntent', '/' . WPINC . '/js/hoverIntent.js', array ('jquery' ) );
				}
				wp_enqueue_script ( 'commentluv', $this->plugin_url . 'js/commentluv.js', array ('jquery' ) );

4. Combine the CommentLuv Css

Copy the content of cl_style.css (in the plugin folder) to your main style css file and then deleting these lines in commentLuv.php:

add_action ( 'wp_head', array (&$this, 'commentluv_style' ) ); // add style sheet to header

and:

	// hook the head function for adding stylesheet
		function commentluv_style() {
			echo '<link rel="stylesheet" href="' . $this->plugin_url . 'style/cl_style.css" type="text/css" />';
		}

Save and then upload it again to the plugin folder.
In those steps above, you can use some online minify services like http://www.cleancss.com for compress css and don’t forget to read this article: How to: optimize wordpress blog for maximum speed.

And yes, it’s finished, after a few modifications, your website now working more smoothly with CommentLuv plugin, maybe you will happy with this small trick.