Create Tabs in Meta Boxes

November 2, 2023

Recently I published another tutorial where I created tabs for WordPress settings pages. We didn’t even discussed the design moment there, because WordPress core has everything we need, we just used a wrapper element <nav class="nav-tab-wrapper"> and two CSS classes for tabs nav-tab and nav-tab-active. That’s pretty much it.

With meta boxes for posts this moment can be a little bit tricky. We can of course use the same approach we used for settings pages and then our tabs are going to look like this:

meta box tabs like in WordPress settings pages

In this example we have a couple of disadvantages:

These tabs aren’t going to work by default, so we need to add some JavaScript which is going to switch the tabs.
I also added some custom CSS for tabs – background-color and border-color, otherwise they looked really ugly.

Or we can try the tab design WooCommerce uses:

Tabs look nicer but in this case we have to copy all the CSS from WooCommerce when it is not installed on our site. And don’t fotget JavaScript. So it is similar to the “option pages-like” tabs way but maybe even more complex.

Suddenly I found a solution when I took a look at categories meta box:

meta box with post categories in WordPress

When I tried to copy and paste it for my custom meta box I found out that it works as is, that we don’t even have to add any extra CSS or JS! So, it seems to be exactly what we need. And this is how our final meta box in this tutorial is going to look like:

create tabs in WordPress meta boxes — Organizing fields by tabs in WordPress meta boxes.

As always I am going to show you two approaches here:

Completely from scratch. In this case the tutorial about meta boxes is recommended to read.
With my plugin. Just copy and paste the code plus different field types are supported.

1. Creating Tabs in Meta Boxes from Scratch

As I already mentioned before, there is a complete tutorial about meta boxes as well. So if you have some difficulties with the code below, maybe you will find the answers in that guide.

<?php
add_action( 'admin_menu', function(){
	add_meta_box( 'misha_tabs', 'Meta Box', 'misha_tabs_callback', 'page', 'normal', 'default' );
} );

function misha_tabs_callback( $post ) {

	$field1 = get_post_meta( $post->ID, 'field1', true );
	$field2 = get_post_meta( $post->ID, 'field2', true );
	$field3 = get_post_meta( $post->ID, 'field3', true );
	
	?>
		<div id="taxonomy-mishatabs" class="categorydiv">
			<ul id="mishatabs-tabs" class="category-tabs">
				<li class="tabs"><a href="#first-tab">First tab</a></li>
				<li><a href="#second-tab">Second tab</a></li>
			</ul>
			<div id="first-tab" class="tabs-panel">
				<table class="form-table">
					<tbody>
						<tr>
							<th><label for="field1">Field 1</label></th>
							<td>
								<input type="text" id="field1" name="field1" value="<?php echo esc_attr( $field1 ) ?>" />
							</td>
						</tr>
						<tr>
							<th><label for="field2">Field 2</label></th>
							<td>
								<input type="text" id="field2" name="field2" value="<?php echo esc_attr( $field2 ) ?>" />
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="second-tab" class="tabs-panel" style="display:none">
				<table class="form-table">
					<tbody>
						<tr>
							<th><label for="field3">Field 3</label></th>
							<td>
								<input type="text" id="field3" name="field3" value="<?php echo esc_attr( $field3 ) ?>" />
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	<?php

}

Some notes:

The code is not full, there is no save_post part, so the fields aren’t going to be saved into the database when we hit “Publish” or “Update” button. I skipped it for simplicity because our main goal here is to create tabs.
In order to make the tabs work, we need to keep in mind multiple moments: we have to use CSS classes categorydiv – for the wrapper element, category-tabs – for the tab links wrapper, tabs – for currently active tab <li> element and tabs-panel for tab content elements. And also we have to use id attributes taxonomy-{unique tabs ID} – for the wrapper element and {unique tabs ID}-tabs for the tab links wrapper. Of course never forget about link href attributes and tab content elements id attributes.
I am also using the esc_attr() function because you should never forget about sanitization and escaping in meta boxes.

Not as difficult as it sounds, but if you need a simpler solution, take a look at the next chapter.

2. Using a Plugin to Create a Meta Box with Tabs

Right now I am going to show how to create exactly the same meta box, but with the help of my Simple Fields plugin. Below is all the code you need:

add_filter( 'simple_register_metaboxes', function( $metaboxes ) {

	$metaboxes[] = array(
 		'id' => 'misha_tabs',
 		'name' => 'Meta Box',
 		'post_type' => array( 'page' ),
 		'tabs' => array(
			array(
				'name' => 'First tab',
				'fields' => array(
					array(
						'id' => 'field1',
						'label' => 'Field 1',
						'type' => 'text',
					),
					array(
						'id' => 'field2',
						'label' => 'Field 2',
						'type' => 'text',
					),
				)
			),
			array(
				'name' => 'Second tab',
				'fields' => array(
					array(
						'id' => 'field 3',
						'label' => 'Field 3',
						'type' => 'text',
					),
				)
			),
 		)
 	);

	return $metaboxes;

} );

If you don’t know where to insert it, please read this.

The result:

# WordPress, Metadata