A Code Editor Solution for WordPress

We all know that WordPress does not yet have a good editor with syntax highlighting, line numbers etc. within the Dashboard. Thus it is a bit unwieldy to edit themes or plugin files from within the dashboard. There are now solutions to that, as new plugins give us this useful functionality, at least till WordPress starts shipping with this feature built in.

We all know that WordPress does not yet have a good editor with syntax highlighting, line numbers etc. within the Dashboard. Thus it is a bit unwieldy to edit themes or plugin files from within the dashboard.

There are however a number of plugin solutions to that,  at least till WordPress starts shipping with this feature built in.

You might also be looking for a WordPress-integrated IDE. These plugins will indeed give you many features of a regular IDE within your WordPress dashboard, so check them out!

Better File Editor

better file editor

Adds line numbers, syntax highlighting, code folding, and lots more to the theme and plugin editors in the admin panel.

This plugin replaces the boring, clunky, and difficult to use theme and plugin editor with a full-featured code editor using the Ajax.org Cloud9 Editor.

Get Better File Editor

Synchi

Synchi IDE empowers you with syntax highlighting and powerfull IDE features in WP plugin editor, themes editor and article HTML editor. Plugin is based on CodeMirror library.

No need to leave the plugin/themes editor page for saving files, they are now opened in tabs for your convenience. You can also create new files and folders, delete and copy/cut existing files and folders!

You can also enjoy syntax highlight and basic IDE features (search/replace,code formatting, line highlight…) in HTML article editor without conflicts with TinyMCE. Full screen is enabled also.

Get Synchi

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.

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.

Get WPide

WPEditor

Get WPEditor

Some other notable mentions are:

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

Jean Galea
Jean Galea
Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

16 Responses

    1. This is a pretty good plugin too, I am listing it above. Some feedback:

      • On full-screen the icons appeared cut-off at the bottom, maybe you could also implements nicer full-screen functionality, like the new wordpress editor has.
      • What is the purpose of creating a new directory? I don’t it would be visible from the wp-admin side anyway, correct me if I’m wrong.
      • Is it possible to control the number of lines shown in the editor? As in the total height of the code window?
  1. The full screen functionality is based on the built in post editor functionality so i guess i don’t understand what you mean.

    he purpose of creating a new directory is actually something that i have found very useful when coding plugins and you need a way to organize your plugin files, for example all javascript files, i create a directory named “js” and then i can create files in it using “js/filename.js”

    Currently the height of the code windows is fixed but i’ll look in to that.

    thanks.

    1. Ah ok I was creating a directory in the theme editor not the plugin editor, that’s why I didn’t see the use of it there. Thanks for your replies, plugin added in the post above.

  2. These plugins are good, but I would like to see syntax highlighting when I create or edit a new post, not just when editing plugins and themes. I have seen a lot of people asking for this, so there must be some techinical hurdle that needs to be jumped.

  3. These plugins are good, but use something more powerful.

    I’d recommend you to try Synchi.

    Its a full IDE inside your WordPress! Syntax highlighting and powerfull IDE features in WP plugin editor, themes editor and article HTML editor.

  4. I’ve used some of the listed editors for a long time. Unfortunately, all of them has the similar problems: they’re not integrated with the rest of WordPress components. For example, you can’t use them to edit Text widget, add some changes in the custom HTML/JS/CSS in a some third party theme and etc. That is why I switched to https://codehighlight.com/. This Google Chrome extension allows me to edit sources everywhere on the Web, not just in WP only. Plus you keep your WP site free from the unnecessary plugins.

Leave a Reply

Your email address will not be published. Required fields are marked *

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.