Posts tagged theme

When I write plugins for wordpress I like to do it on a test blog in a live environment.

Maybe not the best idea, but it's how I like to do it, and it also flags up any weird and wonderful restrictions to the development of the plugin as a result of my hosting company's security policy.

For a while now I've worked with just the plain old plugin editor that comes with wordpress, but this is cumbersome to say the least and as such I went looking for a syntax highlighting editor which I could (if necessary) convert into a plugin to (ironically enough) improve the plugin editor.

Turns out that there's quite a few good syntax highlighting online code editors available (list at the end of this post) and at least one neat one (CodePress)  has been converted to a wordpress plugin for theme editing and plugin editing.

This is a really great start, but there's a couple of things I'd really like to see to progress this work - If I have the time I'll do it myself, otherwise someone else reading this post may like to take it up!

Basically the current Codepress for wordpress plugin is missing (in my opinion) a few additional functions to create backups of the plugin or theme files you're working on, to an extent a rudimentary versioning system could and should be implemented within the editor.

There should be an option to package up the plugin you're editing and release it to the community/tie updates into the automatic plugin updater of 2.5

The current CodePress release is great but what would make it even greater would be code hinting when editing.

I don't know enough JavaScript to say whether or not this is possible but it would be cool for the editor to notice that you've just typed or started to type a PHP (or other language) function name, and provide you with a syntax hint for the function.

This would work (in my mind) by noticing the opening of ( and then checking what preceded it back to the last space or operator (*, ., /, etc.), then looking up this string from a function definition array and displaying a tooltip near where you are editing in the text area to remind you of the syntax - possibly with an autocomplete if you press enter.

I think the main problem with this is knowing where you are in the text area to display the div with the tool tip text in it in the right place. I know you can monitor where you are in a text area in terms of columns and rows, so surely if you know the location of the start of the text area and the size of the character in the text area and the co-ordinates of the cursor in the text area via row/column values you should be able to determine the optimal position for the <div>?

I think it would be really great to see that kind of functionality in any of the online code editors listed below on it's own let alone any other stuff such as versioning that I've already mentioned.

So there it is!

I probably will end up doing some work on the codepress plugin myself from a versioning point of view, but if any one else out there can figure out a way of doing the code hinting in JS that'd be fantastic!

Existing On line Code Editors:

• CodePress
• CodeMirror
• EditArea
• MarkItUp
• Helene

Autosuggest example (could be used to provide the tool tip if the positioning is worked out): http://gadgetopia.com/post/3773

WordPress plugins:

• Codepress plugin for WordPress: http://rulesplayer.890m.com/blog/?page_id=4
• Flash based code editor with wordpress plugin (dated solution IMO): http://www.flashtexteditor.com/ftf/