Total Followers 132,503
WordPress is one of the most popular Content Management Systems. Also WordPress is a CMS of choice for many web developers It’s relatively easy to use, but can be made even simpler when you include an administration panel for users when making themes. Additionally, themes buyers find the options panel too easy to use rather than having to open up the PHP template files and fiddling with the code.
Today we will be incorporating an options panel for the WordPress Classic theme. The methods you will learn will allow you to very easily integrate it into an existing theme you’re working on.
The theme that we will be working on is the classic theme provided by wordpress. You can find it on wp-content/themes folder. You should see the following files:
Most of our work will be done within the functions.php file.
Now go to your wordpress admin panel then go to Appearance>Themes and activate the classic theme.
Begin by opening up functions.php in your code editor of the classic theme ( wp-content/themes/classic/functions.php ) then insert the following code :
<?php $themename = "Classic Theme"; $shortname = "ct";
I added two variables the first one reffers to the name of the theme and the second is the shortname : You can choose any name for these two variables but don’t forget to select significant names because you will be using them later.
Now let’s start adding some options for our theme :
$options = array (
array( "name" => $themename." Options",
"type" => "title"),
array( "type" => "open"),
array( "name" => "Color Scheme",
"desc" => "Select the color scheme for the theme",
"id" => $shortname."_color_scheme",
"type" => "select",
"options" => array("blue", "red", "green"),
"std" => "blue"),
array( "name" => "Logo URL",
"desc" => "Enter the link to your logo image",
"id" => $shortname."_logo",
"type" => "text",
"std" => ""),
array( "name" => "Homepage header image",
"desc" => "Enter the link to an image used for the homepage header.",
"id" => $shortname."_header_img",
"type" => "text",
"std" => ""),
array( "name" => "Footer copyright text",
"desc" => "Enter text used in the right side of the footer. It can be HTML",
"id" => $shortname."_footer_text",
"type" => "text",
"std" => ""),
array( "name" => "Google Analytics Code",
"desc" => "Paste your Google Analytics or other tracking code in this box.",
"id" => $shortname."_ga_code",
"type" => "textarea",
"std" => ""),
array( "name" => "Feedburner URL",
"desc" => "Paste your Feedburner URL here to let readers see it in your website",
"id" => $shortname."_feedburner",
"type" => "text",
"std" => get_bloginfo('rss2_url')),
array( "type" => "close"));
Here the variable “option” contains a big array which also contains other child arrays. Each child array holds an option.
The first array reffers to the title of the page ( In our case it’s ‘Classic Theme Options’ ). Every time when we want to add a new option we have to declare an array with a type and give it the name we want.
You can take a look at the options specified below :
Now we have our options ready but how can we view them ? Add the following pieces of code to the functions.php file:
function mytheme_add_admin() {
global $themename, $shortname, $options;
if ( $_GET['page'] == basename(__FILE__) ) {
if ( 'save' == $_REQUEST['action'] ) {
foreach ($options as $value) {
update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
foreach ($options as $value) {
if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } }
header("Location: themes.php?page=functions.php&saved=true");
die;
} else if( 'reset' == $_REQUEST['action'] ) {
foreach ($options as $value) {
delete_option( $value['id'] ); }
header("Location: themes.php?page=functions.php&reset=true");
die;
}
}
add_menu_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}
Here I declared a function with a name of “mytheme_add_admin”. This function is used for updating options : If the options are saved, then all the options are updated with their new values. If the options are being reset (indicated by another hidden variable with a value reset), then all of the options are deleted. The last line adds a theme page( add_theme_page ) in Appearance box and it calls mytheme_admin function. If you want you can replace add_theme_page with add_menu_page to create an external box :
At this step we still don’t have the theme options page, so we have to write mytheme_admin function which was called by add_theme_page, add this code to functions.php :
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>';
?>
Here we have some conditions : if the settings are saved WordPress will show ” Classic theme settings saved “. Likewise for reset.
Now paste the code above I will explain it after :
<div class="wrap">
<h2><?php echo $themename; ?> Settings</h2>
<form method="post">
<?php foreach ($options as $value) {
switch ( $value['type'] ) {
case "open":
?>
<table width="100%" border="0" style="background-color:#cdcdcd; padding:10px;">
<?php break;
case "close":
?>
</table><br />
<?php break;
case "title":
?>
<table width="100%" border="0" style="background-color:#868686; padding:5px 10px;"><tr>
<td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
</tr>
<?php break;
case 'text':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><input style="width:400px;" 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']; } ?>" /></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case 'textarea':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case 'select':
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><select style="width:240px;" 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></td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php
break;
case "checkbox":
?>
<tr>
<td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
<td width="80%"><?php if(get_option($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; ?> />
</td>
</tr>
<tr>
<td><small><?php echo $value['desc']; ?></small></td>
</tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr>
<?php break;
}
}
?>
<p class="submit">
<input name="save" type="submit" value="Save changes" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>
With this code we created our options page content : I used a php foreach loop, each option type is evaluated on a case-by-case basis. So if the type of the option is title do this, if it is a checkbox do that…
If there is an “open” type option we do nothing. If there is a “close” type options, we close our table. For each of the types “text” , “select” , “checkbox” and “textarea” , we display the corresponding input. At the end we added two buttons one to save the settings and the other to reset them.
Now our options page is ready, but we have to add this short code to make it work :
<?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>
This short code tells WordPress to add the admin menu.
After all this, here the result you should end up with :
In this example I used simple styles included in functions.php to make our options page looks better but I will show you how to add a stylesheet to functions.php so you can add your styles rapidly.
First, you have to create a new folder on your theme folder, name it functions then create a new css file with a name of functions.css. After flling your css file add this code to functions.php after mytheme_add_admin function :
function mytheme_add_style() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
}
That adds the functions.css file to the head. The location of the file is determined by the template directory.
Also, if you want you can use scripts to make your options page better by including a js file.To do this you have to change
wp_enqueue_style("functions", $file_dir."/functions/functions.css", false, "1.0", "all");
To :
wp_enqueue_script("script", $file_dir."/functions/script.js", false, "1.0");
After adding your stylesheet or your script, you have to add this code under add_action(‘admin_menu’, ‘mytheme_add_admin’); so they will be active :
add_action('admin_init', 'mytheme_add_init');
Now after creating our options, I will show you how to make use of them. First up, open up your header.php file, and add the following code:
<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>
You must put the code above at the start of all the files which you add options to. Once you’ve done that you can begin using your options. For example : If you want to display the footer text you have to echo $ct_footer_text ( ct reffers to the shortname of the theme ) :
<?php echo $ct_footer_text; ?>
For a checkbox you can check if the box is checked ( it will return true ) do this…
You can download the functions.php file here.
That’s it ! Thanks for reading this tutorial and I hope it was useful.
Get The Only Freelancer crash course you will ever need to read!
Saturday, March 24th, 2012 10:15
hi there, I’m trying to use Textarea for Google Analytics code option. But why the result changing the code?
From:
ar _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29509388-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
to
var _gaq = _gaq || [];
_gaq.push([\'_setAccount\', \'UA-29509388-1\']);
_gaq.push([\'_trackPageview\']);
(function() {
var ga = document.createElement(\’script\’); ga.type = \’text/javascript\’; ga.async = true;
ga.src = (\’https:\’ == document.location.protocol ? \’https://ssl\’ : \’http://www\’) + \’.google-analytics.com/ga.js\’;
var s = document.getElementsByTagName(\’script\’)[0]; s.parentNode.insertBefore(ga, s);
})();
Tuesday, May 1st, 2012 14:30
Hi.. I am having the same problem as G+ Info.. When I put Google Analytics script, it add some \ in many places. how to solve this please?
Thursday, March 8th, 2012 16:54
just stumbled upon this taking a stab at wp themes. this is a great point of reference for a wp theme/widget noob.
Thanks!!!!
Tuesday, January 31st, 2012 04:18
Before $options = array (
It’s just define $options like a global using this:
global $options;
Friday, January 6th, 2012 13:58
how to have the textarea boxes save the paragraphs and line breaks? right now I get one long line of text.
Thanks for any help
Friday, January 6th, 2012 00:05
Very simplified and easy to understand tutorial thank you very much.
On point, when saving the textarea doesn’t save the line breaks, how can I fix this.
Tuesday, January 3rd, 2012 16:08
Just like Chris said I would also like to know about how to do those color options. THX
Sunday, December 18th, 2011 04:18
You haven’t mentioned where to paste “options page content”.
“Now paste the code above I will explain it after :”
Thursday, December 15th, 2011 23:31
Really nice tutorial. It was easy to understand how to make options page in WP.
Thank you!
Friday, December 9th, 2011 17:41
I see a lot of premium themes now enable you to select from an array of background color AND texture options.
Does anyone know what php to use to create that set of options? I’ve looked at some of these themes’ css files and they list a whole bunch of different classes for the background textures, so I am assuming a custom options panel somehow creates an array and then takes the value the user selected and generates that class name in the markup, but I would sure like to get specific php code snippets to do that.
BTW: I am a designer who knows enough about php to be dangerous, so if you know how to do the above, please keep in mind to simplify your explanation for the non-programmer. TIA!
Tuesday, October 11th, 2011 05:11
sorry. I fixed the problem. for some reason i had php that was setting up custom sidebars and menu above your code. I switched it to be below and everything worked. I have much to learn about php. :)
Tuesday, October 11th, 2011 05:05
I have been receiving this error message when clicking the save button. any ideas Warning: Cannot modify header information – headers already sent by? thanks good tutorial.
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Naupad
Wednesday, July 6th, 2011 18:28
The tutorial is good but If I already have a theme options page in the parent theme and want my own customizations in the child theme, how can I create a theme options page for child theme as common functions like mytheme_add_admin would conflict with those in parent theme and raise error….
Help….
dev
Monday, November 29th, 2010 10:35
great tutorial thanks :)
Ravi
Monday, August 30th, 2010 07:39
Great tutorial.
Thank you for sharing :)
@Scott Corgan,
“header already sent” error is most probable because you have few empty lines in functions.php file
remove all empty lines from functions.php file and error should be gone.
Scott Corgan
Tuesday, July 6th, 2010 19:10
Having issues with “header already sent” any ideas?
Thanks.
Sean Thompson
Saturday, February 12th, 2011 01:50
Functions.php is very touchy. In PHP you cant have any blank lines. So take out any blank lines and you should be good.
Alexander Theis
Thursday, January 6th, 2011 09:57
Hi this is a really nice guide. But i have following problem.
If I click on Save or Reset i will get an error.
“Warning: Cannot modify header information – headers already sent by… ”
Does anybody know something about it? Error is in this line
“header(“Location: themes.php?page=functions.php&saved=true”);”
“header(“Location: themes.php?page=functions.php&reset=true”);
Matt @ Theme Thesis
Friday, May 21st, 2010 23:27
Sweeeet. It’s nice to see all these options page tutorials creeping up now. When I first learned how to do them the resources around were so scarce, it was brutal. This is very nicely written, good job!
Noor Mustafa
Monday, April 4th, 2011 10:30
Thanks! I’ve been getting those errors in a couple of little websites. Now I know what the heck is going on and have written on it also
riesurya
Thursday, June 3rd, 2010 17:31
clearly explained tutorial. I’ll try in my next WP theme.
Naeem
Tuesday, May 25th, 2010 15:33
Very nice article, a must bookmark!
Konstantin
Saturday, May 22nd, 2010 12:30
I’m sorry, but I don’t like it at all.
Have you ever heard of WordPress’ Settings API?
Maybe you want to get familiar with the WordPress Core before you write tutorials that … are no good.
Patrick Offczorz
Saturday, May 22nd, 2010 09:04
Great Tutorial. That’s exactly what I was looking for. Thanks m8
nay
Saturday, May 22nd, 2010 07:38
HI fri., thanks your training and tutorials. I really got experience for your tutorials. May be you too get a lot of knowledge and share to all other peoples.