CMB2: Size Matters

One of the problems with adding a million custom meta boxes is that you have to arrange them in a way that doesn’t make the post editor suck.

In today’s example I have the following custom meta ‘items’:

• Featured Image: 1
• Taxonomies: 3
• Dropdown selections: 3
• “Rating” scores: 4
• Text Boxes: 6 (1 plain text, 5 TinyMCE)

That’s a lot of data. And it takes up a lot of space. Here’s how I made it less insane.

Group your data

While it’s tempting to show all your post meta in one giant block, don’t. This can sound counterintuitive because the goal here is to save space, but the problem is that not everyone who edits a post needs all the information. Let’s pretend you’ve tasked your intern (or yourself) with going through 560 posts and editing one field. You can minimize everything else to make less scrolling, so group your items wisely.

Make a section for ‘These are totally required’ and put it on top. Put the ‘We’d like this data…’ in another section. And then the checkboxes and yes/no dropdown can go into a sidebar. Less space, more filling.

Use a grid

The first way to not go insane is to use CMB2 grid. This allows me to combine related boxes into a simple grid pattern (hence the name) so they took up less space. The four ratings have commiserate text boxes, so with the grid I displayed the rating on the left and the text box on the right.

Similarly, all of my dropdown selections are small so I made a grid of two of them. They show up side by side in a sidebar.

Only use TinyMCE when you have to

TinyMCE takes up a lot of room. But sometimes you really do need it and not just plain text. When you do, consider TeenyMCE instead of TinyMCE. TeenyMCE is a smaller version of TinyMCE, hence the name, and it only shows a small subset of the normal TinyMCE options. The advanced bar is gone completely. To use it with CMB2, you want to make the teeny option true:

$cmb_showdetails->add_field( array(
	'name'       => 'WYSIWYG Area',
	'id'         => $prefix . 'myarea',
	'type'       => 'wysiwyg',
	'options'    => array(
		'textarea_rows' => 10,
		'teeny'         => true,
		'media_buttons' => false,
	),
) );

And don’t worry, markdown works fine in the teeny window.

Make TeenyMCE even smaller

Even with TeenyMCE, there were some values I knew we didn’t need. So I removed them:

add_filter( 'teeny_mce_buttons', 'myplugin_teeny_mce_buttons' );
teeny_mce_buttons( $buttons ) {
	$remove = array( 'alignleft', 'aligncenter', 'alignright', 'undo', 'redo', 'fullscreen' );
	return array_diff( $buttons, $remove );
}

You may not want to remove them all, but certainly you don’t need fullscreen.

What are your tricks?

What do you do to keep your meta boxes from getting the best of you?

Ipstenu (Mika Epstein)

I’m Mika (aka Ipstenu) and I’m complicated. I’ve been on the net since the days of dedicated terminals and Novation CAT modems and solved Missionaries and Cannibals (or Goats and Cabbages) before I was six, and blog about WordPress and technical/computer things at Half Elf on Tech.

See Full Bio