The marketplace for Premium Themes — & — Templates

146,360 People using Mojo
353,262 Downloaded items
2157 Marketplace items
2 Green Monsters

The Mojo Blog

Blog | Create a WordPress Theme Options Panel

Create a WordPress Theme Options Panel

Posted By mrmema

15 Comments

WordPress is getting more and more popular these days, becoming the first choice for many web developers. Normal users find in WordPress a perfect CMS system where they can add new content, make changes and modify the style without touching any code. So, as a web developer, it is a MUST to include an administration panel for the users.

In this tutorial we are going to learn how to implement a custom theme admin. First, take a look at the final product we are going to make:

STEP 1:

Open up the function.php in your favorite code editor. As you can see from the image below I like to keep the function.php file really clean.  I like to add all the external files using the PHP function require_once.

This should be a good practice; function.php could grow like crazy in any advance theme, reaching thousands lines of code. Can you imagine go back to those files a few weeks later when the client asks you to make a few changes? … Lost right?  With includes files you can easily address the element that needs to be updated.

In your function.php add these lines of code (I have used the standard TenTwenty theme, so add those lines at the very end).

[html]<?php
//set the admin path
$admin_path = TEMPLATEPATH . ‘/includes/admin/’;
require_once ($admin_path . ‘admin_panel.php’);
?>[/html]

STEP 2:

Create a new file called ‘admin_panel.php’ under your-theme-folder/includes/admin.

Open ‘admin_panel.php‘. First we need to declare the themename and a shortname variable.

The ‘themename’ should be your theme’s name and the  ‘shortname’ a shortened version of it.  In my case, Mojo-Tutorial is shortened to ‘mt’.

[html]<?php
// Declare the them’ename and shortname
$themename = "Mojo-Tutorial";
$shortname = "mt";
[/html]

STEP 3:

We need now to add in our admin_panel.php’ file for all the options available for our theme. This will be done using a PHP array function where we can define all the options. These are the options we are going to create:

  • Logo URL
  • Custom Favicon
  • Remove sidebar tabs option
  • Footer Copyright Text
  • Google Analytic Code
  • Email address for contact us form

Paste the code in your ‘admin_panel’ file:

[html]$options = array (
// Set the array with all the theme options
array(
"desc" => "<h3>General Settings</h3>",
"type" => "title"),

array( "name" => "Logo URL:",
"desc" => "Enter the URL of your logo image",
"id" => $shortname."_logo_url",
"type" => "text",
"std" => ""),

array( "name" => "Custom Favicon",
"desc" => "Paste the full URL of Png/Gif image that will represent your website’s favicon (16px x 16px) ",
"id" => $shortname."_custom_favicon",
"type" => "text",
"std" => get_bloginfo(‘url’) ."/favicon.ico"),

array( "name" => "Remove Sidebar Tabs",
"desc" => "Check this box if you wish to remove the sidebar tabs.",
"id" => $shortname."_not_tabs",
"std" => "false",
"type" => "checkbox"),

array( "name" => "Footer copyright text",
"desc" => "Enter the text for the footer",
"id" => $shortname."_footer_text",
"type" => "text",
"std" => ""),

array( "name" => "Google Analytics Code",
"desc" => "You can paste your Google Analytics or other tracking code in this box. This will be automatically added to the footer.",
"id" => $shortname."_tracking_code",
"std" => "",
"type" => "textarea"),

array( "name" => "Email Address for Contact Us Form",
"desc" => "Enter email address you want to use for the Contact Us Form",
"id" => $shortname."_contact_email",
"std" => "test@test.com",
"type" => "text"),
);[/html]

Here are some explanations for the previous code:

We have declared in the beginning a variable called $options, this will store all our values.

After that, we have set the title of the options page: “desc” => “<h3>GENERAL SETTINGS</h3>”,

Option Values:

I can hear you saying right now:  what if I need to declare an array of options for a select input type?
You can use the ‘options’ value. Here is an example of options with a list of effects to select for the Nivo slider:

