Skip to main content

Meta Box Tabs

Meta Box Tabs helps you to put custom fields into tabs for a better view. Tabs can have icons and can be put on the left side of the meta box.

tab styles

Tabs in settings pages

Tabs in the settings pages are created separately with different settings by the MB Settings Page extension. This extension is for grouping fields inside a field group only.

Creating tabs

First, you need to create custom fields as usual. Go to Meta Box » Custom Fields and create a field group with the custom fields you need.

Creating a field group with some custom fields

Then adding tabs to the field group. Tab is a special field type and is available in the field list.

Not a premium user?

This instruction uses Meta Box Builder extension, which is a premium extension and is already bundled in Meta Box AIO and MB Core. If you're not a premium user, please purchase a license to use it. However, you can do this with code. See below for more information.

To add a tab, click the + Add Field button and search for Tab:

Adding a tab field

After adding tabs, you need to reorder tabs among the fields. The fields that follow a tab will belong to this tab.

Reorder tabs

Tab settings

Each tab has its own settings like label or icon. To see and change the tab settings, click the tab title bar:

View tab settings

Below is the meaning of each setting:

NameDescription
LabelThe tab label
IDThe tab ID, which is used internally by the plugin
TypeThe field type, must be "Tab"
Icon typeThe icon type, you can choose between Dashicons (default), Font Awesome, or custom URL. Optional.

If you choose the tab icon type Dashicons, you'll see a list of icons to pick from (as in the screenshot above).

If you want to use a FontAwesome icon for the tab, then select Icon type "Font Awesome" and enter the icon CSS class in the next input.

If you have a custom image for the tab icon, then select Icon type "Custom URL" and enter the icon URL in the next input.

Tab style

The plugin provides 3 styles for tabs: "default", "box", and "left" as you can see below:

Tab style

To change a tab style, go to the Settings tab and choose one style in the Tab style dropdown:

Select a tab style

You can also set the default active tab here by entering the tab ID in the Default active tab ID.

Now you have your tabs ready. Please edit a post to see them in action!

Using code

If you're a developer and prefer using code to create tabs, this is a sample code to create simple tabs:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
$meta_boxes[] = [
'title' => 'Meta Box Tabs Demo',

'tabs' => [
'contact' => 'Contact',
'social' => 'Social Media',
],
'fields' => [
[
'name' => 'Name',
'tab' => 'contact',
],
[
'name' => 'Email',
'tab' => 'contact',
],
[
'name' => 'Facebook',
'tab' => 'social',
],
[
'name' => 'Twitter',
'tab' => 'social',
],
],
];

return $meta_boxes;
} );

To create tabs for your meta box, you need to add these parameters to your meta box settings:

ParameterDescription
tabsArray of tabs. See below for details.
tab_styleThe tab style: default (like tabs for Categories), box (like tabs for Visual and Text modes of the main editor) or left (like tabs in the Help screen)
tab_default_activeDefault active tab ID.

The list of tabs is defined in the tabs parameter. A tab can have or doesn't have an icon and can be set like this:

'tabs'      => [
'contact' => 'Contact', // No icon
'social' => [ // With icon
'label' => 'Social Media',
'icon' => 'dashicons-share',
]
],

The plugin supports the following icon type for tabs:

  • Dashicons: set icon to the class name of Dashicons, e.g. dashicons-email.
  • Icon font: set icon to the icon class name. For example, if you want to use Font Awesome, set 'icon' => 'fa fa-home'. Note that you have to enqueue the CSS for your custom font icon yourself. The plugin only supports Dashicons by default.
  • Custom URL: set icon to the URL of the image

Then for each field in the meta box, you need to specify which tab it belongs to by adding a parameter 'tab' => 'tab-id' where tab-id is one of the tab IDs you have registered above.