Create Improved WordPress Theme Options Page

A tutorial on creating WordPress theme options page is one of the most popular articles on this blog. As WordPress keeps evolving and the guidelines for creating WordPress themes change with time, the method mentioned in the tutorial is not the best option for adding a theme options page to your WordPress theme.

I have created a better method of adding theme options page to WordPress themes using Settings API. You can see the new theme options page in action in Shaan WordPress theme. This theme options page saves all data in a single database entry and can also be deleted when removing the theme completely.

I had been planning to share the new method for adding theme options page to your wordPress theme for quite some time. However, I had been procrastinating as the thought of having to write a huge article explaining a pretty complicated set of code always scared me. With repeated requests for the improved code, I am accepting the challenge.

You should read my previous tutorial on creating WordPress theme options page as I might not explain several concepts/methods which I have done in the earlier article. You should also read the WordPress Codex tutorial on creating a theme options page. My theme options page, as you will realise, makes use of the concepts explained in the two tutorials.

The entire theme options package consists of a set of PHP codes, a set of Javascript rules and CSS styles. The theme options has three files: theme-options.php, theme-options.js and theme-options.css. For ease of use the three files are placed in a folder called functions.

Important: There is some problem with the way WordPress/plugin shows code. All backslashes in the code are not shown. Please make sure that the quote within quotes have a backslash just before them.

$checked = "checked=\"checked\"";

Please download any of my free WordPress themes and look at the theme options file to ensure that any errors in prasing the code on this website does not create unnecessary hurdles for you.

The following is the content of theme-options.php file.

<?php
$themename = "Shaan";

$shortname = "p2h";

$version = "1.1";

$option_group = $shortname.'_theme_option_group';
$option_name = $shortname.'_theme_options';

// Load stylesheet and jscript
add_action('admin_init', 'p2h_add_init');

function p2h_add_init() {
	$file_dir = get_template_directory_uri();

	wp_enqueue_style("p2hCss", $file_dir."/functions/theme-options.css", false, "1.0", "all");

	wp_enqueue_script("p2hScript", $file_dir."/functions/theme-options.js", false, "1.0");

}

// Create custom settings menu
add_action('admin_menu', 'p2h_create_menu');

function p2h_create_menu() {
	global $themename;
	//create new top-level menu
	add_theme_page( __( $themename.' Theme Options' ), __( 'Theme Options' ), 'edit_theme_options', basename(__FILE__), 'p2h_settings_page' );
}

// Register settings
add_action( 'admin_init', 'register_settings' );

function register_settings() {
   global $themename, $shortname, $version, $p2h_options, $option_group, $option_name;
  	//register our settings
	register_setting( $option_group, $option_name);
}

// Create theme options

global $p2h_options;

