moonpixel This is supposed to be just a quick recipe how to do a bare bones settings page for a WordPress theme. WordPress provides us now with a quick and secure way to build such theme settings page using it’s native functions and it also adds a hidden nonce field for validation. Let’s get cookin…
All we need to do for this simple example is to mess with our WordPress theme’s function.php. Firstly we create some basic theme settings page markup:
function options_page_fn() {
?>
<div class="wrap">
<div class="icon32" id="icon-themes"></div>
<h2>Theme Settings</h2>
<p>Customise your theme using the settings below.</p>
<?php $path = get_template_directory_uri(); ?>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr><td valign="top">
<form method="post" action="options.php" enctype="multipart/form-data">
<?php settings_fields('plugin_options'); ?>
<?php do_settings_sections(__FILE__); ?>
<p class="submit">
<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
</p>
</form>
</td>
</tr></table>
</div>
<?php
}And we add a link to the admin menu:
function create_theme_options_page() { add_theme_page(__('Theme Settings'), __('Theme Settings'), 'edit_themes', basename(__FILE__), 'options_page_fn'); } add_action('admin_menu', 'create_theme_options_page');
Then we add settings for our section and our field:
function prepare_fields() { register_setting('plugin_options', 'plugin_options'); add_settings_section('main_section', 'Theme Settings', 'section_cb', __FILE__); add_settings_field('somefield', 'Some Field:', 'somefield_setting', __FILE__, 'main_section'); } add_action('admin_init', 'prepare_fields');
And finally create the markup for the section and the form field:
function section_cb() { echo '<hr />'; } function somefield_setting() { $options = get_option('plugin_options'); echo '<textarea name="plugin_options[somefield]" cols="40" rows="3">'.$options['somefield'].'</textarea>'; }
That’s it, if cooked well it should look something like this:
The whole code:
function create_theme_options_page() {
add_theme_page(__('Theme Settings'), __('Theme Settings'), 'edit_themes', basename(__FILE__), 'options_page_fn');
}
add_action('admin_menu', 'create_theme_options_page');
function options_page_fn() {
?>
<div class="wrap">
<div class="icon32" id="icon-themes"></div>
<h2>Theme Settings</h2>
<p>Customise your theme using the settings below.</p>
<?php $path = get_template_directory_uri(); ?>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr><td valign="top">
<form method="post" action="options.php" enctype="multipart/form-data">
<?php settings_fields('plugin_options'); ?>
<?php do_settings_sections(__FILE__); ?>
<p class="submit">
<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
</p>
</form>
</td>
</tr></table>
</div>
<?php
}
function prepare_fields() {
register_setting('plugin_options', 'plugin_options');
add_settings_section('main_section', 'Theme Settings', 'section_cb', __FILE__);
add_settings_field('somefield', 'Some Field:', 'somefield_setting', __FILE__, 'main_section');
}
add_action('admin_init', 'prepare_fields');
function section_cb() {
echo '<hr />';
}
function somefield_setting() {
$options = get_option('plugin_options');
echo '<textarea name="plugin_options[somefield]" cols="40" rows="3">'.$options['somefield'].'</textarea>';
}Tags: wordpress, wordpress theme settings, wordpress3, wp, wp3
