The WordPress theme market has been growing rapidly, and theme developers are keen to develop the highest quality, premium WordPress themes. With growing demand from Bloggers on WordPress themes that are more-like CMS, magazine, or newspapers, It has been very important to learn the basics of creating a functional control panel for a WordPress theme.
Today, both bloggers and theme developers want to learn how to create a control panel for their themes. Basically, a control panel becomes mandatory If your wordpress theme uses magazine options, or you would like to allow the end-user a very easy customization of his theme via a user-friendly control panel interface.
We will get into this tutorial shortly, and this tutorial is suitable for any theme. We will discuss how to create a very basic control panel for WordPress theme.
The Basics
The control panel code goes in functions.php file. That makes sense, the functions file should contain all additional theme functions / options. So the first step is that you need to create a functions.php file if it does not exist in your theme folder.
I would prefer working with an empty functions file. Just to keep things arranged and clean!
Defining Goal from this Control Panel
You must have a set of goals before writing your control panel. Basically, which options you need to take care of in the control panel via Dashboard? To make this story short, our goal is:
Creating a control panel that displays a predefined sentence directly in the blog and controlled via the control panel.
The Code
The control panel code is pretty simple. I will explain it for you but first copy/paste it in your functions.php
<?php
/* New control panel class */
class ControlPanel {
/* Store DEFAULT SETTINGS in an array..and create a variable to store options. */
var $default_settings = Array(
‘quote’ => ‘Welcome to my blog!’
);
var $options;
/* Create new control panel function and defines administration menu, and head you do not need to modify anything in this part */
function ControlPanel() {
add_action(‘admin_menu’, array(&$this, ‘add_menu’));
add_action(‘admin_head’, array(&$this, ‘admin_head’));
/* The following code simply add options. and note the word ‘mytheme’ this can be changed to your theme name actually you just need to make all of them look same. */
if (!is_array(get_option(‘mytheme’)))
add_option(‘mytheme’, $this->default_settings);
$this->options = get_option(‘mytheme’);
}
/* This adds administration menu: Under Design, it adds a theme page called Simple Control Panel and also notice how I didn’t change mytheme name */
function add_menu() {
add_theme_page(‘Simple Control Panel’, ‘Simple Control Panel’, 8, “mytheme”, array(&$this, ‘optionsmenu’));
}
/* Here you put your form CSS. The control panel form has a class of themeform. so Just create your stylesheet here for themeform fields, inputs, etc…I will leave this part for you as its really easy */
function admin_head() {
print ‘<style type=”text/css”>’;
/* Obviously some css goes here.. for .themeform { */
print ‘</style>’;
}
function optionsmenu() {
if ($_POST[’ss_action’] == ’save’) {
$this->options[“quote”] = $_POST[‘cp_quote’]; /* This is just to update the quote every time we update the form */
update_option(‘mytheme’, $this->options); /* Tells wordpress to update your options.. */
echo ‘<div class=”updated fade” id=”message” style=”background-color: rgb(255, 251, 204); width: 400px; margin-left: 17px; margin-top: 17px;”><p>Your changes have been <strong>saved</strong>.</p></div>’; /* Displays successful message.. like changes have been saved! */
}
/* That is all.. lets print the form to browser */
echo ‘<form action=”" method=”post” class=”themeform”>’;
echo ‘<fieldset>’;
echo ‘<input type=”hidden” id=”ss_action” name=”ss_action” value=”save”>’;
/* Below is our nice field which will control the option: Quote */
echo ‘<label for=”cp_quote”>Which quote do you want to display to the blog?</label><input class=”widefat” style=”width:300px” name=”cp_quote” id=”cp_quote” value=”‘.$this->options[“quote”].‘”><div style=”clear:both”></div>’;
/* The default value is Welcome to my blog! but you can always change that..just as a very simple example */
echo ‘<p class=”submit”><input type=”submit” value=”Save Changes” name=”cp_save” /></p>’;
echo ‘</fieldset>’;
echo ‘</form>’;
}
} /* Quit Control Panel Class. Very important! */
?>
