Support » Fixing WordPress » Create custom css-driven layout snippets with wysiwyg preview?

  • I’m trying to decide on the best way to handle this issue a client of mine is having. They find the standard wysiwyg editor in wordpress too constraining and they want more flexibility in page layouts. I caught them hacking in bad table-based stuff that was really displaying poorly and cluttering up the code and site.

    They want to be able to go from two columns to three, then down to one, maybe back to two, as they proceed through the content. They want to see this in the editor. I can make custom templates for their theme, or use shortcodes to achieve this but they don’t get the nice friendly wysiwyg experience that makes wordpress so nice compared to other CMS.

    I’m considering all kinds of solutions to this, but thought I’d ping other users to see if there’s something out there that can save me some time.

    Ideally I would like to be able to say “Insert a two column divide here” and in the editor a faint dotted line shows the two column boxes into which they can place their content. They cold then continue below that to insert a 4 column divide and fill that in as they please, or add three column box, etc.

    So far I have thought of writing a plugin for this that would let me insert certain common html snippets, and then adding the styles for them to the editor’s style sheet. Yet I am worried about losing the styles if the editor is affected by updates and such.

    Is there something that does this allready?

    Is there a better way to extend the CSS styles the editor uses? (like a way to put extra editor styles in my theme, instead of in the editor’s css file?)


Viewing 4 replies - 1 through 4 (of 4 total)
  • Josh


    The twentyten theme does this out of the box. I’ve set this up once for a client, admittedly multiple columns were not involved. Here’s one tutorial:
    I did something similar, mostly copying any style related to typography, images, and anything else content related. It works pretty well actually.

    Well, kinda…

    The bummer here is that after getting my code snippets worked up and in place, the editor is so odd about it that things start getting hard to manage really quickly.

    For example, if I put content into my left column and hit enter, the editor for crazy reasons closes the left column div, and creates a second one. If I try to click outside my column group and hit enter, it makes new divs with class “columns” and puts them around everything thereafter.

    There has to be a way to do this…

    As it is right now, I’ll have to write a very complicated plugin with all kinds of interface logic to extend the editor to accomplish the basic task of adding a column div set into my page content without things getting all gummed up.

    Is there perhaps a better editor than TinyMCE for this kind of thing?



    Hey! that looks promising!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Create custom css-driven layout snippets with wysiwyg preview?’ is closed to new replies.