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?
Post Revisions:
- 9 August, 2010 @ 6:31 [Current Revision] by michael castilla
- 22 November, 2008 @ 7:00 by Ryan Imel
Definately looks good! I’d support this for sure. They’ve got post revisions, it would only be a small thing to store file revisions too…
I totally agree with you! That would be a good idea for everyone!
I like that idea would make life easier than having to open the FTpP client
I like your suggestions. I’m a coder myself, but having the theme editor right in the browser next to all the other management tools is so convenient.
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?
[...] WordPress Needs a Better Theme Editor (tags: WordPress theme php) Spread the word! [...]
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.
@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
Yes, tabs, please!!!!!
Really good ideas and like you said “necessary”, the plugin would be great.
A greasemonkey script could do the job ?
@mathias – True, but what about browsers that don’t support Greasemonkey? I use Safari, for instance
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.
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’.
Check out WP Advanced Code Editor, that may be a good start. Should knock out “Code syntax highlighting (with tabs)”
I know a few plugin devs, (well this one guy) who is working on something similar too.
Theme file revisions would be an awesome feature!
illtemper approves of this post
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
These features didn’t make it into 2.7, but there’s hope that they might make it into 2.8.
* Codepress code highlighting for template editing
* Versioning of template edits
* Documentation links for functions used in currently edited template
http://codex.wordpress.org/Version_2.7
Line numbers would be fantastic.
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
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.
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?
Codepress is pretty nice, I found a WordPress plugin for it on a German site:
http://www.naden.de/blog/wordpress-code-editor
Gives line numbers and syntax highlighting
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.
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.
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.
[...] parece especialmente interesante el editor de plantillas con resaltado de código, que suprimiría la necesidad de utilizar editores externos la mayoría de las ocasiones, algo ya [...]
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!
Excellent Idea!
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.
One of the weaknesses of WordPress soon filled by WP candy. Great!
Atm the only real option is to copy & paste to a proper editor; a proper theme editor is much needed in WP
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!
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.
Sounds good – looks a lot like Coda’s syntax highlighting…
Built-in Subversion would be sick… but too hard for most to figure out, sadly.
Line numbers would also be more than welcome.
I’d definitely like to see theme file revisions, syntax highlighting, and perhaps error checking beforehand.
Here here. great idea. hand up any one whos sick of trying to find that one little mistake in that jumbled mess of code.
[...] a plugin to do so, making this exceedingly unlikely. As for the syntax highlighting, there has been discussion about improving the code editor, but no actual work or bugs filed regarding it. The popular plugin to generate the XML Sitemap [...]
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.
Look’s like Automattic has been listening to it’s users about the theme editor being average. The latest development version (2.8-bleeding-edge) has some theme editor changes!
http://www.hahahaimontheinternet.com/2009/03/01/some-great-new-features-on-the-way-for-wordpress/
[...] fully aware of the fact that I’m not the first to have spoken about this issue, however, it’s something I just can’t keep my mouth shut, nor walk away and whistle. [...]
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
Hi there, how can i get ‘theme-editor’? I’m using WP2.8 but still not get what above shows.
I made a sick editor this morning. It’s on WordPress.org.
Full URL to the tool: http://wordpress.org/extend/plugins/ae-syntax/
Enjoy wpcandy community!!
0
Okay, I’ve updated the plugin, so I figured I’d drop it here. With most of the suggestions listed. Thanks for the great idea. the new plugin is found at /wordpress.org/extend/plugins/wp-code-editor-plus/