Tab-Bar im WordPress Theme oder Plugin

Insbesondere im Bereich von Plugins kann man mittels Registerkarten Informationen zugänglich gestalten. Bei meinen Themes greife ich heirfür meistens auf Bibliotheken und Frameworks zurück, jQuery und Yaml als Beispiel.

Das nutzen eben dieser ist bei Plugins schwierig, vorallem sollte man diese irgendwann auch mit anderen Leuten teilen wollen oder weiß noch nicht auf welchen Systemen diese zum Einsatz kommen werden.

Das Beispiel hier ist ein kleines dashboard-motd, dass ein Dashboard Widget setzt in dem sich Registrierkarten befinden. Wir nutzen das um eine kleine Übersicht aller CSS Klassen zu haben, welche in unseren Artikeln genutzt werden sollen.

<?php
/*
Plugin Name: Dashboard MOTD
Plugin URI: http://dailycode.de
Description: Message of the day for Dashboard
Version: 1.0
Author: Tobias Schmersow
Author URI: http://dailycode.de
*/

function dashboard_motd_function() 
{
    //if $_GET['tab'] is not set, the page is called for the first time
	//we set the first tab manually in the else clause
	if ( isset ( $_GET['tab'] ) ) $tab = $_GET['tab'];
	else $tab = 'first';
	
	//fill an array with tab titles
	$tabs = array( 'first' => 'Tab 1', 'second' => 'Tab 2', 'third' => 'Tab 3'); 
    
	//print out the tabs: nav-tab containss the css descriptions for inactive tab, the active tab has to use the nav-tab-active class, too
	echo '<div id="icon-edit" class="icon32"><br></div>';
    echo '<h2 class="nav-tab-wrapper">';
    foreach( $tabs as $t => $name )
	{
        $class = ( $t == $tab ) ? ' nav-tab-active' : '';
		//this link can also point to other pages, for the dashboard we stay with index.php
        echo "<a class='nav-tab$class' href='?tab=$t'>$name</a>";

    }
    echo '</h2><table class="form-table"></br>';

	//print out tab content
	switch ( $tab )
	{
		//the content of Tab 1 goes here
		case 'first' :
		
		?>

		<p>
			<strong>Tab1</strong>
		</p>
		<!--don't forget to set the _GET['tab'] value with the hidden field, if you use a form in one of the tabs-->
		<form id="departments" method="get">
			<input type="hidden" name="tab" value="<?php echo $tab ?>" />
		</form>

		<?php
		
		break;
		case 'second':
		
		break;
		case 'third':
		
		break;		
	}
	
	echo '</table>';
} 

//register dashboard widget
function add_dashboard_widget_motd() 
{
	wp_add_dashboard_widget('dashboard_motd', 'Dashboard Widget Title', 'dashboard_motd_function');	
} 

add_action('wp_dashboard_setup', 'add_dashboard_widget_motd');

?>