Cloudy and foggy morning down here, Northern Kings playing their latest song, and me writing a sample plugin.

WordPress Plugin Tabbed Interface

Have you ever wanted to create a tabbed interface for your plugin? Have you ever wanted to rearrange your plugin’s options and provide tabs instead of subpages and submenus? In the following tutorial, I’ll show you how to create a simple plugin with multiple tabs.

We’ll start with the usual page structure:

<div class="wrap">
<div id="icon-options-general" class="icon32"></div>
<h2>Sample Plugin</h2>

<?php
$active_tab = isset($_GET['tab']) ? $_GET['tab'] : 'sample_tab_1';
if(isset($_GET['tab'])) $active_tab = $_GET['tab'];
?>
<h2 class="nav-tab-wrapper">
<a href="?page=sample&amp;tab=sample_tab_1" class="nav-tab <?php echo $active_tab == 'sample_tab_1' ? 'nav-tab-active' : ''; ?>"><?php _e('Sample Tab 1', 'sample'); ?></a>
<a href="?page=sample&amp;tab=sample_tab_2" class="nav-tab <?php echo $active_tab == 'sample_tab_2' ? 'nav-tab-active' : ''; ?>"><?php _e('Sample Tab 2', 'sample'); ?></a>
<a href="?page=sample&amp;tab=sample_tab_3" class="nav-tab <?php echo $active_tab == 'sample_tab_3' ? 'nav-tab-active' : ''; ?>"><?php _e('Sample Tab 3', 'sample'); ?></a>
<a href="?page=sample&amp;tab=sample_tab_4" class="nav-tab <?php echo $active_tab == 'sample_tab_4' ? 'nav-tab-active' : ''; ?>"><?php _e('Sample Tab 4', 'sample'); ?></a>
<a href="?page=sample&amp;tab=sample_tab_5" class="nav-tab <?php echo $active_tab == 'sample_tab_5' ? 'nav-tab-active' : ''; ?>"><?php _e('Sample Tab 5', 'sample'); ?></a>
</h2>

Notice the bolded code is where active tab checking is performed. That’s where the magic happens.

We’ll then add the tabs:

<?php if($active_tab == 'sample_tab_1') { ?>
<div id="poststuff" class="ui-sortable meta-box-sortables">
<div class="postbox">
<h3><?php _e('Sample Settings', 'sample'); ?></h3>
<div class="inside">
<p><?php _e('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'sample'); ?></p>
</div>
</div>
</div>
<?php } if($active_tab == 'sample_tab_2') { ?>
<div id="poststuff" class="ui-sortable meta-box-sortables">
<div class="postbox">
<h3><?php _e('Sample Settings', 'sample'); ?></h3>
<div class="inside">
<p><?php _e('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 'sample'); ?></p>
</div>
</div>
</div>
<?php } if($active_tab == 'sample_tab_3') { ?>

And so on. Notice you can add how many tabs you want.

You close the function by ending the current loop and the main div.

<?php } ?>
</div>

I have written this code in the form of a plugin, 3.5-beta-1 compatible, fully translatable and error-free.

Download it here - Sample Plugin 1.0  – and leave your feedback below.



Read More on the Same Subject


Read our comment policy before commenting!


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>