jaredatch/Custom-Metaboxes-and-Fields-for-WordPress — Issue #101: Tabs
Author: jasonbahl
Created: 2012-01-25 07:32:47+00:00
State: open

I had the need to create tabs within a Meta Box to separate meta field options so I coded something up. . .I'm fairly new to the github scene, so if there's a better way of sharing this than writing it here as an issue, let me know. . .

Probably not the most efficient way to do it, but probably with some of your fine tuning it could be added to the script.

Here's what I changed:

init.php

In the init.php file I had to make several changes, but nothing too major.

jQuery UI Tabs

To use jQuery UI tabs, I had to initiate the jQuery UI tabs, so I changed this line from:

```
wp_register_script( 'cmb-scripts', CMB_META_BOX_URL . 'js/cmb.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'media-upload', 'thickbox', 'farbtastic' ) );
```

to

```
wp_register_script( 'cmb-scripts', CMB_META_BOX_URL . 'js/cmb.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'media-upload', 'thickbox', 'farbtastic', 'jquery-ui-tabs' ) );
```

The Markup

The markup for jQuery UI tabs is as follows:

```

Nunc tincidunt

Proin dolor

Aenean lacinia

```

So, I needed to wrap all the options in a div with id of tabs.

I added the following just below the global $post; declaration.

```
$i=0;
echo '

';
```
Then at the bottom, where the table closes, replace the closing table with a closing div to close the tabs wrapper. (We'll take care of closing the table in a bit).

```

```

This creates the Tabs wrapper container.

Then, to create the anchor links I added a new case:

```
case 'tabanchors':
echo '

';
foreach ($field['tabs'] as $tab) {
echo '
', $tab['name'], '
';
}
echo '

';
break;
```

Which is implemented like so:

```
array(
'type' => 'tabanchors',
'tabs' => array(
array( 'name' => 'Tab 1', 'value' => 'tab1', ),
array( 'name' => 'Tab 2', 'value' => 'tab2', ),
array( 'name' => 'Tab 3', 'value' => 'tab3', ),
)
),
```
This creates an unordered list of Anchor links that will be used to call the tabs.

To separate the various fields into tab sections, I created a few more cases:

```
case 'section':
$i++;
echo '

';
echo '

';
break;

case 'close';
echo '

';
break;
```

The "Section" case replaces the code that opens the table (line 172), so l removed that from the code as a new table will now be created in the fields array. The table is also closed in the fields array now, so the closing table that was replaced as mentioned above is taken care of.

So, to implement the tab sections, simply add the following:

```
// THIS CREATES THE 1ST TAB SECTION
array(
'type' => 'section',
'id' => 'tab1', // MUST MATCH ONE OF THE TAB ANCHOR VALUES
),
array(
'name' => 'Test Text',
'desc' => 'field description (optional)',
'id' => $prefix . 'test_text',
'type' => 'text',
),

// THIS CLOSES THE TAB SECTION
array(
'type' => 'close',
),

// THIS OPENS THE 2ND TAB SECTION
array(
'type' => 'section',
'id' => 'tab2', // MUST MATCH ONE OF THE TAB ANCHOR VALUES
),
array(
'name' => 'Test Text Area',
'desc' => 'field description (optional)',
'id' => $prefix . 'test_textarea',
'type' => 'textarea',
),

// THIS CLOSES THE TAB SECTION
array(
'type' => 'close',
),

// THIS OPENS THE 3RD TAB SECTION
array(
'type' => 'section',
'id' => 'tab3', // MUST MATCH ONE OF THE TAB ANCHOR VALUES
),
array(
'name' => 'Test Radio inline',
'desc' => 'field description (optional)',
'id' => $prefix . 'test_radio_inline',
'type' => 'radio_inline',
'options' => array(
array( 'name' => 'Option One', 'value' => 'standard', ),
array( 'name' => 'Option Two', 'value' => 'custom', ),
array( 'name' => 'Option Three', 'value' => 'none', ),
),
),

// THIS CLOSES THE TAB SECTION
array(
'type' => 'close',
),
```

cmb.js

Only one small change to the cmb.js file was required. . .

Initiate the tabs

Within the ready function, I added this line to initiate the tabs:

```
$(".tabs").tabs();
```

CSS

I haven't spent much time styling the tabs yet. . .but it should be very easy to make them fit in with everything.

So far all I did was add the following:

```
.tabs li { float: left; padding-right: 10px; }

```

Notes

I took the idea of separating the fields into sections from here: http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/

I think one thing that could be improved is instead of creating the tabs with a separate case, it could use a foreach to check how many sections there are and create the tab anchor links based off that. . .probably pretty easy to implement, but I'm too tired to think about it any more. . .

Let me know if there's anything you have questions on or if you want me to provide the full code to check it out.

It's working great for me though!

Thanks,

Jason

There could easily be a better/more efficient way of doing it, but I think it works. . .