Take the pain out of working with WordPress code editor

May 19, 2015 14:36 GMT  ·  By
WPide creates a special section in the admin panel where developers can edit code
4 photos
   WPide creates a special section in the admin panel where developers can edit code

WordPress provides two built-in code editors for developers that want to make small tweaks to their themes or plugins' source; but while very useful, these two editors are a real nuisance to work with.

The explanation for this is simple. These code editors are plain textarea HTML tags that were never intended for hosting source code, nor were they designed for editing large pieces of text with strict formatting and indentation rules. Working with a textarea for code editing is like trying to build a spaceship with needle & thread, and it does nothing more than delay developers from their deadlines and cause more headaches than fix problems.

Because of these inconveniences, developers regularly have to use a desktop-based IDE with FTP capabilities, that can connect to an FTP server, pull in the desired files, allow the user to edit them, and then save them back online.

But what if the developer is not working from his own computer? In this case, to get around this issue, we (the Softpedia Webscripts staff) will recommend some of our favorite plugins that will transform the WordPress built-in code editor into a fully-functional Web-based IDE.

First and foremost, our favorite plugin: WPide

WPide creates a special section in the admin panel where developers can edit code
WPide creates a special section in the admin panel where developers can edit code

WPide will create its own section in the WP backend, leaving the original theme and plugin editor alone. Here developers can access a fully-working Ace editor integrated with the WordPress UI, with broader access to the entire site's FTP, not just the theme and plugin files.

Support for classic IDE features like syntax highlighting and line numbers is included, but more important is the file navigation sidebar which also comes with the ability of creating files & folders, not just selecting and editing source code files.

WP Editor

An alternative to WPide, WP Editor, works on top of the original theme and plugin editing sections, adds practically the same code editing features, but relies on CodeMirror for the editor's interface instead of Ace.

Advanced Code Editor

Advanced Code Editor uses CodeMirror just like WP Editor, the only difference being a broader range of controls, all customizable via a simple on-page settings popup. Choosing between WP Editor and Advanced Code Editor will be a matter of personal preference, but we would recommend the latter since it includes a shortcut to save via CTRL+S, useful if you already have this habit (twitch) from working with desktop IDEs.

Save with keyboard

If you'd like this feature added to WP Editor, other code editors, or even the site's posts and pages, then the Save with keyboard plugin is what you'll need to install. The best part is that there are no settings to tweak and no extra options in the WP backend to configure. Installing this plugin is seamless, and you can use it right away.

Add Submit Button on Top

The Add Submit Button on Top plugin duplicates the “Update File” (formerly “Submit”) button and adds it at the top of the source editing section. This way you can save an edited file at any time from anywhere on the page, without always having to scroll down the page to do so.

There are of course other plugins on the WordPress website, but the ones we listed are true “no-headache” solutions which we already tested and can vouch for their utility and ease of use.

Improve the WordPress theme and plugin editors (4 Images)

WPide creates a special section in the admin panel where developers can edit code
WP Editor is a CodeMirror-based source code editing solution for WordPressAdvanced Code Editor simplifies and improves how you edit source files with WordPress
+1more