WPsites Home
WordPress : state-of-the-art content management system Login to your account

WPide and how I used the TGM Plugin Activation class


For a couple of months now I’ve been working on a web based development environment for WordPress. It had to be done, desktop based editors are either slow, don’t quite work the way you expect or mess with your code sometimes breaking your website in the process.

The initial version of WPide is on the WordPress plugin directory.
The bigger, better version of WPide is over on Github (V2dev branch).

With the initial development of WPide I just wanted to replace the convenient but somewhat difficult to work with built-in theme and plugin editor with the Ajax.org Cloud9 Editor (http://ace.ajax.org/). I wanted to have line numbers, syntax highlighting, code completion for WordPress functions and backups of files just incase things go wrong.

Version 1 of WPide which is currently on the WordPress plugin directory achieves that, but it’s by no means perfect.

Over the last month I noticed a blog post or two talking about the WordPress theme/plugin editor needing improvements and even that the editor should be removed.That, combined with a real need for tabbed editing (no one is happy editing one file at a time) and some extra contributors to the project spurred me on to create version 2 of WPide. Main features being tabbed editing, using ajax for the saving/opening of files and remove the reliance on the built in editor (just in case it is removed in future). So now WPide has it’s own menu item in the admin sidebar and it’s own file manager that opens up access to the whole of the wp-content folder.

Although good progress has been made on V2, it’s still not ready for release in the WordPress repository (see Github for outstanding issues).  Although it’s not rocket science to download the development code from Github to try out the new version, it’s still 10x harder than installing a plugin from the WordPress repository. That’s especially true if the plugin is larger than your web hosts’ maximum file upload size so has to be done through SSH/SFTP.

Then yesterday on Twitter SanchoTheFat alerted me to an awesome PHP library called TGM Plugin Activation. When included in your plugin/theme, this library can be used to suggest or require additional plugins. Upon activation of your plugin/theme the user will be shown an alert with full details.

I have used theTGM Plugin Activation library in the WordPress repository hosted version of our plugin. Everyone now has an easy way to check out the new version of the plugin before release without having to even know github exists.

Clicking on either the alert from the TGM library or clicking the link on the WPide row of the plugin list will start the install process of WPide V2 (the development version, cutting edge, bugs and all).

So what’s cool about the TGM library?

For theme creators it means you can easily setup plugin dependencies. If your theme uses Contact Form 7 that requirement can be easily defined from within your theme. When the theme is activated the user will be alerted to the plugins required and given an easy way to install all plugins without them having to know where to find them and what version to use. The plugins don’t even need to be hosted in the WordPress repository! Plugin dependencies can be pulled from Github or any other URL.

Plans for WPide

I plan to get the outstanding issues with V2 ticked off in the next couple of weeks and get that version available on the WordPress plugin repository. Turns out the time I just put into adding the TGM library could have been enough to simply get V2 ready for release! That wasn’t because the TGM library is hard to implement, the challenges came from potentially running two versions of WPide on the same WordPress install, publishing the plugin to the SVN repository over at WordPress and then having to republish another version over to WordPress when things didn’t work quite as well as I had hoped.

The file manager needs more work as it currently doesn’t allow you to create new directories or files, only browse through existing items.

Once V2 is live I have another development branch on my local repository that includes some proof of concept code to push CSS changes from the IDE to the live website you have open in another browser tab. I also plan to try have this working in the opposite direction, so changes done on your live webpage using Firebug/inspector can automatically be fed into your open WPide instance to be saved. Sort of a live editor if you like. So you have one browser window open which is the WPide and in another window you have your live website; the CSS changes you make in the IDE will be shown in the live webpage (although it’s not actually live, you are just doing the same local/temporary updates just like with Firebug). Then when you are ready, all your changes can be saved and made live by clicking save in the IDE. Same could be done with JS files, .less, maybe even PHP.

As the editor uses the Ajax.org Cloud9 Editor (http://ace.ajax.org/) the syntax checking and highlighting isn’t that great for PHP. The Cloud9 editor is primarily a JavaScript editor so not as much development has gone into the PHP mode. Therefore a worker needs creating for PHP and I’m sure the PHP mode has room for improvements.

Code auto complete also needs improvement. I would like to see some separation between PHP autocompletes and WordPress function autocompletes. On the WordPress function autocomplete I would also like to show arguments to function calls and links through to the codex for further assistance on function calls, actions etc.

Right now you can potentially break a site by uploading a PHP file with syntax errors. In future syntax needs to be checked in PHP files before they are saved to disk to stop this EVER happening. In future maybe a WordPress worker needs to be created so that we can encourage developers to code to the WordPress standards, inline documentation etc.

All comments and contributions gratefully received!

  • http://twitter.com/sanchothefat Robert O ‘Rourke

    Interesting usage, gonn have to get this badboy in use on our themes next :)