[html]array(    "name" => "Slide effect",
"desc" => "Select the effect you wish to apply to the Featured Article slide.",
"id" => $shortname."_feat_effect",
"std" => " ",
"type" => "select",
"options" => array("fold","fade","random","sliceDown","sliceDownLeft","sliceUp","sliceUpLeft",
"sliceUpDown","sliceUpDownLeft"),
[/html]

Ok, now let’s try to be more intuitive. First we need to set the array with all the nivo-slider options:

[html]$nivo_slider_options = array("Select Effect:","sliceDown","sliceDownLeft","sliceUp",
"sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade","random");[/html]

And after that, we use the variable as value for our “options” => value.

[html]array(    "name" => "Slide effect",
"desc" => "Select the effect you wish to apply to the Featured Article slide.",
"id" => $shortname."_feat_effect",
"std" => "",
"type" => "select",
"options" => $nivo_slider_options),
[/html]

STEP 4:

Ok, let’s get back to the code, copy and paste the below code in your ‘admin_panel.php’ file.

[html]
function mojotutorial_add_admin() {

global $themename, $options, $es_pagename;

if ( $_GET['page'] == $es_pagename ) {
if ( ‘save’ == $_REQUEST['action'] ) {

foreach ($options as $value) {
if($value['type'] != ‘multicheck’){
update_option( $value['id'], $_REQUEST[ $value['id'] ] );
}else{
foreach($value['options'] as $mc_key => $mc_value){
$up_opt = $value['id'].’_’.$mc_key;
update_option($up_opt, $_REQUEST[$up_opt] );
} }
}

foreach ($options as $value) {
if($value['type'] != ‘multicheck’){
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); }
}else{
foreach($value['options'] as $mc_key => $mc_value){
$up_opt = $value['id'].’_’.$mc_key;
if( isset( $_REQUEST[ $up_opt ] ) ) { update_option( $up_opt, $_REQUEST[ $up_opt ]  ); } else { delete_option( $up_opt ); }
} }
}

header("Location: admin.php?page=".$es_pagename."&saved=true");
die;
}
}

add_object_page("Theme", ‘Mojo Tutorial’, 10, $es_pagename , "mojotutorial_page", "http://www.emanuelesala.com/favicon.ico");
}

[/html]

The above function is adding the admin page on the menu section and updates all the options.

Take a look in more detail of the last function: add_object_page:

STEP 5:

Now, we need to add our ‘mojotutorial_page’ function to be able to display and save all our options, so add the code to your admin_panel file.

[html]
function mojotutorial_page (){

global $options, $themename, $shortname;

?>
<div>
<form action="<?php echo $_SERVER['REQUEST_URI']; ?>" method="post">
<h2 id="backtotop"><?php echo $themename; ?> Options</h2>
<?php if ( $_REQUEST['saved'] ) { ?> <div style="clear:both;height:10px;"></div> <div>All good!!! Options has been updated!</div><?php } ?>

<div style="clear:both;height:10px;"></div>

<table>
<?php foreach ($options as $value) { ?>
<?php if ( $value['type'] <> "heading" ) { ?>
<tr>
<td><?php echo $value['name']; ?></td>
<td>
<?php } ?>
<?php

switch ( $value['type'] ) {
case ‘text’:

?>
<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" />
<?php

break;
case ‘select’:

?>
<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
<option<?php if ( get_settings( $value['id'] ) == $option) { echo ‘ selected="selected"’; } elseif ($option == $value['std']) { echo ‘ selected="selected"’; } ?>><?php echo $option; ?></option>
<?php } ?>
</select>
<?php

break;
case ‘textarea’:
$ta_options = $value['options'];

?>
<textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="8"><?php  if( get_settings($value['id']) != "") { echo stripslashes(get_settings($value['id'])); } else { echo $value['std']; } ?></textarea>
<?php

break;
case "radio":

foreach ($value['options'] as $key=>$option) {

$radio_setting = get_settings($value['id']);

if($radio_setting != ”) {

if ($key == get_settings($value['id']) ) { $checked = "checked="checked""; } else { $checked = ""; }

} else {

if($key == $value['std']) { $checked = "checked="checked""; } else { $checked = ""; }
} ?>
<input type="radio" name="<?php echo $value['id']; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><?php echo $option; ?><br />
<?php }

break;
case "checkbox":

if(get_settings($value['id'])) { $checked = "checked="checked""; } else { $checked = ""; }

?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<?php

break;
case "multicheck":

foreach ($value['options'] as $key=>$option) {

$pn_key = $value['id'] . ‘_’ . $key;
$checkbox_setting = get_settings($pn_key);

if($checkbox_setting != ”) {

if (get_settings($pn_key) ) { $checked = "checked="checked""; } else { $checked = ""; }

} else { if($key == $value['std']) { $checked = "checked="checked""; } else { $checked = ""; }

} ?>
<input type="checkbox" name="<?php echo $pn_key; ?>" id="<?php echo $pn_key; ?>" value="true" <?php echo $checked; ?> /><label for="<?php echo $pn_key; ?>"><?php echo $option; ?></label><br />
<?php }

break;
case "heading":

?>
</table>      <p>
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />       <a href="#backtotop"><?php _e("Go to Top"); ?></a>
</p>
<h3 id="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></h3>
<table>
<?php

break;
default:
break;

} ?>

<?php if ( $value['type'] <> "heading" ) { ?>
<?php if ( $value['type'] <> "checkbox" ) { ?><br/><?php } ?><span><?php echo $value['desc']; ?></span>
</td></tr>
<?php } ?>

<?php } ?>
</table>
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />       <a href="#backtotop"><?php _e("Go to Top"); ?></a>
<div style="clear:both;"></div>
</form>
</div><!– end wrap–>
<div style="clear:both;height:20px;"></div>
[/html]

