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 …
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.

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.




58 Comments + Trackbacks
7.5.2008
Thanks for this tutorial, this is great! The snippets works perfectly.
Though, in my opinion there’s not enought explanations apart from the code.
7.5.2008
No problem,
thanks for you comment, for the next tutorial i will try to explain steps more in details
7.5.2008
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.
7.5.2008
Thanks Darren, i would be honored to be part of the mimbo 3.0 project.
I’ve just sent you an e-mail
7.7.2008
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.8.2008
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?
8.8.2008
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
8.8.2008
Sorry, I mean Michael
I sent you a contact on your site with more info, I think it will be better that way, thanks!
8.8.2008
Never mind, it worked fine. I made the mistake of having an extra line at the bottom of the functions file, once I removed them it worked!
8.11.2008
Thanks for taking the time to make this look easy
9.18.2008
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
10.10.2008
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.
10.26.2008
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 !!
10.27.2008
I also a wordpress theme designer and this is what I’m looking for. Definitely will bookmark it. Thanks for the great tutorial.
10.31.2008
Thanks for the great tutorial, just beginning to get my head round WordPress and this really helped
11.10.2008
These are very simple, easy to follow steps to make a control panel for a wordpress theme. Thanks for this post.
1.25.2009
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
1.27.2009
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.
1.27.2009
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.
1.28.2009
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
2.4.2009
I am still reading about the possibilities with functions.php, I remember when I had to edit it for the editing default post settings!
2.7.2009
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
2.9.2009
Thank you for this tutorial, is very useful article and exactly what I wanted.
Appreciate!
Kind Regards
Vasilis, UnitedWorx
2.14.2009
Great post. Very useful. I have a great theme and the problem was its control panel. I will try to make a control panel for that theme. Thanks for sharing the information with us.
3.3.2009
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
3.10.2009
Nice tutorial. thanks for well detailed information that is easy to understand and fallow.
4.11.2009
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.
4.16.2009
This would be great but…. how do we hide these custom control panels from people other than the administrator?
7.5.2009
Awesome tutorial. I was always wondering how to create admin panel for my themes.
7.26.2009
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?
11.18.2009
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
12.29.2009
Great article. But I just started working closely with WordPress and I have some problems. Igf you could explain better in the next tutorial it would be great. Thanks