WPide

WPide is a WordPress code editor with the long term goal of becoming the ultimate environment to code/develop WordPress themes and plugins. You can edit any files in your wp-content, not just plugins and themes. Code completion will help you remember your WordPress/PHP commands providing function reference along the way. Edit multiple concurrent files with the tabbed editor.

Please come forward (either on github or the WordPress support forum) with any bugs, annoyances or any improvements you can suggest. I’d like this plugin to be the best it can be and that’s only going to happen if users chip in with their feedback. Code contributions welcome, over on Github.

This plugin would not be possible without the Ajax.org Cloud9 Editor (http://ace.ajax.org/) which is the embedded code editor that powers much of the functionality.

This plugin performs best in the Chrome web browser.

Current Features:

• Syntax highlighting
• PHP syntax checking before saving to disk to try and banish white screen of death after uploading invalid PHP
• Line numbers
• Find+replace
• Code autocomplete for WordPress and PHP functions along with function description, arguments and return value where applicable
• Colour assist – a colour picker that only shows once you double click a hex colour code in the editor. You can also drag your own image into the colour picker to use instead of the default swatch (see other notes for info).
• Automatic backup of every file you edit. (one daily backup and one hourly backup of each file stored in plugins/WPide/backups/filepath)
• File tree allowing you to access and edit any file in your wp-content folder (plugins, themes, uploads etc)
• Use the file browser to rename, delete, download, zip and unzip files (so you can download a zipped version of your whole theme for example)
• Create new files and directories
• Highlight matching parentheses
• Code folding
• Auto indentation
• Tabbed interface for editing multiple files (editing both plugin and theme files at the same time)
• Using the WordPress filesystem API, although currently direct access is forced (edit WPide.php in the constructor to change this behaviour) ftp/ssh connections aren’t setup yet, since WP will not remember a password need to work out how that will work. Maybe use modal to request password when you save but be able to click save all and save a batch with that password. Passwords defined in wp-config.php are persistent and would fix this problem but people don’t generally add those details. Open to ideas here.
• Image editing/drawing (this is currently not working..)

Feature ideas and improvements:

• Improve the code autocomplete command information, providing more information on the commands, adding links through to the WordPress codex and PHP.net website for further info.
• Create an admin panel to choose between syntax highlighting themes and turn on/off other Ajax.org Cloud9 functionality
• Better automated file backup process
• Templates/shortcuts for frequently used code snippets, maybe even with an interface to accept variables that could be injected into code snippet templates.
• Integration with version control systems such as Git

As with most plugins this one is open source. For issue tracking, further information and anyone wishing to get involved and help contribute to this project can do so over on github https://github.com/WPsites/WPide

Other Feature notes

You can modify the filesystem root using the ‘wpide_filesystem_root’ filter

So to restrict editing to the Twenty Eleven theme only you could do this:

add_filter(‘wpide_filesystem_root’, ‘wpide_filesystem_root_override’);
function wpide_filesystem_root_override($path){
// the default path variable will be WP_CONTENT_DIR
return $path . “/themes/twentyeleven”;
}

Colour assist

The colour picker only shows if you double click a hex colour value in the editor (3 or 6 characters with a proceeding hash #FF0000)

The default colour picker has limited colours. You can replace this image with an image of your own by dragging and dropping a new image onto the default one (due to security reasons this can only be an image from the same domain).

Using this you can either create your own swatch of colours or just drag in your websites logo or header image.

If you close the editor any custom colour picker image will be forgotten. We maybe thing about making this persist and also make the image uploadable as well as drag+drop.

Dev Notes

Maybe some interesting things here we could implement to help with following the WordPress standard and more advanced code syntax checking

Tidy and format your PHP and meet WordPress standards on Coda and TextWrangler

Checkout the following WordPress plugin “WP Live CSS Editor” to work out how to do LIVE css editing. Combining a LESS compiler with live CSS editing/compile would be a dream.

https://github.com/lennie/git-webcommit/ may be a route to git functionality

Contributors

Simon Dunton – http://www.wpsites.co.uk
Thomas Wieczorek – http://www.wieczo.net

This Plugin was not added to any Plugin Lists yet.