Check out Yoast’s PayPal Donations Review »

PayPal Widget Setup

I just released a new version of PayPal Donations, version 1.2.

New in this version is the inclusion of a sidebar Widget for the PayPal button. I’m using the new WordPress 2.8 API for the Widget, so it’s only available if you run the plugin on WordPress 2.8 or newer.

In the widget admin you can specify a descriptive text as well as overrides for Purpose and Reference if you wish.

Enjoy and cheers!

The Issues

• The url to the AJAX loader symbol is hardcoded into the plugin, so if you don’t use a white background in your theme the loading symbol looks quite ugly. If you replace the default icon with your own it gets overwritten on each plugin update.
• The javascripts for the plugin gets loaded on every single page of the site no matter if the plugin is used or not on that page, which adds unnecessary loading time where it’s not needed.
• The path to the stylesheet for the validation and submit messages is also hardcoded into the plugin, and if you edit the stylesheet to fit your theme, the edits gets lost on each update, and you have to reupload your custom stylesheet for the plugin.

The Solutions

So to not have to edit the plugin file, I added a few overrides in my theme’s functions.php file instead to change the behaviour of the plugin where needed.

Let’s start by taking care of the AJAX loading symbol. To change the path to the gif file I use a regular expression to update the url.

// Change the URL to the ajax-loader image
function change_wpcf7_ajax_loader($content) {
	if ( is_page('contact') ) {
		$string = $content;
		$pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" \/>)/i';
		$replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
		$content =  preg_replace($pattern, $replacement, $string);
	}
	return $content;
}
add_filter( 'the_content', 'change_wpcf7_ajax_loader', 100 );

This function filters the content, tracks down the AJAX loader tag and replaces the URL with a path to the current {theme folder}/images/ajax-loader.gif. So you can have your own custom AJAX loader stored in your theme folder instead, untouched on each plugin update. I added the if( is_page(contact) ) {} to the function to make sure the filter only runs on pages where needed, to not waste CPU cycles on pages where the plugin is not used. Contact is the name of the page where I use the form, change it to the name, or names of pages where you use the plugin.

Okay, now let’s see take care of the script loading on each page of the site.

// Add the Contact Form 7 scripts on selected pages
function add_wpcf7_scripts() {
	if ( is_page('contact') )
		wpcf7_enqueue_scripts();
}
if ( ! is_admin() && WPCF7_LOAD_JS )
	remove_action( 'init', 'wpcf7_enqueue_scripts' );
add_action( 'wp', 'add_wpcf7_scripts' );

This function removes the call to add the Contact Form 7 scripts on every page, and then adds back the call where needed, in my case I add them back at the page called contact, but change that to whatever works for you.

And finally, let’s deal with the stylesheet.

function remove_wpcf7_stylesheet() {
	remove_action( 'wp_head', 'wpcf7_wp_head' );
}
add_action( 'init' , 'remove_wpcf7_stylesheet' );

Here I actually remove the call to the stylesheet completely. As I have made my own style that fits my theme, I don’t use the default stylings. If you use the default stylings but just want it to load where needed, you could use an is_page condition like on the loading of the scripts. I could have put the Contact Form 7 Stylesheet in the theme folder using the same technique as on the AJAX loader to leave it untouched on a plugin update, but as I like to keep the calls to external files to a minimum to have the site load as fast as possible, I just put the WPCF7 CSS styles directly in my default style.css of my theme instead and got rid of the plugin stylesheet loading.

The Final Code

And here is what the final code looks like, ready to get pasted into the functions.php file in the theme you are using.

/**
 * Functions:	Optimize and style Contact Form 7 - WPCF7
 *
 */
// Remove the default Contact Form 7 Stylesheet
function remove_wpcf7_stylesheet() {
	remove_action( 'wp_head', 'wpcf7_wp_head' );
}

// Add the Contact Form 7 scripts on selected pages
function add_wpcf7_scripts() {
	if ( is_page('contact') )
		wpcf7_enqueue_scripts();
}

// Change the URL to the ajax-loader image
function change_wpcf7_ajax_loader($content) {
	if ( is_page('contact') ) {
		$string = $content;
		$pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" \/>)/i';
		$replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
		$content =  preg_replace($pattern, $replacement, $string);
	}
	return $content;
}

// If the Contact Form 7 Exists, do the tweaks
if ( function_exists('wpcf7_contact_form') ) {
	if ( ! is_admin() && WPCF7_LOAD_JS )
		remove_action( 'init', 'wpcf7_enqueue_scripts' );

	add_action( 'wp', 'add_wpcf7_scripts' );
	add_action( 'init' , 'remove_wpcf7_stylesheet' );
	add_filter( 'the_content', 'change_wpcf7_ajax_loader', 100 );
}

This tweak was published when Contact Form 7 was at version 1.10, and should continue to work just fine as long as no major changes is made to the inner workings of the plugin.

New in version 1.1

• Added an option to select the currency to make the donations in.
• Changed the default button in a new install from a custom button to the large button.

Enjoy and cheers!

The plugin comes with a few options, like selecting what button to display and a few other useful, optional, settings.

And of course it generates valid XHTML code (which I noted a few other donation plugins don’t).

I have a few more things planned for this guy, which will come in future updates, but this release gets all the basic parts of the the job done when you need a donation button for your causes or free stuff.

If time allows I have planned to rewrite my Fix Symmetry plugin for LightWave 3D from LScript to a compiled C plugin in 32 and 64 bits versions. I have a few other things planned this weekend as well to complete, but if I get around doing this, I’ll post an article about some useful techniques when working with LightWave plugin development.

New in this version is that you can create your own WordPress shortcodes with your snippets as well as making the quicktags optional.

Changelog for version 1.4:

• Added a checkbox for Shortcodes (SC) in the admin panel. When checking this one a dynamic shortcode will be generated and inserted instead of the snippet, which allows snippets to be updated later on for all posts it’s been inserted into when using this option.
• Added a checkbox for Quicktags (QT) in the admin panel, so Quicktags are optional. Speeds up loading of the post editor if you don’t need the quicktag support, and only use the visual editor. Defaults to off.

I have a few things that I’ll polish with the new shortcode function, like adding default variable settings and a few other things. So there will be another update not to far away, and then I think this plugin is pretty feature complete of what I wanted to do with it.

• Fixed a problem with the regular expressions that prohibited variables consisting of just a single number to work. (Thanks to Javier for the report)
• Updated the Help info in the admin page to take less space.
• Included a check so the plugin only runs in WP 2.7 or newer.

New in this version is that I added support for Quicktags so the snippets are available if you use the editor in HTML mode and not only in the Visual mode.