This function is creating all the options in the admin page.  This is done by running a ‘for-each loop’ and ‘switch case statement’ through all the options we have previously set.
So for example, if we set the value as ‘ text’ the function will output an <input> text field or if the value was ‘select’ it will echo out the <select> form field and so on.
The function already has a few extra options that we are not going to use in this tutorial like ‘radio option’, ‘multi check option’… but I left it in there if you decided to improve your admin panel by adding these extra options.

STEP 6:

Now we need to make the admin panel look good, so let’s create a file style.css under this folder: your-theme-folder/includes/admin and add the code below:

[html]/* CSS Document */
.wrap-es{ background: #fff; padding: 10px; }
.title-es { margin: 0px ; background: #DCDCDC; padding: 10px; font-family:Verdana, Geneva, sans-serif; font-weight: normal; letter-spacing: 1px; font-size: 18px; }
.table-options { background: #F1F1F1; margin-bottom: 20px; padding: 10px 0px; }
.title-row { padding-bottom: 10px ; border-bottom: 1px solid #ccc ; float: left; margin: 0px 10px 10px 10px ; }
.title-desc { font-size: 12px; font-weight:bold; width: 220px ; margin-right: 20px ; }
.options-input { width: 700px ; valign: middle ; }
h2 { margin-bottom: 20px; }
.options-input input, .options-input select, .options-input textarea { margin-bottom: 9px ; background: #fff; border: 1px solid #D4E9FA; width: 400px; padding: 4px; font-size: 12px; }
.options-input span { font-size: 10px ; font-weight: normal ; ine-height: 14px ; }
.info { background: #FFFFCC; border: 1px dotted #D8D2A9; padding: 10px; color: #333; }
.options-input .checkbox { width:20px }
.info a { color: #333; text-decoration: none; border-bottom: 1px dotted #333 }
.info a:hover { color: #666; border-bottom: 1px dotted #666; }
.message-ok { background: #D1FF9F; border: 1px solid #557F27; padding: 10px; color: #333; font-weight: bold; }
[/html]

STEP 7:

Next step we need to add to the css to the admin header page, this is done calling the wp_enqueue_style function. Paste the code in your file:

[html]<?php
}
function mojotutorial_add_init() {
$directory_file=get_bloginfo(‘template_directory’);
wp_enqueue_style("admin_style", $directory_file."/includes/admin/style.css", false, "1.0", "all");
}

[/html]

STEP 8:

Finally, we need to call the add_action function to populate our admin page:

[html]add_action(‘admin_init’, ‘mojotutorial_add_init’);
add_action(‘admin_menu’, ‘mojotutorial_add_admin’);
?>
[/html]

All done now! Our admin theme options panel has now been created.

STEP 9:

Now we can see the results in the admin section, but what about the front end? Where are all my settings are going to appear?

Let’s add the custom copyright text in the footer. Open your footer.php file and add this code. (I have used as an example the default WordPress theme ‘TenTwenty’, so on the footer I removed the Site Info information (from line 26 to 28) and added the code below.

[html]
<?php if (get_option(‘mt_footer_text’)) {
echo get_option(‘mt_footer_text’);
}else {
echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) );
} ?>

[/html]

With ‘get_option($name_of_the_option_to_retrieve)’ function we are able to retrieve all the options we have saved in the admin panel.

Remember! All id options start with the $shortname variable we have declared in our admin_panel.php file.

ADDITIONAL STUFF

It would be nice to customize a little more of our Template by adding our own logo to the admin panel and to the login page.

In order to do this, first you need to create two images one for the admin panel logo (32 X32 px) and the other one for the login page (326 X 67 px).

Add the following lines of code at the end of your functions.php, do not forget to replace the image name with yours!

[html]
function my_admin_logo() {
echo ‘<style type="text/css">
#header-logo { background-image: url(‘.get_bloginfo(‘template_directory’).’/images/adminLogo.png) !important; }
</style>’;
}

add_action(‘admin_head’, ‘my_admin_logo’);

function my_login_logo() {
echo ‘<style type="text/css">
h1 a { background-image:url(‘.get_bloginfo(‘template_directory’).’/images/loginLogo.png) !important; }
</style>’;
}

add_action(‘login_head’, ‘my_login_logo’);

[/html]

And here is an example of the final look:

CONCLUSION

Hope you enjoyed this tutorial. The Sky is the limit right? So this is just the surface, you can customize your admin panel with many extra options.  It may be is good idea to improve the options panel by adding tabs to define different sections, using <div> instead of table… I will leave that with you or maybe I’ll cover it in the next tutorial.

Here you can download the zip file with the source code we have used in this tutorial.

Comments and advice are always welcome :-) !!!

About the Author:

Featured Seller: MRMEMA

My name is Emanuele Sala, freelance Web/UI designer from a small city in the north part of Italy. For the last 6 years I’m based in Phuket, Thailand (such a great place to live). While currently working for a UK based Website Company, I continue to dedicate my time in producing professional, innovative and creative solutions.

Ciao Em

15 Responses

You must be logged in to post a comment.