How to : Make a control panel for your wordpress theme

What will the control panel look like.

In this picture you can see the options included in my theme (theme i use for my blog http://www.x-or.be).

1° Creating the file functions.php

Look into your theme directory for the file functions.php, if it doesn’t exist create it so we can begin our work.

2° Creating the initialization function

function mimic_init() {
// add_option('variable name','default value'
// Category to show in the top menu //
add_option('mimic_menu_cat', '1,2,3');
// Featured category//
add_option('mimic_featured_cat', 0);        
}

This function initiliazes all variables in case they have no value (first run of the control panel)

3° Creating the function which gets/saves the data

Where variables are set with saved data and where the data is saved …

function mimic_add_theme_page()
{
// if variables are empty we call the function mimic_init to set the default values
if((get_option('mimic_featured_cat') == '')||(get_option('mimic_menu_cat') == ''))
	{mimic_init();}
if ($_GET['page'] == basename(__FILE__)) {
	//if the form was submited we saved the changes
	if ( 'save' == $_REQUEST['action'] )
	{
		//-----
		if(isset($_REQUEST['mimic_featured_cat']))
			{update_option('mimic_featured_cat', $_REQUEST['mimic_featured_cat']);}
		else
			{update_option('mimic_featured_cat', 'Fill this field please');}

		if(isset($_REQUEST['mimic_menu_cat']))
			{update_option('mimic_menu_cat', $_REQUEST['mimic_menu_cat']);}
		else
			{update_option('mimic_menu_cat', 'Fill this field please');}
		header("Location: themes.php?page=functions.php&saved=true");die;
	}
// Addd the header (css + script) to the control panel
add_action('admin_head', 'mimic_theme_page_head');}
//add_menu_page(page_title, menu_title, access_level/capability,file,[function]);
add_theme_page('Mimbo-Custom Options', 'Mimbo Custom Options', 'edit_themes', basename(__FILE__), 'mimic_theme_page');
}

4° Creating the form and the header

Were we design the form …

Code for the Form

function mimic_theme_page()
{
	if ( $_REQUEST['saved'] ) echo ‘<div id=”message” class=”updated fade”><p><strong>Options Saved</strong></p></div>’;
?>
<div class=“wrap”>
	<div id=“mimic”>
	<h2>Options de Mimic</h2>
	<form name=“mimic” method=“post” action=“<?php $_SERVER['REQUEST_URI']; ?>”>
		<input type=“hidden” name=“action” value=“save” />
		<table class=“optiontable”>
		<tbody>
		<tr>
		<th>Category IDs of the <em> navigation menu</em>:</th>
		<td><input name=“mimic_menu_cat” id=“mimic_menu_cat” type=“text” class=“code” value=“<?php echo get_option(’mimic_menu_cat’); ?>” /><br/></td>
		</tr>
		<tr>
		<th>Featured category ID :</th>
		<td><input name=“mimic_featured_cat” id=“mimic_featured_cat” type=“text” class=“code” value=“<?php echo get_option(’mimic_featured_cat’); ?>” /><br/></td>
		</tr>
		</tbody>
		</table>
		<p class=“submit”><input type=“submit” name=“Save” value=“Apply »” /></p>
	</form>
	</div>
</div>
<?php }?

This function creates the form for entering the Options values

Code for the Header

function mimic_theme_page_head()
{	// header Css+Script ...?>
	<style type="text/css">
	p {margin-left:4px;}
	#mimic {margin:5px;padding:10px;}	
	</style>
<?php}

We have nearly finished, there is only one last thing to do, we have to get the Saved values to use it in our theme.

5° Editing your index.php file (or any other)

Where the magic happens

Just add this piece of code in index.php

<?php
	/* Getting options value*/
	/* Getting Featured Category ID */
	$fcat = get_option('mimic_featured_cat');
?>

The following code is specific to the mimbo theme but other themes use the same function to show posts so you can adapt it to fit your theme.

In mimbo you can find this piece of code to show the last post of the featured category.

query_posts('showposts=1&cat=1');

replace it by this code

query_posts('showposts=1&cat='.$fcat);

replace also this line

wp_list_categories('include=1&title_li=&style=none'); ?>

by

wp_list_categories('include='.$fcat.'&title_li=&style=none'); ?>

and that’s all, you can now administrate your theme in the admin zone.

Download the functions.php code here