Visual layout using metaboxes

It might be possible. You’re stuck with the existing div postbox containers, but you can add additional HTML and containers (via do_meta_boxes()) by hooking the action ‘dbx_post_sidebar’.

You can enqueue additional style sheets for the edit screen, but I’m unsure how well you could override the defaults.

Hi bcworkz, thanks for your response. I think you helped me before with passing a shortcode as parameter to another shortcode – that’s totally working now with the curly bracket method.

So, I’ve been learning about metaboxes. One thing I found was how to put the post editor into a metabox, so it can be moved around like all the others: this code in function.php

It hooks into admin_head to add new styles, and that looks useful for customizing the appearance of the metaboxes.

I was reading another article though, and I see that add_meta_box has a parameter to set each box in the main or side column. Adding extra columns would probably require digging deeper to understand how that’s set up.

There are some “page builder” plugins out there, often using widgets/sidebars to layout the whole page. I think what I’m looking for is something like that, but with custom fields/metaboxes.

This is what I imagine: create a metabox called Layout, in which it’s possible to add rows. For each row, you can choose the columns – whole, half/half, main/side, 3 equal, 4, etc. Then the content of each column can be any of the metabox/custom fields available for the post, including main content in the post editor metabox.

Getting a list of available metaboxes shouldn’t be too hard, and that can be a selectable drop-down in each column.

For it to work, the layout metabox should override the post content, so that the layout can display all the custom fields on the page… Ah, when I put the post editor in a metabox, I can name it Layout, and create another metabox called Content.

It’s looking possible but quite a task. I’ll post something here if I make any more progress. ??

Yes, the curly bracket idea was mine, good to hear from you again. Sounds like you’ve been productive. Placing the editor in a meta box is a neat trick, kudos!

I could be wrong about the way the columns are assigned via the $context parameter. Just from examining the source code, it doesn’t appear to be anything special, just coordinate the parameter between add_meta_box() and do_meta_boxes(). I expected there to be an equivalent of register_sidebar() used for front end widgets, but I haven’t seen any usage like that anywhere.

I did notice a screen option ‘layout_columns’ that will need modification, there’s possibly other screen parameters to deal with. It appears all the meta box data is stored in the global $wp_meta_boxes so yes, extracting a list is not too hard.

What I did not look at is how dragging between columns is handled. Certainly by javascript, but my concern is it’s only setup for the standard columns and cannot handle added columns. I guess you could assume it’ll work out and just address the PHP side of adding “columns”. It’ll be quickly evident whether the javascript needs to be adapted or not.

Your UI ideas sound ambitious, and cool. This would be a great plugin. It appears setting up a feasibility test would be fairly simple. And basic functional code not far behind. But the UI will take some doing, but a worthy effort. Good luck and have fun with this.

I found an interesting plugin called Live Edit. It enables front-end editing of content and fields. While it’s not specifically about visual layout using metaboxes, it’s quite refreshing to be able to edit the content and custom fields from the front-end.

To make it easy to implement, I’ve added support for Live Edit in my one and only plugin called Custom Content Shortcode. It basically displays custom fields and does query loops, but I’ve been extending it to be flexible for any type of content.

Here’s an example of making a responsive column layout, directly from the front-end: https://i.imgur.com/jRX2pid.jpg

In the example, I’m using a blank page template that just displays the content. That way the whole page can be designed in the browser. The combination of these plugins enable displaying metaboxes/custom fields anywhere, while seeing the result immediately. Already I see a lot of potential, so I’ll keep working on it.

Yes, much potential! Keep up the good work!