3

I’m having a complex content issue. Each page can have multiple sections (unknown number), each section can have multiple containers, each container can have multiple content blocks (either 1, 2 or 3).

I’ve currently got a theoretical solution with shortcodes, but I would like to solve this with the UI if possible by providing wysiwyg editors for each content block.

Sections: There can be any number of sections (a realistic/acceptable maximum would be 10). Containers: A section can contain any number of rows (a realistic/acceptable maximum would be 5). Containers: A row must know how many columns it needs to contain. Content blocks: A row can contain 1, 2 or 3 columns.

The shortcode solution looks something like this:

[section id="summary"] //id is required but can be anything (no spaces)
   [container blocks="1"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
   [/container]
[/section]
[section id="find us"] //id is required but can be anything (no spaces)
   [container blocks="3"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
   [/container]
[/section]
[section id="team"] //id is required but can be anything (no spaces)
   [container blocks="2"] //row can have 1, 2 or 3 columns
      [block]
      .content-block
      [/block]
      [block]
      .content-block
      [/block]
   [/container]
[/section]

Does anyone have any suggestions on how I can go about this?

Thanks, Josh

  • sounds like you are recreating html tables. you can with some plugins just add table editing capability to the editor – Mark Kaplun Oct 2 '16 at 12:28
  • @MarkKaplun It sounds like that because I've used the terms 'row' and 'column', but they are not tables. This will be used for layout, not data, so I won't be using tables, I will be using sections, articles and divs. Besides there will be HTML in between each section and row that will come from the template. – Josh Oct 2 '16 at 13:37
  • in html table is a type of layout. if you are talking about columns then you are talking about tables with one row or more. If you want each section is a table. I really don't see the need to reinvent something that is in the html standard – Mark Kaplun Oct 2 '16 at 13:45
  • Try searching around for how you can add styles to the tiny mce editor within WordPress. If you can trust your content editors to use these, you'll find the coding easier than for multiple content blocks. – Andy Macaulay-Brook Oct 2 '16 at 13:50
  • @MarkKaplun it's seriously not. Google why you shouldn't use tables for layouts in HTML. I haven't had this debate in several years so I don't know of any recent articles about it, but the topic is well discussed. – Josh Oct 2 '16 at 13:55
3

This sounds to me like a perfect use of Advanced Custom Fields "flexible content" feature to me. Flexible content fields allow you to define multiple layouts, and then add them to a page or post one by one, in any order or combination you need. Each layout can be a combination of text fields, images, wysiwyg editors, and other field types.

It's a brilliant UI on the client side, and easy to build a custom front-end in your template once you get the hang of it.

It's a premium plugin, but I've been building these kinds of interfaces for many years and it works really well. I haven't found anything else quite like it.

  • thanks for the info. I looked into Advanced Custom Fields but wasn't getting the results I wanted. I did not look into the premium features however. I will definitely investigate this further. Plus 1 for trying to help me get the solution I want rather than offering a potential alternative solution. (Not that the alternative solutions are unwanted). – Josh Oct 6 '16 at 21:46
1

It's easier to code the Visual Editor so your content editors can highlight parts of the post content, rather than trying to add a large number of extra content blocks to the edit screen.

Here's what I use, the basics of which I think I got from the Codex originally, a long time ago.

// Callback function to insert 'styleselect' into the $buttons array
function wpse241267_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

add_filter('mce_buttons_2', 'wpse241267_mce_buttons_2');

This just enables the Style dropdown menu at the left hand end of the second row of Visual Editor buttons.

Now for the meat:

function wpse241267_mce_insert_formats( $init_array ) {  

    $style_formats = array(  
        // Each array child is a format with its own settings

        array(  
            'title' => 'Find Us Block',  
            'block' => 'div',  
            'classes' => 'find-us',
            'wrapper' => true,
            'exact' => true,

        ),
    );  

    // Insert the array, JSON ENCODED, into 'style_formats'

    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 

add_filter( 'tiny_mce_before_init', 'wpse241267_mce_insert_formats' );

You can use IDs instead of classes if you want, but I don't think there's anything to prevent a user adding more than one into a page.

Then in the Visual Editor you can highlight some content, apply this style from the dropdown and the highlighted content will be surrounded by a div with the class find-us.

The exact argument prevents the editor merging multiple adjacent blocks. Depending on your case you may wish to remove this.

  • Andy, thanks so much for coming back and providing this, I really appreciate it. It's the end of my day now, but I will get into this first thing tomorrow. – Josh Oct 2 '16 at 16:28
  • thank you for this suggestion. It works. But it's not perfect. I feel it is only a little bit more user friendly than the shortcodes. I am going to continue investigating a UI solution. – Josh Oct 6 '16 at 21:49
  • No problem. Yeh, it was meant more as an easy to implement improvement. – Andy Macaulay-Brook Oct 7 '16 at 6:50
  • @JDD Have a look at wordpress.stackexchange.com/a/49906/94267 which explains how to add a metabox with the visual editor. I was putting together another answer when I saw this one already there. – Andy Macaulay-Brook Oct 7 '16 at 19:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.