WordPress Experiments: Visual Styles Editor

In a previous blog post I demonstrated a video of the color wheel concept. Today I’d like to show you another WordPress themes experiment — visual styles editor.

As shown in the video, the styles editor pops out as a dialog box which you can move around the page. The dialog itself contains a select box where you get to pick a certain style (like headings, menu anchors, etc) and the actual properties below. An “element picker” might also be introduced, but has to be very well implemented in order to work.

So yeh, editing WordPress themes on the fly is possible, the parameters are saved when the save button is clicked via a short AJAX call and the next page will contain the modified CSS. Next up is column widths, probably the most dangerous thing to mess around with ;)

About the author

Konstantin Kovshenin

WordPress Core Contributor, ex-Automattician, public speaker and consultant, enjoying life in Moscow. I blog about tech, WordPress and DevOps.

6 comments

    • Elliot, these experiments are run locally, but there's a github repo where I tend to push stuff from time to time before it makes it into the WordPress repo ;) Cheers and thanks!

    • Thanks David, I guess that this is the kind of functionality that premium themes and theme frameworks are really lacking, for the less techy people. We all know we can use Chrome's or Firefox's dev tools to inspect elements, change their styles, then copy paste to the custom CSS fields, but hey not everybody is that smart ;)

      Cheers and thanks again for your comment!

    • Absolutely, I agree. In our themes we are always thinking of better ways to give power to the user on how to layout, and organise content etc. Having advanced options on the back-end too. But with some great front-end tools too, this will be very popular I think!