3 Code Editor Plugins to Upgrade the WordPress Code Editors

3 Code Editor Plugins to Upgrade the WordPress Code Editors

WordPress gives you the ability to edit the code of the themes and plugins you have installed on your website from within your site’s dashboard. However, the default editor can’t compare with some of the tools you might be more used to working with when editing code locally on your computer.

So in today’s post we will be checking out some of the code editor plugins available which allow you to upgrade the built-in code editing functionality of WordPress, making it easier to make changes to your plugin and theme code on the fly, from inside your admin dashboard.

The Default WordPress Code Editor

Code Editors Default

Just in case you weren’t aware, you can edit the files of any themes or plugins you have installed on your WordPress site by going to the appropriate area on the admin dashboard:

  • To edit the theme files go to: Appearance > Editor
  • To edit the plugin files go to: Plugins > Editor

Code Editors Menus

Via these editors, you can then begin making changes to the individual files that make up the themes and plugins you are using on your site. While it’s always a good idea to create a backup of any files you will be changing, and test your edits offline or on a staging server, sometimes it’s just too tempting go ahead and make those changes on the fly on a live site.

On other occasions you might only have access to a web browser when the need for troubleshooting or making important changes to your website arises. In those situations, being able to login to your admin dashboard, and edit code with a built-in user-friendly editor can be a real lifesaver.

However, as you can see the default WordPress editors leaves a lot to be desired, compared to the more powerful options available which include the ability to undo multiple edits, preview images, auto complete code, get syntax highlighting, and a whole lot more.

Also, before you get started, don’t forget to create a child theme if you are making changes to your WordPress theme. This will allow you to update the theme when a new version becomes available, without losing any changes you’ve made.

WordPress Code Editor Plugins

In order to make the code editing process more user-friendly and give the existing editor a whole lot more functionality, here is a selection of WordPress code editor plugins which you can use to upgrade the default editor and make it easier to edit your theme and plugin files.

Advanced Code Editor

Code Editors Advanced Code Editors

Advanced Code Editor is a popular free option with over 160,000 downloads and a positive 4.7 out of 5 star rating.

Once the plugin is installed, visiting the editors will give you access to the features provided by Advanced Code Editor. While the default theme that handles the appearance of the editor isn’t that user-friendly, the appearance of the editor can be quickly changed by selecting a new theme from the drop down menu, making the code easier to read.

From the toolbar that is added to the editor window, you can now do the following:

  • Download the file
  • Download the whole theme
  • Restore a version
  • Create a new file
  • Create a new directory
  • Delete the current file
  • Switch to a full screen editor
  • Find and replace
  • Jump to line
  • Comment code in/out

Other useful features of Advanced Code Editor include:

  • Multiple undo and redo
  • Auto complete with over 3,500 WordPress functions
  • Syntax highlighting for PHP, HTML, CSS, and JS.
  • File tree view
  • Auto format and indent code
  • Built-in version control

As you can see this is a feature rich code editor for WordPress. Despite the user interface not being that exciting to look at, the impressive feature list can’t be argued with.

Get Advanced Code Editor

WPide

Code Editors WPide

Although WPide hasn’t been downloaded as many times as Advanced Code Editor (ACE), it does manage to trump it in the approval rating stakes thanks to a perfect 5 star rating.

Unlike ACE this plugin does add a top-level menu item to your WordPress dashboard sidebar menu which might be off-putting to those with a cluttered sidebar already.

When clicking on the WPide icon, the editor window is displayed. This means you still get access to the default WordPress theme and plugin editors, but can instead choose to use the WPide editor via the plugin icon.

Code Editors WPide File Manager

Once you do open up the editor, as well as the editor pane, you can view all the sub directories of your wp-content directory, and the files they contain. The advantage of this is that you can browse all the files and then open any file for editing, and not just the theme and plugin files, as is the case with the default WordPress editor and ACE.

Code Editors WPide Tabs

Opening a file for editing is as easy as clicking on it. The tabbed interface allows you to have multiple files open at one time, which is really handy for copying or comparing content across two or more different files.

Other notable features of the WPide plugin include :

  • Syntax highlighting
  • PHP checking before save
  • Auto complete for WordPress and PHP functions
  • Colour picker for adding colour hex codes
  • Automatic file backups
  • Create new files and directories

WPide is lacking a few features that you will find in ACE, such as:

  • Colour themes for easier readability
  • Find and replace
  • Line wrapping
  • Multiple undo and redo

If you want to keep the default WordPress editors screens intact, and have the ability to open any file in the wp-content directory, plus be able to have multiple files open via the tabbed editor window, then WPide is a good choice.

However, ACE does have more useful features than this plugin and so it gets my vote out of these two code editors.

Get WPide

WP Editor

Code Editors WP Editor

With close to 200,000 downloads and an impressive 4.9 out of 5 star rating, WP Editor not only upgrades the default WordPress code editor for theme and plugin files, but goes one step further and upgrades the text view on the post and page editor. However from the settings you can disable this feature if you wish. If you are looking for other options for upgrading the WordPress post editor then these articles will help you out.

Code Editors WP Editor Post

Once the plugin is installed, it does add a top-level menu item to the admin dashboard sidebar, but unlike the WPide plugin, this icon takes you to the settings for the WP Editor, which the others editors we’ve looked at don’t have.

While the idea of a plug and play plugin without any settings is a nice idea, it’s nearly always preferable to have a settings page for any plugin that is installed. From the WP Editor control panel you can choose whether to replace the default editor links with those to the new WP Editor, hide the WordPress default editors, and even hide the top-level menu icon.

The other settings of WP Editor include:

  • Choose a theme for the editor
  • Decide which extensions can be edited
  • Change the font size
  • Enable line numbers and line wrapping
  • Activate active line highlighting
  • Create new themes or plugins from within the editor

While the features of WP Editor include:

  • Multi-level undo and redo
  • Find and replace
  • Switch to full-screen mode
  • Download the individual file or entire theme/plugin
  • Upload files
  • Create files and directories
  • Syntax highlighting
  • View images from within the editor

Despite the great looking interface and good amount of settings, not to mention the support for upgrading the post and page editor, WP Editor does have one major omission which is a lack of auto complete.

If that feature is important to you then this isn’t the plugin for you, but for everyone else this is the most user-friendly code editor on offer here today.

Get WP Editor

Conclusion: Which WordPress Code Editor is Best?

Options for upgrading the code editor is one area where WordPress users are well served by a good number of available free plugins and even some slick-looking premium options. While I’ve only covered three here today, as a group they do offer a good set of options for those looking to improve and enhance the default WordPress code editors.

Have you got a favourite offline code editor that you use? If so, what useful features does it have that aren’t included in these code editor plugins?