$p2h_options = array (

array("name" => __('RSS Feeds/Facebook/Twitter','shaan'),

		"type" => "section"),

array("name" => __('Set up social links.','shaan'),

		"type" => "section-desc"),

array("type" => "open"),

array("name" => __('Custom Feed URL','shaan'),

		"desc" => __('You can use your own feed URL (<strong>with http://</strong>). Paste your Feedburner URL here to let readers see it in your website.','shaan'),

		"id" => "feedurl",

		"type" => "text",

		"std" => get_bloginfo('rss2_url')),

array("name" => __('Delete Extra Feeds','shaan'),

		"desc" => __('WordPress adds feeds for categories, tags, etc., by default. Check this box to remove them and reduce the clutter.','shaan'),

		"id" => "cleanfeedurls",

		"type" => "checkbox",

		"std" => ""),

array("name" => __('Twitter ID','shaan'),

		"desc" => __('Your Twitter user name, please. It will be shown in the navigation bar. Leaving it blank will keep the Twitter icon supressed.','shaan'),

		"id" => "twitterid",

		"type" => "text",

		"std" => ""),

array("name" => __('Facebook Page','shaan'),

		"desc" => __('Link to your Facebook page, <strong>with http://</strong>. It will be shown in the navigation bar. Leaving it blank will keep the Facebook icon supressed.','shaan'),

		"id" => "facebookid",

		"type" => "text",

		"std" => ""),

array("type" => "close"),

//FOOTER

array("name" => __('Footer','shaan'),

		"type" => "section"),

array("name" => __('Customize footer of your website.','shaan'),

		"type" => "section-desc"),

array("type" =>"open"),

array("name" => __('Footer Text','shaan'),

		"desc" => __('Enter your footer text or HTML here.','shaan'),

		"id" => "footer_text",

		"std" => "",

		"type" => "textarea"),

array("name" => __('Hide Footer Navigation Links','shaan'),

		"desc" => __('Select to hide the navigation bar in the footer. If you want to customize the footer navigation, go to Menus under the Appearance tab in the dashboard.','shaan'),

		"id" => "hide_footer_nav",

		"std" => "",

		"type" => "checkbox"),

array("name" => __('Hide Footer Credits','shaan'),

		"desc" => __('Select to hide the credit line in the footer. Thanks for sending us a <strong>generous contribution</strong>.','shaan'),

		"id" => "hide_footer_credit",

array("name" => __('Theme Styles','shaan'),

		"type" => "section"),

array("name" => __('Choose a color scheme and add custom CSS styles.','shaan'),

		"type" => "section-desc"),

array("type" => "open"),

array("name" => __('Colour Scheme','shaan'),

		"desc" => __('Select a colour scheme for the theme. Future versions will have multiple styles.','shaan'),

		"id" => "alt_stylesheet",

		"type" => "select",

		"options" => $alt_stylesheets,

		"std" => "default.css"),

array( "name" => __('Custom Styles','shaan'),

	"desc" => __('Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}','shaan'),

	"id" => "custom_css",

	"type" => "textarea",

	"std" => ""),

array("type" => "close"),

		"std" => "",

		"type" => "checkbox"),

array( "type" => "close"),

//ADVERTISEMENTS --- POST ADS

array("name" => __('Advertisements','shaan'),

	"type" => "section"),

array("name" => __('Show ads on your blog.','shaan'),

		"type" => "section-desc"),

array("type" => "open"),

array("name" => __('Header Display Ad','shaan'),

		"desc" => __('You can show a display ad in header. Paste the code here for 600px by 60px ad.','shaan'),

		"id" => "topbanner",

		"std" => "",

		"type" => "textarea"),

array("name" => __('Ad Above Posts','shaan'),

		"desc" => __('Enter your Adsense code or other ad network code here. This ad will be displayed at the beginning of posts, below title on Post Pages and Pages with ad-supporting template. It is very basic and effective option for putting ads on your blog. If you want more functionality, get a specialized Ad plugin.','shaan'),

		"id" => "posttop_adcode",

		"std" => "",

		"type" => "textarea"),

array("name" => __('Ad Below Posts','shaan'),

		"desc" => __('Enter your Adsense code (or other ad network code) here. This ad will be displayed at the end of post content on Post Pages and Pages with ad-supporting template. Please make sure that you do not activate more ads than what is allowed by your ad network. Adsense allows up to 3 on one page.','shaan'),

		"id" => "postend_adcode",

		"std" => "",

		"type" => "textarea"),

array("type" => "close"),

//Analytics Code

array("name" => __('Tracking & Other Codes','shaan'),

array("name" => __('Theme Styles','shaan'),

		"type" => "section"),

array("name" => __('Choose a color scheme and add custom CSS styles.','shaan'),

		"type" => "section-desc"),

array("type" => "open"),

array("name" => __('Colour Scheme','shaan'),

		"desc" => __('Select a colour scheme for the theme. Future versions will have multiple styles.','shaan'),

		"id" => "alt_stylesheet",

		"type" => "select",

		"options" => $alt_stylesheets,

		"std" => "default.css"),

array( "name" => __('Custom Styles','shaan'),

	"desc" => __('Want to add any custom CSS code? Put in here, and the rest is taken care of. This overrides any other stylesheets. eg: a.button{color:green}','shaan'),

	"id" => "custom_css",

	"type" => "textarea",

	"std" => ""),

array("type" => "close"),
an'),

		"type" => "section"),

array("name" => __('Insert Web tracking & analytics and other codes here.','shaan'),

		"type" => "section-desc"),

array("type" => "open"),

array("name" => __('Analytics & Tracking Code','shaan'),

		"desc" => __('You can paste your Google Analytics or other codes in this box. The codes will be automatically added to the footer.','shaan'),

		"id" => "analytics_code",

		"type" => "textarea",

		"std" => ""),

array("type" => "close")

);

