Concept: WordPress Theme Designer

The idea is essentially based on what the folks over at SquareSpace have done – provide a WYSIWYG interface for designing/modifying blog templates. I’ve had this idea for a while now (though on a larger scale than just WP), but it was only until recently when I became more adept with JavaScript that I began to think seriously about how to implement it. I decided to narrow my focus to WP for a couple reasons:

1. The WP community is large, and many people could benefit from this kind of tool.
2. WP has a limited number of design-influencing template functions. This makes my job easier.

Implementation

There are a few different aspects to developing the back-end functionality for this kind of tool. Note that I’m writing off the top of my head, so this list is sure to change.

• Understand the structure of the selected WP theme: header, footer, the loop, content (page, post, comments, etc), sidebar. This would be accomplished by parsing the theme’s main files (index.php, page.php, theloop.php, etc), and determining where each template function resides in relation to surrounding HTML elements.
• Use the information gathered from parsing to create a “map”: a link between template functionality and the Document Object Model. This will allow us to determine which elements of the WP suite are actually implemented on the page, where they are, and the limitations of their placement on the page.
• Functionality to modify the theme’s template files based on front-end design changes. This includes activating and placing widgets, HTML arrangement, CSS mods (+ other things I’m not thinking of?)

The front-end component is a little more obvious I think. I’m not too certain of the best layout, but SquareSpace has the right idea. Semi-transparent overlaid windows with all the design-related functionality needed: “drag-and-drop the sidebar here”, “give the footer this background color”, “put a calendar right here”, etc. At this point I’m more concerned about interfacing and modifying template files.

In terms of actually programming this plugin, I’ve had a lot of success with the Yahoo User Interface JavaScript library, so I’d want to use that for the front-end. And of course an AJAX interface to the PHP back-end to make modifications to the template files.

Clearly still mulling this over. Comments welcome!