Ransford Okpoti's Dev Notes

WordPress rocks!! I love wordpress as much as I love to watch Friends,one of my favourite television series courtesy ViaSat 1. You care to know who my favourite character is? Hmm, am not telling you. Lets hit the road running now. As a blogging tool, wordpress has created a niche for itself among it peers. It has great features like assigning an entry, or a post, to multiple categories, has a nice tagging system and recently, you can actually upgrade/update your WordPress Plugins automatically without the need to download the plugin and extract it into the plugins folder of your wordpress installation. The plugins upgrade indicator which displays the number of plugins that need upgrading is a pretty cool enhancement, so you don’t go looking for which plugins have latest releases you are not aware of.

Despite the fact that it is a great tool, upgrading a plugin can be a real pain in the a** of users since you need to click on the upgrade automatically link , depending on your chosen translation, for each of the plugins that need upgrading. 20 clicks for 20 different plugins that need upgrading to give you a clearer picture. So I posed to question to myself “Couldn’t this process have been made a lot easier on the user?“. And obviously, the answer was a “YES!!, it can.”

WHAT WE WANT TO ACHIEVE

We want to select the plugins to be upgraded, using the checkboxes provided beside each plugin, from the plugins page in the admin console, and choose Upgrade from the list of actions under the Bulk Actions menu, and click on the Apply button to upgrade all the selected plugins that need upgrading.

HACKING WORDPRESS

Since we don’t want to mess with the codes in plugins.php too much, we’ll make use of javascript and a little bit of PHP to achieve our task by doing the following:

• Adding the Upgrade option to the list of Bulk Actions
• Attaching a click event listener to the Apply action/button.
• Creating a JSON (Javascript Object Notation) object to contain the plugins that requires upgrading.

Here is the code that does the trick.

<script type="text/javascript">
/*<![CDATA[*/
var json = {
	<?php
	if ( ! empty($upgrade_plugins) ){
		$url = 'update.php?action=upgrade-plugin&amp;plugin=';
		$noUpgradePlugins = count($upgrade_plugins);
		$i = 0;
		foreach($upgrade_plugins as $plugin=>$v){
			$i++;
			$actionurl = $url.$plugin;
			$action = 'upgrade-plugin_'.$plugin;
			$pluginurl=  str_replace( '&amp;', '&amp;', urldecode(wp_nonce_url($actionurl, $action)));
			$pluginId = str_replace('-','', substr($plugin,0,strpos($plugin,'/')));
	?>
			"<?php echo $pluginId ;?>": "<?php echo $pluginurl ;?>" <?php if($noUpgradePlugins>$i) echo ",\n";?>
	<?php	}
	}
	?>
}

/*
the 1 and 2 at the end of the some of the variable names represents
the top and down instances of the component respectively
*/
var btnApply1 = document.getElementsByName('doaction_active')[0];
var btnApply2 = document.getElementsByName('doaction_active')[1];

var cbo1 = document.getElementsByName('action')[0];
var cbo2 = document.getElementsByName('action2')[0];

// This adds the Upgrade option to the list of bulk actions
cbo1.options.add(new Option("Upgrade","upgrade-selected"));
cbo2.options.add(new Option("Upgrade","upgrade-selected"));

btnApply1.onclick = function(){
	if(cbo1.value!='upgrade-selected'){
		return true;
	}

	upgradePlugins();
	return false;
}

btnApply2.onclick = function(){
	if(cbo2.value!='upgrade-selected'){
		return true;
	}

	upgradePlugins();
	return false;
}

// Upgrades only the checked plugins that have upgrades/updates available
function upgradePlugins(){
	var tags = document.getElementsByName('checked[]');

	for(var i=0; i<tags.length; i++){
		if(tags[i].checked){
			p = tags[i].value;
			pluginId = p.substring(0,p.indexOf('/'));
			pluginId = pluginId.replace(/-/g,''); // replaces all instances of -

			url='';
			try{
				url = eval('json.'+pluginId);
			}
			catch(e){}

			if(typeof url=='string' &amp;&amp; url.length>0){
				var frame = document.createElement('frame');
				frame.src = url;
				document.getElementsByTagName('head')[0].appendChild(frame);
			}
		}
	}

}
/*]]>*/

</script>

All you need to do now is to copy the above codes and paste it at the bottom of the plugins.php file located in the wp-admin folder in your preferred editor. Save the changes, and refresh your plugins page, and give it a try.

HOW IT WORKS

On the plugins page, select Upgrade from the Bulk actions list, check the plugins you want to upgrade and click on the Apply button.

CONCLUSION

This demonstrates a practical application of DOM manipulation using Javascript. The downside of our little practical javascript solution to this problem is that each time you update WordPress itself, the plugins.php file will be replaced with the one from the latest version of WordPress.
I hope it was helpful.