More than one WP-Leads Plugin

First of all, I think you need to be aware that there are two WordPress plugins circulating with the same name and that name is WP-Leads. One of them is created by leadtree.com and the other by a WordPress user who goes by the name OccamsRazor who seems to have the domain wpleads.com. In this post I will be discussing the latter plugin.

What does the WP-Leads plugin do?

It is a very clever plugin that allows you, with a few simple steps, to add a checkbox for people to sign up for your services at MailChimp, Constant Contact or SalesForce.com when they register or post a comment. I use Mailchimp for a newsletter and I wanted this plugin to make it easier for people to sign up for it. It’s a good plugin but despite it’s simplicity, not perfect.

What I want to change.

1. Remove inline style – First of all I wanted to change how the plugin appeared to my users. I am using it at the end of a comment form and there are two other checkboxes that just look different. First of all I thought I thought I’d like to make it look like the other checkboxes but later I decided to make it stand out more. (See below.)

As you can see in the image above the checkbox is on the opposite side of the text from my other checkboxes, and in Chrome at least, the checkbox it a little smaller than the others.

2. Add a div or class wrapper – Just put an unstyled wrapper around the  code that will be output on the screen. That way the users can add a few lines of css to the stylesheet and make it look how they want.

3. Add option to put checkbox before or after the text – Different strokes for different folks. I’m a big fan of uniformity which improves site usability so I want the checkbox at the beginning.

4. Shorten the name of the plugin – This is a bit trivial I admit, but I find it annoying. The name of the plugin in the file is much longer than WP-Leads, actually its WP-Leads (Free) – Mailchimp, Constant Contact, and SalesForce.com Integration. And while it has no effect on it’s performace or how it appears to visitors to my site, it does distort the plugin page of my installation as well as making the edit plugins drop-down very wide. (Click on image to the right to see an example of what I am talking about.)

Fix it!

Of course I could ask the plugin developer to make the changes and I have done that in the past. Sometimes they make the changes and sometimes they don’t, sometimes they update their plugins very quickly and sometimes they don’t even reply.

I do always consider how easy/difficult the changes would be though. In most cases the coding is beyond me and I would have no hope of modifying the plugin by myself but in this case it’s just some HTML and CSS that needs to be edited. I gave it a shot and this is what I came up with.

The Solution

I decided to fix all the problems before contacting the plugin author. Editing plugins by yourself is risky though, as you will lose all modifications when or if you update the plugin. For me though, the plugin does all it needs to and probably won’t need to be updated so I’ll take the risk. I’ll go back through the list above but this time with my solutions.

1. Remove inline styles – I simply edited one of the WP-Leads files in the WordPress file editor. (Go to Plugins, Editor and then select WP-Leads from the drop-down. This is the file I edited: wp-leads-mailchimp-constant-contact-and-salesforcecom-integration/comments/comments.view.class.php. Here is the original code:

<?php
class WPLeadsCommentsView{
 function commentForm(){
 $form=WPLeadsInterface::get_wp_settings();
 $checked=($form["comment_selected"])?" checked":"";
 ?>
 <p style="clear: both;">
 <label style="display: block;"><?php echo $form["comment_text"]; ?>
 <input style="width: 10px; margin-left: 5px;" type="checkbox" name="joinlist" tabindex="26" <?php echo $checked; ?> />
 </label>
 </p>
 <?
 }
}
?>

and here is the code I replaced it with:

<?php
class WPLeadsCommentsView{
 function commentForm(){
 $form=WPLeadsInterface::get_wp_settings();
 $checked=($form["comment_selected"])?" checked":"";
 ?>
 <p id="wpleads-subscription-form">
 <label><input class="wpleads-checkbox" type="checkbox" name="joinlist" tabindex="26" <?php echo $checked; ?> /><?php echo $form["comment_text"]; ?>
 </label>
 </p>
 <?
 }
}
?>

As you can see, I simply removed the inline style from both the <p> tag and the <label> tag.

2. Add a div or class wrapper – I created a new div called wpleads-subscription-form and added the id to the <p> tag. I added the new style to the stylesheet. You can see the CSS I used to style it below but can easily change the style to suit any site.

#wpleads-subscription-form {
 border-left: 5px #0A3A4A solid;
 padding: 10px;
 font-size: 20px;
 background: #33A6B2 url('images/email-icon.png') no-repeat right;
 color: #fff;
}
#wpleads-subscription-form input {
 margin-right: 15px;
}

3. Add option to put checkbox before or after the text – This is a bit much for me so I simply moved the code around a little in order to put the checkbox at the beginning of the text. Look at the above code and you will easily figure it out.

4. Shorten the name of the plugin  – This was the easiest to do. I simply went to the first file ( wp-leads-mailchimp-constant-contact-and-salesforcecom-integration/wpleads.php) and changed the name to WP-Leads Mod. The name was short and descriptive. Be aware though that changing a plugin’s name can potentially break it. It didn’t seem to break this one. I think one upside to changing the name is that when the actual plugin is updated it won’t recognize that it’s the same plugin and won’t ask you to update your plugin. Of course that could be a downside too as you won’t know that the plugin has been updated.

I hope this will be of use to some people. If I ever have a newsletter for this site I will probably install this plugin, or at least a mod of it. I hope the plugin designer adds these fixes though and to all plugin designers out there please use utilize external stylesheets rather than inline style whenever possible.

If you have any questions or comments I’d love to hear them and we have a comment area so why not use it?

Link: http://www.wpleads.com
Link:  http://wordpress.org/extend/plugins/wp-leads-mailchimp-constant-contact-and-salesforcecom-integration/