Wordpress is a great platform to begin your blogging, CMS or a simple e-Commerce site combined with the power of the never ending Wordpress Plugins you are off to go with your site in a quick succession.
There are probably countless sites which offer ready made theme's to get you started even quicker than imagine. It's flexible, affordable, and top of all quick and easy these are just some of the reasons why more and more sites are being made on Wordpress. With the help and support of the huge community that has accumulated, its no longer a blogging tool it can be twisted to a customized CMS!
There are many pitfalls of going for a readymade theme some of the best themes that I've seen are either Commercial versions or there is too much code you have to learn and cover to twist it to your needs. After some sleepless nights and pondering over the default Wordpress theme (which the Geeks of WP already know), And there came the "AHA" moment to develop some sort of reusable code that can give you the flexibility over your Theme Settings and possibly overall content display. AMEN to that. The most important reasons for creating this piece of code was to store and restore these settings automatically without touching or changing much of the theme code or making it look like a coding horror which reminds me of a cool site Coding Horror by Jeff Atwood, check it out.
What you are about to see is a realworld implementation of that code. I have been reusing it ever since in all my WP projects, and now I'd like to share it.
- STEP 1 -> Fire up your wp-config.php file for Wordpress. This is to ensure we use a setting name that doesn't clash with other plugin's or the core WP settings.
- STEP 2 -> Add your desired Settings Prefix right after:
define ('WPLANG', ''); // Add the prefix belowright after (you can place it anywhere in this file)
define ('XXSETTINGSPREFIX', 'xx-setting-'); // This will be used in the overall site settings - STEP 3 -> Now its time to kick up your functions.php file under your current theme.
/**
* Creates a theme control for use under Theme Settings.
*
* Based on $args theme control is rendered and returned upon function call. See below for list of options:
* #control -> An array type from one of the predefined control types. (array)
* #name and #id -> Specify name and id of the control (its important to name them uniquely). Theme settings uses this names to save and restore information. (string)
* #class -> Give a class name to control for theming. (string)
* #title -> Is used to create a label for accompanying control. (string)
* #value -> The value for control can be specified here (for text, radio and textarea only). Upon restoring the setting this function uses the same argument. (string)
* #rows and #cols -> Used to specify rows and cols for textarea. (string)
* #height and #width -> Used to specify height and width for control. (string)
* #checked -> Used to specify checked value for checkbox control. (string)
* #multiple -> Creates a multiple selection list box. Specify 'multiple' without quotes (string)
* #default_value -> If you do not specify #value then #default_value is used (string)
* #size -> For text input type (string)
* #options -> Not implemented yet (array)
* #selected -> For checkbox (int)
* #allowhtml -> For textbox and textarea, not fully implemented but should work (int)
*
*
* @var $args mixed Can be an array containing control type, control name, control id, control class, control title
* @return Fully rendered theme control in HTML.
* @author Anirudh K. Mahant
*/
function render_theme_control($args = '') {
//-- These are defaults for control
$defaults = array(
'#control' => array('text', 'select', 'radio', 'checkbox', 'textarea', 'submit', 'wp_dropdown_posts', 'ngg_gallery_combo', 'ngg_album_combo', 'wp_dropdown_categories', 'wp_dropdown_pages'),
'#name' => '', '#id' => '',
'#class' => 'xx_input', '#title' => '',
'#value' => '', '#rows' => '5',
'#cols' => '80', '#height' => '',
'#width' => '', '#multiple' => '', '#checked' => '',
'#default_value' => '', '#size' => '25',
'#options' => array(), '#selected' => -1,
'#allowhtml' => false
);
$settings_prefix = XXSETTINGSPREFIX;
$r = wp_parse_args($args, $defaults);
$thecontrol = $r['#control'];
$allowhtml = $r['#allowhtml'];
if ($allowhtml == true):
$thevalue = (!empty($r['#value'])) ? $r['#value'] : $r['#default_value'];
else:
$thevalue = (!empty($r['#value'])) ? stripslashes(wp_kses_normalize_entities($r['#value'])) : $r['#default_value'];
endif;
$thesize = (!empty($r['#size'])) ? ' size="'.$r['#size'].'"' : '';
$instclass = 'xx-instance-'.mt_rand();
$theclass = (!empty($r['#class'])) ? 'xx-input xx-input-'.$r['#control'].' '.$r['#class']. ' '.$instclass : 'xx-input';
$theid = (!empty($r['#id'])) ? $settings_prefix.$r['#id'] : 'xx-control-'.mt_rand();
$thename = (!empty($r['#name'])) ? $settings_prefix.$r['#name'] : 'xx-control-'.mt_rand();
$height = (!empty($r['#height'])) ? ' height: '.$r['#height'].';' : '';
$width = (!empty($r['#width'])) ? ' width: '.$r['#width'].';' : '';
$styles = ' style="'.$height.$width.'"';
$checked = (!empty($r['#checked'])) ? ' checked="'.$r['#checked'].'"' : '';
$thelabel = (!empty($r['#title'])) ? '<label class="xx-label xx-label-'.$thecontrol.'" for="'.$theid.'">'.$r['#title'].'</label>' : '';
$ismultiple = (!empty($r['#multiple'])) ? ' multiple="'.$r['#multiple'].'"' : '';
$selected = (!empty($r['#selected'])) ? $r['#selected'] : -1;
$rows = (!empty($r['#rows'])) ? ' rows="'.$r['#rows'].'"' : '';
$cols = (!empty($r['#cols'])) ? ' cols="'.$r['#cols'].'"' : '';
$rowcols = $rows.$cols;
switch ($thecontrol):
case "text":
$out = $thelabel.'<input type="text" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'" value="'.$thevalue.'"'.$thesize.'" />';
break;
case "radio":
$out = $thelabel.'<input type="radio" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'" value="'.$thevalue.'" />';
break;
case "checkbox":
$out = '<input type="checkbox" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'"'.$checked.'" />'.$thelabel;
break;
case "submit":
$out = '<input type="submit" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'" />';
$xx_js = (!empty($height)) ? 'jQuery("input.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("input.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
break;
case "wp_dropdown_categories":
$thename = ($ismultiple) ? $thename.'[]' : $thename;
$out = $thelabel.wp_dropdown_categories('show_option_none=Select Categorie(s)&hide_empty=0&show_count=0&hierarchical=1&orderby=name&name='.$thename.'&class='.$theclass.'&echo=0');
$xx_js = (!empty($ismultiple)) ? 'jQuery("select.'.$instclass.'").attr("multiple", "multiple");' : '';
$xx_js .= (!empty($height)) ? 'jQuery("select.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("select.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
if (is_array($selected)):
$defvalue = get_themed_option($r['#name']);
foreach ($defvalue as $optionvalue):
if (($optionvalue > 0) & (!empty($optionvalue))):
$xx_js .= 'jQuery("select.'.$instclass.' option[value='.$optionvalue.']").attr("selected","selected");';
endif;
endforeach;
endif;
$out .= '<div style="margin: 15px 0 5px;"><a style="font-weight: bold;" class="button" href="themes.php?page=functions.php&flush='.$theid.'" title="Flush Setting (Required if you reorder your Categories)">Flush Setting</a></div>';
break;
case "wp_dropdown_pages":
$thename = ($ismultiple) ? $thename.'[]' : $thename;
$out = $thelabel.xx_wp_dropdown_pages('show_option_none=Select Page(s)&child_of=0&depth=0&name='.$thename.'&class='.$theclass.'&selected='.$selected.'&echo=0');
$xx_js = (!empty($ismultiple)) ? 'jQuery("select.'.$instclass.'").attr("multiple", "multiple");' : '';
$xx_js .= (!empty($height)) ? 'jQuery("select.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("select.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
if (is_array($selected)):
$defvalue = get_themed_option($r['#name']);
foreach ($defvalue as $optionvalue):
if (($optionvalue > 0) & (!empty($optionvalue))):
$xx_js .= 'jQuery("select.'.$instclass.' option[value='.$optionvalue.']").attr("selected","selected");';
endif;
endforeach;
endif;
break;
case "wp_dropdown_posts":
global $post;
$out = $thelabel.'<select name="'.$thename.'[]" class="'.$theclass.'" id="'.$theid.'"'.$ismultiple.'"'.$styles.'>';
$plist = get_posts('numberposts=1000&order=ASC&orderby=title&post_type=any');
$out .= '<option value="-1">Select a Post(s)</option>';
foreach ($plist as $post) : setup_postdata($post);
$out .= '<option value="'.$post->ID.'">'.$post->post_title.'</option>';
endforeach;
$out .= '</select>';
//$xx_js .= (!empty($width)) ? 'jQuery("select.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
if (is_array($selected)):
$defvalue = get_themed_option($r['#name']);
foreach ($defvalue as $optionvalue):
if (($optionvalue > 0) & (!empty($optionvalue))):
$xx_js .= 'jQuery("select.'.$instclass.' option[value='.$optionvalue.']").attr("selected","selected");';
endif;
endforeach;
endif;
return $out.'<script type="text/javascript">jQuery(document).ready(function(){'.$xx_js.'});</script>';
case "select":
if (is_array($r['#options'])):
$out = $thelabel.'<select name="'.$thename.'[]" class="'.$theclass.'" id="'.$theid.'"'.$ismultiple.'"'.$styles.'>';
$cnt = 0;
foreach ($r['#options'] as $opt => $value):
$selected = ($cnt == $r['#selected']) ? ' selected="selected"' : '';
$out .= '<option value="'.$opt.'"'.$selected.'>'.$value.'</option>';
$cnt++;
endforeach;
$out .= '</select>';
endif;
break;
case "textarea":
$out = $thelabel.'<textarea class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'"'.$rowcols.''.$styles.'>'.$thevalue.'</textarea>';
$xx_js = (!empty($height)) ? 'jQuery("input.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("input.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
break;
default:
break;
endswitch;
if (!empty($xx_js)):
return $out.'<script type="text/javascript">jQuery(document).ready(function(){'.$xx_js.'});</script>';
else:
return $out;
endif;
}
* Creates a theme control for use under Theme Settings.
*
* Based on $args theme control is rendered and returned upon function call. See below for list of options:
* #control -> An array type from one of the predefined control types. (array)
* #name and #id -> Specify name and id of the control (its important to name them uniquely). Theme settings uses this names to save and restore information. (string)
* #class -> Give a class name to control for theming. (string)
* #title -> Is used to create a label for accompanying control. (string)
* #value -> The value for control can be specified here (for text, radio and textarea only). Upon restoring the setting this function uses the same argument. (string)
* #rows and #cols -> Used to specify rows and cols for textarea. (string)
* #height and #width -> Used to specify height and width for control. (string)
* #checked -> Used to specify checked value for checkbox control. (string)
* #multiple -> Creates a multiple selection list box. Specify 'multiple' without quotes (string)
* #default_value -> If you do not specify #value then #default_value is used (string)
* #size -> For text input type (string)
* #options -> Not implemented yet (array)
* #selected -> For checkbox (int)
* #allowhtml -> For textbox and textarea, not fully implemented but should work (int)
*
*
* @var $args mixed Can be an array containing control type, control name, control id, control class, control title
* @return Fully rendered theme control in HTML.
* @author Anirudh K. Mahant
*/
function render_theme_control($args = '') {
//-- These are defaults for control
$defaults = array(
'#control' => array('text', 'select', 'radio', 'checkbox', 'textarea', 'submit', 'wp_dropdown_posts', 'ngg_gallery_combo', 'ngg_album_combo', 'wp_dropdown_categories', 'wp_dropdown_pages'),
'#name' => '', '#id' => '',
'#class' => 'xx_input', '#title' => '',
'#value' => '', '#rows' => '5',
'#cols' => '80', '#height' => '',
'#width' => '', '#multiple' => '', '#checked' => '',
'#default_value' => '', '#size' => '25',
'#options' => array(), '#selected' => -1,
'#allowhtml' => false
);
$settings_prefix = XXSETTINGSPREFIX;
$r = wp_parse_args($args, $defaults);
$thecontrol = $r['#control'];
$allowhtml = $r['#allowhtml'];
if ($allowhtml == true):
$thevalue = (!empty($r['#value'])) ? $r['#value'] : $r['#default_value'];
else:
$thevalue = (!empty($r['#value'])) ? stripslashes(wp_kses_normalize_entities($r['#value'])) : $r['#default_value'];
endif;
$thesize = (!empty($r['#size'])) ? ' size="'.$r['#size'].'"' : '';
$instclass = 'xx-instance-'.mt_rand();
$theclass = (!empty($r['#class'])) ? 'xx-input xx-input-'.$r['#control'].' '.$r['#class']. ' '.$instclass : 'xx-input';
$theid = (!empty($r['#id'])) ? $settings_prefix.$r['#id'] : 'xx-control-'.mt_rand();
$thename = (!empty($r['#name'])) ? $settings_prefix.$r['#name'] : 'xx-control-'.mt_rand();
$height = (!empty($r['#height'])) ? ' height: '.$r['#height'].';' : '';
$width = (!empty($r['#width'])) ? ' width: '.$r['#width'].';' : '';
$styles = ' style="'.$height.$width.'"';
$checked = (!empty($r['#checked'])) ? ' checked="'.$r['#checked'].'"' : '';
$thelabel = (!empty($r['#title'])) ? '<label class="xx-label xx-label-'.$thecontrol.'" for="'.$theid.'">'.$r['#title'].'</label>' : '';
$ismultiple = (!empty($r['#multiple'])) ? ' multiple="'.$r['#multiple'].'"' : '';
$selected = (!empty($r['#selected'])) ? $r['#selected'] : -1;
$rows = (!empty($r['#rows'])) ? ' rows="'.$r['#rows'].'"' : '';
$cols = (!empty($r['#cols'])) ? ' cols="'.$r['#cols'].'"' : '';
$rowcols = $rows.$cols;
switch ($thecontrol):
case "text":
$out = $thelabel.'<input type="text" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'" value="'.$thevalue.'"'.$thesize.'" />';
break;
case "radio":
$out = $thelabel.'<input type="radio" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'" value="'.$thevalue.'" />';
break;
case "checkbox":
$out = '<input type="checkbox" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'"'.$checked.'" />'.$thelabel;
break;
case "submit":
$out = '<input type="submit" class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'" />';
$xx_js = (!empty($height)) ? 'jQuery("input.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("input.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
break;
case "wp_dropdown_categories":
$thename = ($ismultiple) ? $thename.'[]' : $thename;
$out = $thelabel.wp_dropdown_categories('show_option_none=Select Categorie(s)&hide_empty=0&show_count=0&hierarchical=1&orderby=name&name='.$thename.'&class='.$theclass.'&echo=0');
$xx_js = (!empty($ismultiple)) ? 'jQuery("select.'.$instclass.'").attr("multiple", "multiple");' : '';
$xx_js .= (!empty($height)) ? 'jQuery("select.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("select.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
if (is_array($selected)):
$defvalue = get_themed_option($r['#name']);
foreach ($defvalue as $optionvalue):
if (($optionvalue > 0) & (!empty($optionvalue))):
$xx_js .= 'jQuery("select.'.$instclass.' option[value='.$optionvalue.']").attr("selected","selected");';
endif;
endforeach;
endif;
$out .= '<div style="margin: 15px 0 5px;"><a style="font-weight: bold;" class="button" href="themes.php?page=functions.php&flush='.$theid.'" title="Flush Setting (Required if you reorder your Categories)">Flush Setting</a></div>';
break;
case "wp_dropdown_pages":
$thename = ($ismultiple) ? $thename.'[]' : $thename;
$out = $thelabel.xx_wp_dropdown_pages('show_option_none=Select Page(s)&child_of=0&depth=0&name='.$thename.'&class='.$theclass.'&selected='.$selected.'&echo=0');
$xx_js = (!empty($ismultiple)) ? 'jQuery("select.'.$instclass.'").attr("multiple", "multiple");' : '';
$xx_js .= (!empty($height)) ? 'jQuery("select.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("select.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
if (is_array($selected)):
$defvalue = get_themed_option($r['#name']);
foreach ($defvalue as $optionvalue):
if (($optionvalue > 0) & (!empty($optionvalue))):
$xx_js .= 'jQuery("select.'.$instclass.' option[value='.$optionvalue.']").attr("selected","selected");';
endif;
endforeach;
endif;
break;
case "wp_dropdown_posts":
global $post;
$out = $thelabel.'<select name="'.$thename.'[]" class="'.$theclass.'" id="'.$theid.'"'.$ismultiple.'"'.$styles.'>';
$plist = get_posts('numberposts=1000&order=ASC&orderby=title&post_type=any');
$out .= '<option value="-1">Select a Post(s)</option>';
foreach ($plist as $post) : setup_postdata($post);
$out .= '<option value="'.$post->ID.'">'.$post->post_title.'</option>';
endforeach;
$out .= '</select>';
//$xx_js .= (!empty($width)) ? 'jQuery("select.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
if (is_array($selected)):
$defvalue = get_themed_option($r['#name']);
foreach ($defvalue as $optionvalue):
if (($optionvalue > 0) & (!empty($optionvalue))):
$xx_js .= 'jQuery("select.'.$instclass.' option[value='.$optionvalue.']").attr("selected","selected");';
endif;
endforeach;
endif;
return $out.'<script type="text/javascript">jQuery(document).ready(function(){'.$xx_js.'});</script>';
case "select":
if (is_array($r['#options'])):
$out = $thelabel.'<select name="'.$thename.'[]" class="'.$theclass.'" id="'.$theid.'"'.$ismultiple.'"'.$styles.'>';
$cnt = 0;
foreach ($r['#options'] as $opt => $value):
$selected = ($cnt == $r['#selected']) ? ' selected="selected"' : '';
$out .= '<option value="'.$opt.'"'.$selected.'>'.$value.'</option>';
$cnt++;
endforeach;
$out .= '</select>';
endif;
break;
case "textarea":
$out = $thelabel.'<textarea class="'.$theclass.'" name="'.$thename.'" id="'.$theid.'"'.$rowcols.''.$styles.'>'.$thevalue.'</textarea>';
$xx_js = (!empty($height)) ? 'jQuery("input.'.$instclass.'").css("height", "'.$r['#height'].'");' : '';
$xx_js .= (!empty($width)) ? 'jQuery("input.'.$instclass.'").css("width", "'.$r['#width'].'");' : '';
break;
default:
break;
endswitch;
if (!empty($xx_js)):
return $out.'<script type="text/javascript">jQuery(document).ready(function(){'.$xx_js.'});</script>';
else:
return $out;
endif;
}
At first this might be confusing but dont worry, once you understand them correctly you will enjoy it, read the function help that will clear up most of your doubts. If you have ever worked on Drupal or Drupal Forms API then this might seem familiar. This function is the core of Theme Settings, supplied the right arguments it will create a Theme Settings control which can be either of the HTML input types (more on this later). And add to that you can also use the build-in Template Tags generated controls as Theme Settings for eg. wp_list_pages(); or wp_dropdown_categories(); which WP outputs as control in your theme. This function merely creates and returns a control to you, the next three functions will work in tandem with this to give you the power to control your Wordpress Theme Settings.
/**
* Gets a theme option from wp_settings. You have to use this function
* heavily through out your theme to control your content and output.
*
* @var $optname The option name to be saved
* @var $echo Prints the option
* @return null.
* @author Anirudh K. Mahant
*/
function get_themed_option($optname = "", $echo = false) {
$sopts = get_option('xx_theme_options');
if (is_array($sopts[XXSETTINGSPREFIX.$optname])):
if ($echo): print $sopts[XXSETTINGSPREFIX.$optname];endif;
return (!empty($sopts[XXSETTINGSPREFIX.$optname])) ? $sopts[XXSETTINGSPREFIX.$optname] : '';
else:
if ($echo): print $sopts[XXSETTINGSPREFIX.$optname];endif;
return (!empty($sopts[XXSETTINGSPREFIX.$optname])) ? stripslashes($sopts[XXSETTINGSPREFIX.$optname]) : '';
endif;
}
/**
* Deletes a theme option from wp_settings. You have to rarely use this function
*
* @var $optname The option name to be saved
* @return null.
* @author Anirudh K. Mahant
*/
function delete_themed_option($optname = "") {
$sopts = get_option('xx_theme_options');
unset($sopts[$optname]);
//delete_option('xx_theme_options');
update_option('xx_theme_options', $sopts);
}
/**
* Saves a theme option to wp_settings. You have to rarely use this function
*
* @var $optname The option name to be saved
* @var $optvalue The option value to be saved
* @return null.
* @author Anirudh K. Mahant
*/
function save_themed_option($optname = "", $optvalue = "") {
global $xxthemeoptions;
if (($optname == "") | ($optvalue == "")): return "";
exit;
endif;
//-- Check and save option in arrays
if (isset($optvalue)):
$xxthemeoptions[$optname] = $optvalue;
endif;
if (!empty($xxthemeoptions)):
update_option('xx_theme_options', $xxthemeoptions);
endif;
}
* Gets a theme option from wp_settings. You have to use this function
* heavily through out your theme to control your content and output.
*
* @var $optname The option name to be saved
* @var $echo Prints the option
* @return null.
* @author Anirudh K. Mahant
*/
function get_themed_option($optname = "", $echo = false) {
$sopts = get_option('xx_theme_options');
if (is_array($sopts[XXSETTINGSPREFIX.$optname])):
if ($echo): print $sopts[XXSETTINGSPREFIX.$optname];endif;
return (!empty($sopts[XXSETTINGSPREFIX.$optname])) ? $sopts[XXSETTINGSPREFIX.$optname] : '';
else:
if ($echo): print $sopts[XXSETTINGSPREFIX.$optname];endif;
return (!empty($sopts[XXSETTINGSPREFIX.$optname])) ? stripslashes($sopts[XXSETTINGSPREFIX.$optname]) : '';
endif;
}
/**
* Deletes a theme option from wp_settings. You have to rarely use this function
*
* @var $optname The option name to be saved
* @return null.
* @author Anirudh K. Mahant
*/
function delete_themed_option($optname = "") {
$sopts = get_option('xx_theme_options');
unset($sopts[$optname]);
//delete_option('xx_theme_options');
update_option('xx_theme_options', $sopts);
}
/**
* Saves a theme option to wp_settings. You have to rarely use this function
*
* @var $optname The option name to be saved
* @var $optvalue The option value to be saved
* @return null.
* @author Anirudh K. Mahant
*/
function save_themed_option($optname = "", $optvalue = "") {
global $xxthemeoptions;
if (($optname == "") | ($optvalue == "")): return "";
exit;
endif;
//-- Check and save option in arrays
if (isset($optvalue)):
$xxthemeoptions[$optname] = $optvalue;
endif;
if (!empty($xxthemeoptions)):
update_option('xx_theme_options', $xxthemeoptions);
endif;
}
Fine now its time to move on to the real part ie. creating and rendering your Theme Settings under Wordpress Admin. Its quick and easy too, if you take a good look around the default Wordpress theme the ineresting function kubrick_add_theme_page(); and add_action('admin_menu', 'kubrick_add_theme_page'); This is where Wordpress does its magic, and we will change it to something nice. Yet again add the following lines of code to your functions.php file:
//-- Create extra option for controlling theme related options
add_action('admin_menu', 'theme_options_handler');
function theme_options_handler() {
if (isset( $_GET['page'] ) && $_GET['page'] == basename(__FILE__) ):
if (isset( $_REQUEST['action'] ) && 'save' == $_REQUEST['action'] ):
check_admin_referer(get_bloginfo('name'));
$settings_prefix = XXSETTINGSPREFIX;
foreach($_REQUEST as $name => $value):
if (strstr($name, $settings_prefix)):
//-- Dont save -1 values from comboboxes
if($value >= 0) save_themed_option($name, $value);
endif;
endforeach;
wp_redirect("themes.php?page=functions.php&saved=true");
die;
endif;
//-- Check delete Flushed theme settings
if (isset($_REQUEST['flush'])):
//-- Delete the option
delete_themed_option($_REQUEST['flush']);
endif;
endif;
add_theme_page(__('Theme Options'), __('Theme Options'), 'edit_themes', basename(__FILE__), 'theme_options_page');
}
add_action('admin_menu', 'theme_options_handler');
function theme_options_handler() {
if (isset( $_GET['page'] ) && $_GET['page'] == basename(__FILE__) ):
if (isset( $_REQUEST['action'] ) && 'save' == $_REQUEST['action'] ):
check_admin_referer(get_bloginfo('name'));
$settings_prefix = XXSETTINGSPREFIX;
foreach($_REQUEST as $name => $value):
if (strstr($name, $settings_prefix)):
//-- Dont save -1 values from comboboxes
if($value >= 0) save_themed_option($name, $value);
endif;
endforeach;
wp_redirect("themes.php?page=functions.php&saved=true");
die;
endif;
//-- Check delete Flushed theme settings
if (isset($_REQUEST['flush'])):
//-- Delete the option
delete_themed_option($_REQUEST['flush']);
endif;
endif;
add_theme_page(__('Theme Options'), __('Theme Options'), 'edit_themes', basename(__FILE__), 'theme_options_page');
}
And the final step remains to create an interface to let this rock. Notice the last line of add_theme_page(); function call in the above code, this is your interface definition place so, move on add some more code and all this will over:
function theme_options_page() {
if (isset( $_REQUEST['saved'] ) ) echo '<div id="message" class="updated fade"><p><strong>'.__('Theme Options saved successfully!').'</strong></p></div>';
if (isset( $_REQUEST['flush'] ) ) echo '<div id="message" class="updated fade"><p><strong>'.__('Setting has been flushed. You might need to set it again').'</strong></p></div>';
?>
<div class='wrap'>
<h2><?php _e('Customize Theme Options for '. get_bloginfo('name')); ?></h2>
<div id="options-header">
<div id="nonJsForm">
<form method="post" action="">
<?php wp_nonce_field(get_bloginfo('name')); //Needed for protection against hacking ?>
<input type="hidden" name="action" value="save" />
<input type="hidden" name="njform" value="true" />
</form>
</div>
<br /><br />
<link href="<?php bloginfo('stylesheet_directory'); ?>/css/admin.css" rel="stylesheet" type="text/css" media="screen, projection" />
<div id="jsForm">
<form style="display:inline;" method="post" name="hicolor" id="hicolor" action="<?php echo attribute_escape($_SERVER['REQUEST_URI']); ?>">
<?php wp_nonce_field(get_bloginfo('name')); //Needed for protection against hacking ?>
<table cellpadding="0" cellspacing="0" width="99%" class="xx-options-dashboard">
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="widefat fixed">
<thead>
<tr>
<th colspan="2" class="column-name" align="center" valign="middle">Configure Main Theme Options</th>
</tr>
</thead>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'checkbox', '#class' => 'include-site-description', '#name' => 'include-site-description', '#id' => 'include-site-description',
'#title' => 'Include site description (tagline) in Site Logo (FOR SEO)', '#checked' => get_themed_option('include-site-description')));
?>
<br /><br />
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'front-page-promo-video', '#name' => 'front-page-promo-video', '#id' => 'front-page-promo-video',
'#size' => '60', '#title' => 'Enter URL of front page Flash Video (FLV Format Only):', '#value' => get_themed_option('front-page-promo-video')));
?>
<br class="cflt" />
<?php
print render_theme_control(array('#control' => 'checkbox', '#class' => 'autoplay-front-promo-video', '#name' => 'autoplay-front-promo-video', '#id' => 'autoplay-front-promo-video',
'#title' => 'Autoplay front page promo video?', '#checked' => get_themed_option('autoplay-front-promo-video')));
?>
<br class="cflt" />
<p class="pt5"><strong>NOTE: </strong>Video Dimensions must be 580 x 328 pixels. You can also use Youtube video‘s here.</p>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'no-of-front-promo-words', '#name' => 'no-of-front-promo-words', '#id' => 'no-of-front-promo-words',
'#size' => '60', '#title' => 'No. of paragraph words to show in Front Promotional Teaser:', '#value' => get_themed_option('no-of-front-promo-words')));
?>
<br /><br />
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-promo-post',
'#name' => 'front-promo-post', '#id' => 'front-promo-post', '#width' => '400px',
'#title' => 'Select front page promotional teaser post:', '#selected' => get_themed_option('front-promo-post')));
?>
<p class="pt5"><strong>NOTE: </strong>Select only one Post or Page from here which will appear on the front page Header besides the Video.</p>
</td>
</tr>
<tr>
<td colspan="2" class="column-name" align="left" valign="middle">Social Bookmarking Options</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'google-connect-url', '#name' => 'google-connect-url', '#id' => 'google-connect-url',
'#size' => '60', '#title' => 'Enter URL for Google Friend Connect:', '#value' => get_themed_option('google-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'google-connect-url-title', '#name' => 'google-connect-url-title', '#id' => 'google-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Google Friend Connect:', '#value' => get_themed_option('google-connect-url-title')));
?>
<hr />
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'facebook-connect-url', '#name' => 'facebook-connect-url', '#id' => 'facebook-connect-url',
'#size' => '60', '#title' => 'Enter URL for Facebook Fan Page:', '#value' => get_themed_option('facebook-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'facebook-connect-url-title', '#name' => 'facebook-connect-url-title', '#id' => 'facebook-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Facebook Fan Page:', '#value' => get_themed_option('facebook-connect-url-title')));
?>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'twitter-connect-url', '#name' => 'twitter-connect-url', '#id' => 'twitter-connect-url',
'#size' => '60', '#title' => 'Enter URL for Twitter follow:', '#value' => get_themed_option('twitter-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'twitter-connect-url-title', '#name' => 'twitter-connect-url-title', '#id' => 'twitter-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Twitter Follow Page:', '#value' => get_themed_option('twitter-connect-url-title')));
?>
<hr />
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'youtube-connect-url', '#name' => 'youtube-connect-url', '#id' => 'youtube-connect-url',
'#size' => '60', '#title' => 'Enter URL for Youtube:', '#value' => get_themed_option('youtube-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'youtube-connect-url-title', '#name' => 'youtube-connect-url-title', '#id' => 'youtube-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Youtube:', '#value' => get_themed_option('youtube-connect-url-title')));
?>
</td>
</tr>
<tr>
<td colspan="2" class="column-name" align="left" valign="middle">Menu & Spotlight Bar Options</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'menu-break-after', '#name' => 'menu-break-after', '#id' => 'menu-break-after',
'#size' => '60', '#title' => 'Break menu after no. of items:', '#value' => get_themed_option('menu-break-after')));
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'main-menu-categories',
'#name' => 'main-menu-categories', '#id' => 'main-menu-categories', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites Main Menu:', '#selected' => get_themed_option('main-menu-categories')));
print '<br />';
print render_theme_control(array('#control' => 'checkbox', '#class' => 'include-home-icon-menu', '#name' => 'include-home-icon-menu', '#id' => 'include-home-icon-menu',
'#title' => 'Include Home Icon on Main menu', '#checked' => get_themed_option('include-home-icon-menu')));
?>
<br />
<p class="pt5"><strong>NOTE: </strong>Menu depth will be prepared at a single level. Parent - Child relationships will be evaluated automatically.</p>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'no-of-spotlight-words', '#name' => 'no-of-spotlight-words', '#id' => 'no-of-spotlight-words',
'#size' => '60', '#title' => 'No. of words to show in spotlight posts:', '#value' => get_themed_option('no-of-spotlight-words')));
?>
<hr />
<table cellpadding="0" cellspacing="0" width="99%" class="borders" border="0">
<tr>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-1',
'#name' => 'front-spotlight-post-1', '#id' => 'front-spotlight-post-1', '#width' => '200px',
'#title' => 'Select spotlight post 1:', '#selected' => get_themed_option('front-spotlight-post-1')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-1', '#name' => 'spotlight-title-1', '#id' => 'spotlight-title-1',
'#size' => '36', '#title' => 'Enter title for spotlight post 1:', '#value' => get_themed_option('spotlight-title-1')));
?>
</td>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-2',
'#name' => 'front-spotlight-post-2', '#id' => 'front-spotlight-post-2', '#width' => '200px',
'#title' => 'Select spotlight post 2:', '#selected' => get_themed_option('front-spotlight-post-2')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-2', '#name' => 'spotlight-title-2', '#id' => 'spotlight-title-2',
'#size' => '36', '#title' => 'Enter title for spotlight post 2:', '#value' => get_themed_option('spotlight-title-2')));
?>
</td>
</tr>
<tr>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-3',
'#name' => 'front-spotlight-post-3', '#id' => 'front-spotlight-post-3', '#width' => '200px',
'#title' => 'Select spotlight post 3:', '#selected' => get_themed_option('front-spotlight-post-3')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-3', '#name' => 'spotlight-title-3', '#id' => 'spotlight-title-3',
'#size' => '36', '#title' => 'Enter title for spotlight post 3:', '#value' => get_themed_option('spotlight-title-3')));
?>
</td>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-4',
'#name' => 'front-spotlight-post-4', '#id' => 'front-spotlight-post-4', '#width' => '200px',
'#title' => 'Select spotlight post 4:', '#selected' => get_themed_option('front-spotlight-post-4')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-4', '#name' => 'spotlight-title-4', '#id' => 'spotlight-title-4',
'#size' => '36', '#title' => 'Enter title for spotlight post 4:', '#value' => get_themed_option('spotlight-title-4')));
?>
</td>
</tr>
</table>
<p class="pt5"><strong>NOTE: </strong>These spotlight titles will be used by default if you do not specify them in Post meta field spotlight_title.</p>
</td>
</tr>
<tr>
<td colspan="2" class="column-name" align="left" valign="middle">Footer Menu Options</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'footer-menu-categories-one',
'#name' => 'footer-menu-categories-one', '#id' => 'footer-menu-categories-one', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites footer one column:', '#selected' => get_themed_option('footer-menu-categories-one')));
print '<p class="pt5"><strong>NOTE: </strong>Select each category separately to include. Parent Child relationships are not evaluated! Select even no. of categories and not more than 20 categories here</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-one-title', '#name' => 'footer-menu-categories-one-title', '#id' => 'footer-menu-categories-one-title',
'#size' => '60', '#title' => 'Enter title for footer column one menu:', '#value' => get_themed_option('footer-menu-categories-one-title')));
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-one-break', '#name' => 'footer-menu-categories-one-break', '#id' => 'footer-menu-categories-one-break',
'#size' => '60', '#title' => 'Break menu items after no. of items:', '#value' => get_themed_option('footer-menu-categories-one-break')));
?>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'footer-menu-categories-two',
'#name' => 'footer-menu-categories-two', '#id' => 'footer-menu-categories-two', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites footer two column:', '#selected' => get_themed_option('footer-menu-categories-two')));
print '<p class="pt5"><strong>NOTE: </strong>Select each category separately to include. Parent Child relationships are not evaluated!</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-two-title', '#name' => 'footer-menu-categories-two-title', '#id' => 'footer-menu-categories-two-title',
'#size' => '60', '#title' => 'Enter title for footer column two menu:', '#value' => get_themed_option('footer-menu-categories-two-title')));
?>
</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'footer-menu-categories-three',
'#name' => 'footer-menu-categories-three', '#id' => 'footer-menu-categories-three', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites footer three column:', '#selected' => get_themed_option('footer-menu-categories-three')));
print '<p class="pt5"><strong>NOTE: </strong>Select each category separately to include. Parent Child relationships are not evaluated!</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-three-title', '#name' => 'footer-menu-categories-three-title', '#id' => 'footer-menu-categories-three-title',
'#size' => '60', '#title' => 'Enter title for footer column one menu:', '#value' => get_themed_option('footer-menu-categories-three-title')));
?>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_pages', '#class' => 'footer-menu-pages-one',
'#name' => 'footer-menu-pages-one', '#id' => 'footer-menu-pages-one', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select pages to include in sites footer four column:', '#selected' => get_themed_option('footer-menu-pages-one')));
print '<p class="pt5"><strong>NOTE: </strong>Select each page separately to include. Parent Child relationships are not evaluated!</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-pages-one-title', '#name' => 'footer-menu-pages-one-title', '#id' => 'footer-menu-pages-one-title',
'#size' => '60', '#title' => 'Enter title for footer column four menu:', '#value' => get_themed_option('footer-menu-pages-one-title')));
?>
</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="hidden" name="action" value="save" />
<p class="submit"><input type="submit" name="submitform" class="button-primary" value="<?php echo attribute_escape(__('Save Options')); ?>" onclick="cp.hidePopup('prettyplease')" /></p>
</form>
</div>
</div>
</div>
if (isset( $_REQUEST['saved'] ) ) echo '<div id="message" class="updated fade"><p><strong>'.__('Theme Options saved successfully!').'</strong></p></div>';
if (isset( $_REQUEST['flush'] ) ) echo '<div id="message" class="updated fade"><p><strong>'.__('Setting has been flushed. You might need to set it again').'</strong></p></div>';
?>
<div class='wrap'>
<h2><?php _e('Customize Theme Options for '. get_bloginfo('name')); ?></h2>
<div id="options-header">
<div id="nonJsForm">
<form method="post" action="">
<?php wp_nonce_field(get_bloginfo('name')); //Needed for protection against hacking ?>
<input type="hidden" name="action" value="save" />
<input type="hidden" name="njform" value="true" />
</form>
</div>
<br /><br />
<link href="<?php bloginfo('stylesheet_directory'); ?>/css/admin.css" rel="stylesheet" type="text/css" media="screen, projection" />
<div id="jsForm">
<form style="display:inline;" method="post" name="hicolor" id="hicolor" action="<?php echo attribute_escape($_SERVER['REQUEST_URI']); ?>">
<?php wp_nonce_field(get_bloginfo('name')); //Needed for protection against hacking ?>
<table cellpadding="0" cellspacing="0" width="99%" class="xx-options-dashboard">
<tr>
<td>
<table cellpadding="0" cellspacing="0" class="widefat fixed">
<thead>
<tr>
<th colspan="2" class="column-name" align="center" valign="middle">Configure Main Theme Options</th>
</tr>
</thead>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'checkbox', '#class' => 'include-site-description', '#name' => 'include-site-description', '#id' => 'include-site-description',
'#title' => 'Include site description (tagline) in Site Logo (FOR SEO)', '#checked' => get_themed_option('include-site-description')));
?>
<br /><br />
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'front-page-promo-video', '#name' => 'front-page-promo-video', '#id' => 'front-page-promo-video',
'#size' => '60', '#title' => 'Enter URL of front page Flash Video (FLV Format Only):', '#value' => get_themed_option('front-page-promo-video')));
?>
<br class="cflt" />
<?php
print render_theme_control(array('#control' => 'checkbox', '#class' => 'autoplay-front-promo-video', '#name' => 'autoplay-front-promo-video', '#id' => 'autoplay-front-promo-video',
'#title' => 'Autoplay front page promo video?', '#checked' => get_themed_option('autoplay-front-promo-video')));
?>
<br class="cflt" />
<p class="pt5"><strong>NOTE: </strong>Video Dimensions must be 580 x 328 pixels. You can also use Youtube video‘s here.</p>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'no-of-front-promo-words', '#name' => 'no-of-front-promo-words', '#id' => 'no-of-front-promo-words',
'#size' => '60', '#title' => 'No. of paragraph words to show in Front Promotional Teaser:', '#value' => get_themed_option('no-of-front-promo-words')));
?>
<br /><br />
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-promo-post',
'#name' => 'front-promo-post', '#id' => 'front-promo-post', '#width' => '400px',
'#title' => 'Select front page promotional teaser post:', '#selected' => get_themed_option('front-promo-post')));
?>
<p class="pt5"><strong>NOTE: </strong>Select only one Post or Page from here which will appear on the front page Header besides the Video.</p>
</td>
</tr>
<tr>
<td colspan="2" class="column-name" align="left" valign="middle">Social Bookmarking Options</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'google-connect-url', '#name' => 'google-connect-url', '#id' => 'google-connect-url',
'#size' => '60', '#title' => 'Enter URL for Google Friend Connect:', '#value' => get_themed_option('google-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'google-connect-url-title', '#name' => 'google-connect-url-title', '#id' => 'google-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Google Friend Connect:', '#value' => get_themed_option('google-connect-url-title')));
?>
<hr />
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'facebook-connect-url', '#name' => 'facebook-connect-url', '#id' => 'facebook-connect-url',
'#size' => '60', '#title' => 'Enter URL for Facebook Fan Page:', '#value' => get_themed_option('facebook-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'facebook-connect-url-title', '#name' => 'facebook-connect-url-title', '#id' => 'facebook-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Facebook Fan Page:', '#value' => get_themed_option('facebook-connect-url-title')));
?>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'twitter-connect-url', '#name' => 'twitter-connect-url', '#id' => 'twitter-connect-url',
'#size' => '60', '#title' => 'Enter URL for Twitter follow:', '#value' => get_themed_option('twitter-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'twitter-connect-url-title', '#name' => 'twitter-connect-url-title', '#id' => 'twitter-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Twitter Follow Page:', '#value' => get_themed_option('twitter-connect-url-title')));
?>
<hr />
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'youtube-connect-url', '#name' => 'youtube-connect-url', '#id' => 'youtube-connect-url',
'#size' => '60', '#title' => 'Enter URL for Youtube:', '#value' => get_themed_option('youtube-connect-url')));
print render_theme_control(array('#control' => 'text', '#class' => 'youtube-connect-url-title', '#name' => 'youtube-connect-url-title', '#id' => 'youtube-connect-url-title',
'#size' => '60', '#title' => 'Enter Title for Youtube:', '#value' => get_themed_option('youtube-connect-url-title')));
?>
</td>
</tr>
<tr>
<td colspan="2" class="column-name" align="left" valign="middle">Menu & Spotlight Bar Options</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'menu-break-after', '#name' => 'menu-break-after', '#id' => 'menu-break-after',
'#size' => '60', '#title' => 'Break menu after no. of items:', '#value' => get_themed_option('menu-break-after')));
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'main-menu-categories',
'#name' => 'main-menu-categories', '#id' => 'main-menu-categories', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites Main Menu:', '#selected' => get_themed_option('main-menu-categories')));
print '<br />';
print render_theme_control(array('#control' => 'checkbox', '#class' => 'include-home-icon-menu', '#name' => 'include-home-icon-menu', '#id' => 'include-home-icon-menu',
'#title' => 'Include Home Icon on Main menu', '#checked' => get_themed_option('include-home-icon-menu')));
?>
<br />
<p class="pt5"><strong>NOTE: </strong>Menu depth will be prepared at a single level. Parent - Child relationships will be evaluated automatically.</p>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'text', '#class' => 'no-of-spotlight-words', '#name' => 'no-of-spotlight-words', '#id' => 'no-of-spotlight-words',
'#size' => '60', '#title' => 'No. of words to show in spotlight posts:', '#value' => get_themed_option('no-of-spotlight-words')));
?>
<hr />
<table cellpadding="0" cellspacing="0" width="99%" class="borders" border="0">
<tr>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-1',
'#name' => 'front-spotlight-post-1', '#id' => 'front-spotlight-post-1', '#width' => '200px',
'#title' => 'Select spotlight post 1:', '#selected' => get_themed_option('front-spotlight-post-1')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-1', '#name' => 'spotlight-title-1', '#id' => 'spotlight-title-1',
'#size' => '36', '#title' => 'Enter title for spotlight post 1:', '#value' => get_themed_option('spotlight-title-1')));
?>
</td>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-2',
'#name' => 'front-spotlight-post-2', '#id' => 'front-spotlight-post-2', '#width' => '200px',
'#title' => 'Select spotlight post 2:', '#selected' => get_themed_option('front-spotlight-post-2')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-2', '#name' => 'spotlight-title-2', '#id' => 'spotlight-title-2',
'#size' => '36', '#title' => 'Enter title for spotlight post 2:', '#value' => get_themed_option('spotlight-title-2')));
?>
</td>
</tr>
<tr>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-3',
'#name' => 'front-spotlight-post-3', '#id' => 'front-spotlight-post-3', '#width' => '200px',
'#title' => 'Select spotlight post 3:', '#selected' => get_themed_option('front-spotlight-post-3')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-3', '#name' => 'spotlight-title-3', '#id' => 'spotlight-title-3',
'#size' => '36', '#title' => 'Enter title for spotlight post 3:', '#value' => get_themed_option('spotlight-title-3')));
?>
</td>
<td width="50">
<?php
print render_theme_control(array('#control' => 'wp_dropdown_posts', '#class' => 'front-spotlight-post-4',
'#name' => 'front-spotlight-post-4', '#id' => 'front-spotlight-post-4', '#width' => '200px',
'#title' => 'Select spotlight post 4:', '#selected' => get_themed_option('front-spotlight-post-4')));
print render_theme_control(array('#control' => 'text', '#class' => 'spotlight-title-4', '#name' => 'spotlight-title-4', '#id' => 'spotlight-title-4',
'#size' => '36', '#title' => 'Enter title for spotlight post 4:', '#value' => get_themed_option('spotlight-title-4')));
?>
</td>
</tr>
</table>
<p class="pt5"><strong>NOTE: </strong>These spotlight titles will be used by default if you do not specify them in Post meta field spotlight_title.</p>
</td>
</tr>
<tr>
<td colspan="2" class="column-name" align="left" valign="middle">Footer Menu Options</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'footer-menu-categories-one',
'#name' => 'footer-menu-categories-one', '#id' => 'footer-menu-categories-one', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites footer one column:', '#selected' => get_themed_option('footer-menu-categories-one')));
print '<p class="pt5"><strong>NOTE: </strong>Select each category separately to include. Parent Child relationships are not evaluated! Select even no. of categories and not more than 20 categories here</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-one-title', '#name' => 'footer-menu-categories-one-title', '#id' => 'footer-menu-categories-one-title',
'#size' => '60', '#title' => 'Enter title for footer column one menu:', '#value' => get_themed_option('footer-menu-categories-one-title')));
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-one-break', '#name' => 'footer-menu-categories-one-break', '#id' => 'footer-menu-categories-one-break',
'#size' => '60', '#title' => 'Break menu items after no. of items:', '#value' => get_themed_option('footer-menu-categories-one-break')));
?>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'footer-menu-categories-two',
'#name' => 'footer-menu-categories-two', '#id' => 'footer-menu-categories-two', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites footer two column:', '#selected' => get_themed_option('footer-menu-categories-two')));
print '<p class="pt5"><strong>NOTE: </strong>Select each category separately to include. Parent Child relationships are not evaluated!</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-two-title', '#name' => 'footer-menu-categories-two-title', '#id' => 'footer-menu-categories-two-title',
'#size' => '60', '#title' => 'Enter title for footer column two menu:', '#value' => get_themed_option('footer-menu-categories-two-title')));
?>
</td>
</tr>
<tr>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_categories', '#class' => 'footer-menu-categories-three',
'#name' => 'footer-menu-categories-three', '#id' => 'footer-menu-categories-three', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select categories to include in sites footer three column:', '#selected' => get_themed_option('footer-menu-categories-three')));
print '<p class="pt5"><strong>NOTE: </strong>Select each category separately to include. Parent Child relationships are not evaluated!</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-categories-three-title', '#name' => 'footer-menu-categories-three-title', '#id' => 'footer-menu-categories-three-title',
'#size' => '60', '#title' => 'Enter title for footer column one menu:', '#value' => get_themed_option('footer-menu-categories-three-title')));
?>
</td>
<td>
<?php
print render_theme_control(array('#control' => 'wp_dropdown_pages', '#class' => 'footer-menu-pages-one',
'#name' => 'footer-menu-pages-one', '#id' => 'footer-menu-pages-one', '#width' => '400px', '#multiple' => 'multiple', '#height' => '250px',
'#title' => 'Select pages to include in sites footer four column:', '#selected' => get_themed_option('footer-menu-pages-one')));
print '<p class="pt5"><strong>NOTE: </strong>Select each page separately to include. Parent Child relationships are not evaluated!</p><hr />';
print render_theme_control(array('#control' => 'text', '#class' => 'footer-menu-pages-one-title', '#name' => 'footer-menu-pages-one-title', '#id' => 'footer-menu-pages-one-title',
'#size' => '60', '#title' => 'Enter title for footer column four menu:', '#value' => get_themed_option('footer-menu-pages-one-title')));
?>
</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="hidden" name="action" value="save" />
<p class="submit"><input type="submit" name="submitform" class="button-primary" value="<?php echo attribute_escape(__('Save Options')); ?>" onclick="cp.hidePopup('prettyplease')" /></p>
</form>
</div>
</div>
</div>
Where in the blue hell all this code go and what it does? See the screenshot below to clear things up:
The only thing now you have to do to retreive the settings now is to call the function get_themed_option('your-option-name'); in your theme thats it. For full reference download the attached functions.zip which contains all the necessary code to kick start. Comments, Suggestions and Improvements always greeted....
Comments
Post new comment