function p2h_settings_page() {
   global $themename, $shortname, $version, $p2h_options, $option_group, $option_name;
?>

<div class="wrap">
<div class="options_wrap">
<?php screen_icon(); ?><h2><?php echo $themename; ?> <?php _e('Theme Options','shaan'); ?></h2>
<p class="top-notice"><?php _e('Customize your WordPress blog with these settings. ','shaan'); ?></p>
<?php if ( isset ( $_POST['reset'] ) ): ?>
<?php // Delete Settings
global $wpdb, $themename, $shortname, $version, $p2h_options, $option_group, $option_name;
delete_option('p2h_theme_options');
wp_cache_flush(); ?>
<div class="updated fade"><p><strong><?php _e( $themename. ' options reset.' ); ?></strong></p></div>

<?php elseif ( isset ( $_REQUEST['updated'] ) ): ?>
<div class="updated fade"><p><strong><?php _e( $themename. ' options saved.' ); ?></strong></p></div>
<?php endif; ?>

<form method="post" action="options.php">

<?php settings_fields( $option_group ); ?>

<?php $options = get_option( $option_name ); ?>

<?php foreach ($p2h_options as $value) {
if ( isset($value['id']) ) { $valueid = $value['id'];}

switch ( $value['type'] ) {

case "section":

?>

	<div class="section_wrap">

	<h3 class="section_title"><?php echo $value['name']; ?>

<?php break;

case "section-desc":

?>

	<span><?php echo $value['name']; ?></span></h3>

	<div class="section_body">

<?php

break;

case 'text':

?>

	<div class="options_input options_text">

		<div class="options_desc"><?php echo $value['desc']; ?></div>

		<span class="labels"><label for="<?php echo $option_name.'['.$valueid.']'; ?>"><?php echo $value['name']; ?></label></span>

		<input name="<?php echo $option_name.'['.$valueid.']'; ?>" id="<?php echo $option_name.'['.$valueid.']'; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( isset( $options[$valueid]) ){ esc_attr_e($options[$valueid]); } else { esc_attr_e($value['std']); } ?>" />

	</div>

<?php

break;

case 'textarea':

?>

	<div class="options_input options_textarea">

		<div class="options_desc"><?php echo $value['desc']; ?></div>

		<span class="labels"><label for="<?php echo $option_name.'['.$valueid.']'; ?>"><?php echo $value['name']; ?></label></span>

		<textarea name="<?php echo $option_name.'['.$valueid.']'; ?>" type="<?php echo $option_name.'['.$valueid.']'; ?>" cols="" rows=""><?php if ( isset( $options[$valueid]) ){ esc_attr_e($options[$valueid]); } else { esc_attr_e($value['std']); } ?></textarea>

	</div>

<?php

break;

case 'select':

?>

	<div class="options_input options_select">

		<div class="options_desc"><?php echo $value['desc']; ?></div>

		<span class="labels"><label for="<?php echo $option_name.'['.$valueid.']'; ?>"><?php echo $value['name']; ?></label></span>

		<select name="<?php echo $option_name.'['.$valueid.']'; ?>" id="<?php echo $option_name.'['.$valueid.']'; ?>">

		<?php foreach ($value['options'] as $option) { ?>

				<option <?php if ($options[$valueid] == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?>

		</select>

	</div>

<?php

break;

case "radio":

?>

	<div class="options_input options_select">

		<div class="options_desc"><?php echo $value['desc']; ?></div>

		<span class="labels"><label for="<?php echo $option_name.'['.$valueid.']'; ?>"><?php echo $value['name']; ?></label></span>

		  <?php foreach ($value['options'] as $key=>$option) {
			if ( isset ( $options[$valueid] ) ) {
				if ($key == $options[$valueid] ) {
					$checked = "checked="checked"";
					} else {
						$checked = "";
					}
			}else{
				if($key == $value['std']){
					$checked = "checked="checked"";
				}else{
					$checked = "";
				}
			}?>

			<input type="radio" id="<?php echo $option_name.'['.$valueid.']'; ?>" name="<?php echo $option_name.'['.$valueid.']'; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><?php echo $option; ?><br />

			<?php } ?>

	</div>

<?php

break;

case "checkbox":

?>

	<div class="options_input options_checkbox">

		<div class="options_desc"><?php echo $value['desc']; ?></div>

		<?php if( isset( $options[$valueid] ) ){ $checked = "checked="checked""; }else{ $checked = "";} ?>

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

		<label for="<?php echo $option_name.'['.$valueid.']'; ?>"><?php echo $value['name']; ?></label>

	 </div>

<?php

break;

case "close":

?>

</div><!--#section_body-->

</div><!--#section_wrap-->

<?php
break;

}

}

?>

<span class="submit">
<input class="button button-primary" type="submit" name="save" value="<?php _e('Save All Changes', 'shaan') ?>" />
</span>
</form>

<form method="post" action="">

<span class="button-right" class="submit">

<input class="button button-secondary" type="submit" name="reset" value="<?php _e('Reset/Delete Settings', 'shaan') ?>" />
<input type="hidden" name="action" value="reset" />
<span><?php _e('Caution: All entries will be deleted from database. Press when starting afresh or completely removing the theme.','shaan') ?></span>

</span>

</form>
</div><!--#options-wrap-->
</div>

<?php } ?>

The following is the content of theme-options.js file.

jQuery(document).ready(function($) {

	// hides as soon as the DOM is ready

	$( 'div.section_body' ).hide();

	// shows on clicking the noted link

	$( 'h3' ).click(function() {

		$(this).toggleClass("open");

		$(this).next("div").slideToggle( '1000' );

		return false;

	});

});

The following is the content of theme-options.css. It contains a few unused styles as well.

.wrap{
width:98%;
}

.options_wrap{
	width:750px;
	float:left;
	line-height:1.5em;
	height:auto;
}

.options_wrap h2{
font-style:normal;
font-size:28px;
margin-bottom:20px;
font-style:italic;

}

.top-notice{
margin-bottom:25px;
}
.section_wrap{
	margin-bottom:25px;
	float:left;
	width:750px;
}

.section_body{
border:1px solid #DFDFDF;
	border-top:0;
	background:#f9f9f9;
	width:748px;
	float:left;
-moz-border-radius:0 0 6px 6px;

}

h3.section_title{
-moz-border-radius:6px 6px 6px 6px;
background:url('images/toggle.png') no-repeat scroll 10px 15px #F0F0F0;
border:1px solid #E1E1E1;
color:#4E4C41;
cursor:pointer;
font-size:1.1em;
margin:0;
padding:15px 15px 15px 40px;
clear:both;
}

h3.section_title:hover{
background-color:#EFEFEF;
border:1px solid #CFCFCF;
}

h3.open {
-moz-border-radius:6px 6px 0 0;
background-position:10px -25px;
}

h3.section_title span{
color:#666;
float:right;
font-size:0.9em;
font-weight:normal;
}

.options_input {
	margin:35px 20px;
	padding:10px;
	clear:both;
	overflow:hidden;
}

.options_desc{
-moz-border-radius:8px 8px 8px 8px;
background:none repeat scroll 0 0 #F1F1F1;
color:#777777;
float:right;
padding:15px;
width:350px;
}

.labels{
	font-size:12px;
	display:block;
	margin-bottom:5px;
	font-weight:bold;
	color:#555;
}

label{
	font-size:12px;
	margin-bottom:5px;
	font-weight:bold;
	color:#555;
}

.options_input input[type="text"], .options_input select{
	width:275px;
	height:auto;
	font-size:12px;
	padding:5px;
	color:#666;
	background:#FFF;
	border-color:#DFDFDF;
}
#multicheck select{
height:auto;
}
.options_input input:focus, .options_input textarea:focus{
		background:#fff;
}
.options_input textarea{
	width:275px;
	height:135px;
	padding:5px;
	color:#666;
	background:#FFF;
	border-color:#DFDFDF;
}

 span.submit{
	float:left;
	margin:0 30px 30px 0;
	padding:0;
	width:15%;
}

 .section_wrap span.submit{
	float:left;
	margin:0 20px 30px 30px;
	padding:0;
	width:15%;
}

.sidebox {
	font-size:11px;
	-moz-border-radius:6px 6px 6px 6px;
border:1px solid #ddd;
	margin-top:55px;
	padding:20px;
	background:#F2F2F2;
	color:#4D5253;
	width:200px;
	float:right;
	}
.sidebox h2{
	font-size:22px;
	color:#000;
	margin:0 0 10px 0;
	padding:0;
	line-height:1;
	}
.sidebox p{
	font-size:11px;
}
.sidebox hr{
	border:0;
	border-top:1px solid #DDD;
	margin:15px 0;
}
.sidebox ol li, .sidebox ul li{
	font-size:11px;
}
.notice{
color:#888;
font-size:10px;}

.button-right{
float:right;
text-align:right;
width:250px;
}
.button-right span{
font-size:0.9em;
color:#999;
text-align:justified;
display:block;
}

If you see, the theme options page makes use of some images. Where are they? These are saved in a folder called “images”, which is present in the “functions” folder. Images? Why don’t you download Shaan WordPress theme and make use of the “functions” folder for adding theme options page to your WordPress theme?

Once you have all the files in the “functions” folder, it’s time to add these to the theme’s functions.php file.

//Retrieve Theme Options Data
global $options;
$options = get_option('p2h_theme_options');

//Add Theme Options File
$functions_path = TEMPLATEPATH . '/functions/';
require_once ($functions_path . 'theme-options.php');

//Redirect to Theme Options Page on Activation
if ( is_admin() && isset($_GET['activated'] ) && $pagenow =="themes.php" )
	wp_redirect( 'admin.php?page=theme-options.php' );

Make sure to include the above code within the <?php and ?> tags.

How to access the data saved by the theme options page? I will add the custom_css and feedurl options of the theme settings in header.php file and output them at desired places in the page.

To do so, we will have to first retrieve the data. Again, make sure to insert the following code within the <?php and ?> tags in every page where you need to make use of theme options settings. For this, I add the following code as the very top of the file:

<?php //Retrieve Theme Options Data
global $options;
$options = get_option('p2h_theme_options');?>

Now, I will add the following code at the appropriate place in the page.

<?php // Custom CSS block in Theme Options Page
	if ( isset ($options['custom_css']) &&  ($options['custom_css']!="") ) {
	$output = '<style type="text/css">'."n";

	$output .= $options['custom_css'] . "n";

	$output .= '</style>'."n";

	echo $output;

	}
	if ( isset ($options['feedurl']) &&  ($options['feedurl']!="") ) {
	echo '<link rel="alternate" type="application/rss+xml" href="'.$options['feedurl'].'" title="'. get_bloginfo('name') .' RSS Feed"/>'."n";
	}?>

That’s all. You have a fantastic theme options page for your WordPress theme. Go, get your theme listed in WordPress themes repository.

Related posts:

1. Create WordPress Theme Options Page
2. Shaan Free WordPress Theme
3. Adding Author Description/Biography in WordPress Themes
4. Automatically Delete Spam Comments in WordPress
5. Undedicated: A Free Minimal WordPress Theme
6. Seven Ways to Speed Up WordPress Blog
7. Create Interesting Facebook Fan Page
8. Why Free WordPress Themes Are Great For Improving Page Rank?
9. Jenny Free WordPress Theme
10. Easy Way to Avoid Spam Comments Entering Your WordPress Blog