How to : Make a control panel for your wordpress theme

by X-OR. 71 Comments -

Mimbo is one of the most used magazine theme for wordpress, it’s a great theme ! The only weakness is the way you change its options … Manually in the code …
It’s why i decided to create my own custom mimbo theme which includes a control panel. In this post I’m going to show you how you can create a control panel for your theme (in this example I will use mimbo).

What will the control panel look like.

Mimbo Custom Control Panel

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


Comments (71) - Leave yours

  1. Simon said:

    Thanks for this tutorial, this is great! The snippets works perfectly.
    Though, in my opinion there’s not enought explanations apart from the code.

  3. Darren Hoyt said:

    This is really great! It’s exactly what I wanted to work on this summer, but other projects have gotten in the way. I’d like to start designing Mimbo v3.0 in August – if you’re interested in collaborating on the control panel, drop me an email.

  4. Web 2.0 Announcer said:

    How to : Make a control panel for your wordpress theme…

    [...]Mimbo is one of the most used magazine theme for wordpress, it’s a great theme ! The only weakness is the way you change its options … Manually in the code …&#xD;
    It’s why i decided to create my own custom mimbo theme which includes a…

  6. Milan Petrovic said:

    Few weeks ago I have also created tutorial about creating control panel for a theme:

    http://blog.starscapetheme.com/2008/05/31/create-settings-page-for-theme/

    Based on my Starscape Theme with wide range of settings for controling theme:

    http://blog.starscapetheme.com/starscape/

    It’s good to see more themes that have control panels for easier customization.

  8. Bookmarks about Div said:

    [...] – bookmarked by 1 members originally found by mharbart on July 29, 2008 How to : Make a control panel for your wordpress theme http://www.catswhocode.com/blog/featured/how-to-make-a-control-panel-for-your-wordpress-theme-32 – [...]

  10. Tim Norton said:

    Jean, I want to put a control panel in my theme, I was going to start by just making this code work and then change it to suit my needs. But in part 4, there is a bit of code at the end to begin PHP – “<?php }?” that if I leave it I get an error and if I remove it I also get an error.

    Also do all those pieces of code go into the functions.php file except for the bit that goes into index.php?

  11. X-OR said:

    Hi Tim,

    (it’s not Jean but Michael ;-) )

    i upload the functions.php here so you can use it as you want :)

    all code go into functions.php (sorry but my first “how to” post was a little messy)

    Tell me if everything goes well

  15. MOin said:

    very nice and thorough article and i was planning to make control panel for my theme but thanks god its comes integrated with my upcoming theme which i am gona use and its openbook life saver :D

  16. Peter said:

    These are some good suggestions. In my case i use mostly blogger blogs. The one wordpress blog I have I havent touched for a long time. I am looking to get it up and running again.

  21. Mal said:

    Very impressive tutorial. If I get this to work it will be much easier to maintain my homepage. Really I am looking for a place that lists all possible options for wp_list_categories and showposts… I have found them piece by piece. Actually understanding the bigger concept finally will help. You can show a number of posts specifically by listing them by their ID # or you can list them in a group of X starting at post # Y in category Z… X-OR have you ever seen it all explained in one place at one time. Thanks – Cheers !!

  30. homepage optimieren said:

    Awesome tutorial. I always wanted to make my own control panel. I started making my own themes recently and once I make the control panel or them it will be really awesome. Thanks for the awesome post. Easy to learn and it was really clear. Thanks again

  31. Student Learning Disabilities said:

    Great article. I just came across a post on how to make WP themes using Photoshop. And this is just what I needed next. Looks like it’s my lucky day. I’ll be starting on my theme tonight. I will post a link to it here. Thanks for the simple but great tutorial. Appreciate it.

  32. Lawrence said:

    Thank you for this tutorial. Being a new blogger and somewhat a perfectionist, I want to know how to do as much as possible about the software I am using. I bookmarked this and will try to follow the directions.

  33. Cufflink Box said:

    Just exactly what I wanted. I was looking to make my own control panel for a theme i have and a friend recommended me your site. And its just simply awesome. Great tutorial. Thank a lot

  35. Diet Plans said:

    I guess it’s my lucky day. in the morning I came across an article on how to make your own WP theme. And now I can make a control panel for it. It just doesn’t get any better for me. Simply superb. Thanks a lot for the tutorial. Appreciate the work

  38. LGA Limo said:

    Nice, that’s a really good control panel. I wanted to make one for my new theme and I did across few panels. But this would be the best out of the lot. I’ll be using this. Thanks again. Appreciate it. Cheers

  40. nexus said:

    Is this tip suitable to work with mimbo 3.0? Exactly?
    Do you finally collaborated with Darren on this version? I’ve not seen that expanded control panel in Mimbo.
    Thanks from Spain.

  41. the gooser said:

    This would be great but…. how do we hide these custom control panels from people other than the administrator?

  44. Andy R said:

    Hi,

    Great Tutorial!

    I’d be interested in being able to add a Control Panel to a theme that would allow for…

    1.0 changing the default background or color values
    2.0 allowing an admin to upload header pic (and other relevant pics such as navbar backgrounds)

    I’ve tried to look at Kubrick on the default theme to now avail… :(

    Anyone have a pointer I can review? :)

  53. Shreedhar Iyer said:

    hi gr8 tutorial,

    would like to know i wanted the editor of my site to access the custom theme control panel , for which i added
    add_menu_page($themename.” Options”, “”.$themename.” Options”, 7 ,’edit_themes’, basename(__FILE__), ‘mytheme_admin’);

    but i am getting error this
    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘functions.php’ was given in /home/invinci/public_html/magnoliabarbegue/wp-includes/plugin.php on line 339

    can you guide me more on this

  69. Victor said:

    I use wordpress a lot and have been using the Socrates Theme.
    I have a question.
    Would these codes work on my theme?
    It would be practical to have a cPanel on my blogs.

    Thanks

Leave a Reply

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

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!