Learn Creating Tabs On WordPress Settings Pages

The use of tabs in the user interface proves highly beneficial in organizing content in better manner. When we talk of WordPress themes, it takes of immense importance. This is just because when you will log-in to WordPress admin area, especially to the WordPress themes setting pages, there appears a lot of options that would benefit from tabs.

We are hereby in this blog post, going to discuss how to create a tabbed settings page or tabs on the WordPress setting page. In the course of this post you will find many important things like code snippets useful in the creation of tabs, downloading a WordPress theme that implements the code and much more. Let us see how we move further to accomplish the task.

Let us first move to Appearance/Themes in the WordPress admin area where appears two tabs “Manage Themes” and “Install Themes”. Clicking on one will highlight the tab’s title and the content changes there. Now, our attempt will be to set and send a tab variable when a tab is clicked because it is the tab variable of which we will query later in $_GET[‘tab’], and that will which tab was selected so that we can highlight the corresponding title and display the corresponding tab.

Whatever approach we will follow, there will come three stages when we need to know which tab the user is currently on. The first one is when we initially display the tabs and the form fields for the settings in order to display the correct set of fields, the second one is when the user saves their settings in order to save the correct fields and the third and final is when redirecting the user after they have saved their settings in order to redirect the user to the correct tab.

Let us have a look over the code snippets which are required for creating the tabs in the Settings Pages of WordPress:

Creating The Tabs

The below given are the basic code snippets that produces the tabs. Let’s have a look:

function ilc_admin_tabs( $current = ‘homepage’ )
{
$tabs = array( ‘homepage’ => ‘Home Settings’, ‘general’ => ‘General’, ‘footer’ => ‘Footer’ );
echo ‘<div id=”icon-themes” class=”icon32″><br></div>’;
echo ‘<h2 class=”nav-tab-wrapper”>’;
for each( $tabs as $tab => $name )
{
$class = ( $tab == $current ) ? ‘ nav-tab-active’ : ”;
echo “<a class=’nav-tab$class’ href=’?page=theme-settings&tab=$tab’>$name</a>”;
}
echo ‘</h2>’;
}

The above function will be called later in the content for the settings page. Here we have defined an array that contains all of the tabs. The first tab which is displayed first by default, is the homepage, where we can also set up some option for the appearance of the home page. After then we have created “general” tab which could be a page containing options used throughout the website, and, finally, the “footer” where we will include a tracking code in the footer.

Further we have set up the URL links for each tab and output them; it should be noted here that if the tab is open, an additional class, nav-tab-active, is added here.

Displaying The Tabbed Content

Now, once become aware of creating tab, let us know how to display the tabbed content. Actually, the content for the settings page is displayed in the callback function for add_theme_page, here it is named as ilc_settings_page. The above function which is created just over will be called in the following code snippets as given below:

function ilc_settings_page()
{
global $pagenow;
$settings = get_option( “ilc_theme_settings” );
//generic HTML and code goes here
if ( isset ( $_GET[‘tab’] ) ) ilc_admin_tabs($_GET[‘tab’]); else ilc_admin_tabs(‘homepage’);

Now, it should be noted that if the tab is the default one, then $_GET[‘tab’] is not defined, and in this case the current tab will be homepage and, thus, the highlighted one. In other cases, the highlighted tab will be the one defined in $_GET[‘tab’].

Now, following the above function, it is needed to display the right set of fields. Depending on the value of $tab, we would display The fields for the settings tab for the home page or for one of the other tabs will be displayed on the basis of the value of the $tab:

Let’s see the below given code:

<form method=”post” action=”<?php admin_url( ‘themes.php?page=theme-settings’ ); ?>”>
<?php
WP( “ilc-settings-page” );
if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme-settings’ ){
if ( isset ( $_GET[‘tab’] ) ) $tab = $_GET[‘tab’];
else $tab = ‘homepage’;
echo ‘<table class=”form-table”>’;
switch ( $tab ){
case ‘general’ :
?>
<tr>
<th>Tags with CSS classes:</th>
<td>
<input id=”ilc_tag_class” name=”ilc_tag_class” type=”checkbox” <?php if ( $settings[“ilc_tag_class”] ) echo ‘checked=”checked”‘; ?> value=”true” />
<label for=”ilc_tag_class”>Checking this will output each post tag with a specific CSS class based on its slug. </label>
</td>
</tr>
<?php
break;
case ‘footer’ :
?>
<tr>
<th><label for=”ilc_ga”>Insert tracking code:</label></th>
<td>
Enter the google analytics tracking code here
<textarea id=”ilc_ga” name=”ilc_ga” cols=”60″ rows=”5″><?php echo esc_html( stripslashes( $settings[“ilc_ga”] ) ); ?></textarea><br />
</td>
</tr>
<?php
break;
case ‘homepage’ :
?>
<tr>
<th><label for=”ilc_intro”>Introduction</label></th>
<td>

Here the introductory text for the home page should be entered:

In the above code snippets all of the settings will be stored in a single array in order to prevent several queries from being made.

Saving The Tabbed Fields

Now we have reached to that very stage where it is needed to know which slots of the array to save and which not. Actually, the display of certain options stored in the settings array depends upon the tab being displayed. Thus, if all of the array slots are saved, then it would overwrite some of the positions which are not shown in the current tab and it is therefore meant not to be saved.

In the above code snippet, we have used a switch conditional to query the value of $tab and store the right values in the array. Later on, we have updated the option in the WordPress database to see the effect.

Redirecting The User To The Right Tab

Now the contents are saved successfully, there is a need to redirect the user back to the appropriate tab on the settings page of WordPress. This can be accomplished as follows:

function ilc_load_settings_page()
{
if ( $_POST[“ilc-settings-submit”] == ‘Y’ )
{
check_admin_referer( “ilc-settings-page” );
ilc_save_theme_settings();
$url_parameters = isset($_GET[‘tab’])? ‘updated=true&tab=’.$_GET[‘tab’] : ‘updated=true’;
wp_redirect(admin_url(‘themes.php?page=theme-settings&’.$url_parameters));
exit;
}
}

Now, it depends upon the fact that whether the $_GET[‘tab’] variable is set, wp_redirect is used to send the user either to the default tab or to one of the other tabs.

Now, check the tabs, you will find them working as displaying the right set of fields, saving the right fields, and then redirecting the user to the correct tab.

Download The Theme

Finally, time has come to download the themes. It should be noted that almost any theme with a moderate number of options would benefit from the tabs on the settings page. This one is the one approach which we have dealt with.

The same can also be achieved by following another approach, i.e. by adding several collapsable meta boxes, as seen on the page for writing posts, and then to automatically collapse the boxes that are not frequently used.

However, among the two approach, using tabs enable you to better separate each set of options and is the better one option.