WordPress Needs a Better Theme Editor

45 Comments

Posted by on

With WordPress 2.7 coming out any day (or week) now, one thing I’d would’ve like to see them update is the built-in WordPress Theme Editor with a cleaner, more functional interface for a better user experience.

Theme Editor Used by Bloggers

Most normal bloggers and other non-programmers use the Theme Editor for editing and changing their theme’s code. Since most are unfamiliar with FTP, the Theme Editor is the best solution for messing around with their WordPress theme.

Theme Editor Used by Programmers

Most programmers and users familiar with coding don’t use the Theme Editor, and instead use FTP for transferring files. I myself am I coder, but occasionally, when I’d like to make a quick change to a WordPress theme, whether it be for a client or for personal stuff, or I simply don’t feel like opening up Transmit and Coda, I use the Theme Editor.

I’ve created a design mockup of what I’d like to see the future built-in WordPress Theme Editor look and function like:

The current Theme Editor

My future-envisioned Theme Editor

Here’s a list of things I’ve added/changed: from the latest 2.7 Theme Editor:

  • Code syntax highlighting (with tabs)
  • Ability to edit the file name
  • WordPress’ quicktags toolbar
  • Drop-down list of theme files
  • Separation of core and template files
  • Theme file revisions (an awesome idea by my friend Travis Hines)

The additions/changes I made are pretty simple, but necessary. Who doesn’t like syntax highlighting? Or a bit of organization? What do you guys think? Would you also like to see an improvement to the built-in WordPress Theme Editor?

45 thoughts on “WordPress Needs a Better Theme Editor”

  5. Funny.. I was just thinking the same thing yesterday. I started fixing something small thru the Theme Editor and ended up using Notepad++ because of it’s ease of making the code more readable…

    I’m sure someone can come up with this in the form of a plugin.. couldn’t it?

  6. Pingback: links for 2008-11-22 | links | WereWP

  7. Nice post Michael, good ideas you have.
    I’ll add the ability to use tabs on the editor. That will help a lot to have a cleaner code.

  8. @Bram – Exactly what I was thinking! It shouldn’t be too hard to implement that.

    @Remkus – I actually didn’t even think of that! Well, plugin developers, now ya’ll know! But I do think this shouldn’t be a plugin, and rather an addition to the core.

    @jbj – Yeah, definitely. Let me add that 🙂

  12. Hello

    Why not simply remove those editors in WordPress ? Most people only use external editors. And it is a need to keep WordPress from getting more and more big and fat.

  13. Someone could soo write a plugin for this, and I think it would be better to do it that way anyway. Depending on what hooks are available, you could probably throw the files into selects pretty easily.

    Perhaps you could have buttons to insert commonly used functions (IE, get_sidebar(), get_footer(), etc.) into the document. And you could even get as fancy as to integrate version control into it, but that’s kind of radical.

    I’m not sure about revisions though. In THEORY you could write a plugin to make wordpress function like textpattern or expressionengine and create a new post type for templates for people who like it that way or you could do something with my batshit crazy subversion idea.

    Not sure if it’d work, but just sayin’.

  16. WP really needs a WYSIWYG theme designer. I am not a programmer nor am I artistic, I could really use some help with theme layouts. You can download themes all you want but for me they need to be tweeked which takes hours sometimes because I am so poor at html

  19. I really like the idea of file revisions. I do most file changes via FTP. When I use the these editor, it’s for something really minor. To see if this color looks better or if a bit of padding reads better. Minor stuff that I’m too lazy to do by FTP. So being able to revert to the older revision afterwards would be cool

  20. this is a nice feature. i’m gonna wait for this. [^^] but, i also prefer some desktop application that manage to design and code theme for WP, with UI. 🙂

  21. I’m not any more crazy about your mockup interface than I am of the current layout, but if you’re wanting progression I’m all for it. While we’re dreaming of should-be-standard-but-need-to-be-requested features, how about CodePress integration?

  23. If the theme editor is going to become a more intergral part of everyone’s theme development, then being able to insert commonly used functions would be great, and could be refined depending on what file you’re editing.

    Code highlighting is a must, and is surely easily implementable.

  24. Great post. There are a few plugins for FF or for WP that you can use to make life a little easier, but some of them require copying and pasting, etc. I’m a big fan of editing right there in wordpress, its a shame it doesn’t have the features you’ve mentioned.

    @illtemper – great find! I’m using it right now. Works awesome in 2.7 beta. At least I know when I get a php error and it tells me what line the issue is on I wont have to hit the arrow key down that many numbers to figure out just where it fails. The highlighter isn’t amazing, but it works better then nothing at all.

  25. Bah, as an update to this, and one thing that should be considered if someone were to compose a plugin or if WordPress were to actually impliment these changes into a later version: tabbing.

    I activated @illtemper’s plugin that he\she suggested and it did look great, but I soon realized that my Tab In Text Area add-on for Firefox no longer worked. I weighed the two and and, hands down, decided to deactivate the code-editor plugin.

    Tabbing is so important if you are going to edit themes using WP. I can’t imagine keeping things organized without indentation. Heck, might as well give up using my return key and just throw everything on one long line while I’m at it.

    Alas, it was all too good to be true.

  26. Pingback: South Solutions » Lo que no ira en WordPress 2.7

  27. What would happen with the top tag links (Link, B, etc) when you were editing a CSS document? Would you recommend those changing to common CSS tags?

    I like most of your changes, but I am a little worried about taking something simple that works, and making it more complex, and thus more difficult to use.

    Other than that I think those are great suggestions!

  29. Great ideas. Good discussion in the comments. Thanks for this.

    I support and really want color code syntax highlighting, and line numbers, in the Theme Editor of WP. That seems really simple. Even for people who are not WRITING code there, but just reading your own theme code, you need highlighting in colors.

  32. Fantastic mock-up!

    Not bothered about the buttons at the top but the way you have structured the theme files to the right is exactly how it should be done, was thinking very similar last night after becoming frustrated with the lack of progress on the theme editor in WP 2.7.

    Line numbers is a must!

  33. I’ve only created one WordPress theme so far, but here’s what I do:

    I come from a Ruby on Rails background, so I am very much a fan of Capistrano. Deployment is very easy and can be used for more than just RoR projects. What I have setup is a subversion repository containing the entire WordPress installation, then pointed Capistrano at it. Any time I make a local revision to the files (theme, image, whatever), I just do a check-in and a deploy. Done. This allows me to use my editors of choice (TextMate and CSSEdit – which if you haven’t used it before, it is amazing! Especially its live preview of a style sheet applied to any site) and work in my own environment.

  38. Pingback: Enough With the Speculation < Hello, Dolly

  39. Having only used wordpress for 3 months I was quite disappointed that there was no syntax highlighting or line numbers within the editor itself and I feel that this would a great and necessary addition to further enhance the wordpress interface for everyone.

  41. Pingback: WordPress badly needs a better Theme Editor | iTechnologize.net

  42. Hi,

    I am a newbie and not a coder. I have finally got my head around the social blog concept thing but none of the themes are perfect for me and I’d like to edit them.

    For lots of non-coders out here all we want to do is make colour changes to text, boarders and fills. Change the fonts, their size and header styles.

    If we could do that in a wizzy visual way we would be up an running as easily as we got started with WordPress.

    Yours hopefully

    Dom

Comments are closed.