How to create a theme option-menu page to save user values

Question

update: All the following code should go into your functions.php file

Probably the best (and definitely the easiest) way to make a Theme Options Page is to use the WordPress Settings API. One note… everywhere you see THEME_NAME in my code, just replace this with some unique phrase (I use my theme name).

First we need to tell WordPress that we are going to use some theme options. We do this by calling register_setting.

function add_theme_options_init()
{
register_setting( THEME_NAME . '_options_group', THEME_NAME . '_theme_options',  'validate_theme_options' );
}

Next create the actual options page where your options will be set.

function add_theme_options_page()
{

$page_title="Theme Options";
$menu_title="Theme Options";
$cap        = 'manage_options'; // capability required for access to this menu
$slug       = THEME_NAME . '-options';
$callback   = 'draw_theme_options_page';

add_options_page( $page_title, $menu_title, $cap, $slug, $callback );
}

Now add the ‘draw_theme_options_page’ function used as a callback in ‘add_theme_options_page’ that will output the HTML for your Theme Options page. In this example you can see that I add three fields: 1) A Facebook Page URL 2) A Twitter Handle 3) A field to add twitter search terms

function draw_theme_options_page()
{

?>

<div class="wrap">
<h2>Theme Options</h2>
<form method="post" action="options.php">

<?php

    // this should be the same as the second parameter of register_setting() 
    $opt_name = THEME_NAME . '_theme_options'; 

    // adds all the necessary hidden form fields
    settings_fields( THEME_NAME . '_options_group' );

    // get the existing options
    $options = get_option( $opt_name );

                // the options fields
    $opt = array(
        'fb_page' => $opt_name . '[fb_page]',
        'twitter' => $opt_name . '[twitter]',
        'twitter_search' => $opt_name . '[twitter_search]',
    ); 

?>

    <table class="form-table">

        <!-- Facebook Page URL -->
        <tr valign="top"><th scope="row">Facebook Page</th>
            <td><input type="text" name="<?php echo $opt['fb_page'] ?>" value="<?php echo $options['fb_page']; ?>" /></td>
        </tr>

        <!-- Twitter Stuff -->
        <tr valign="top"><th scope="row">Twitter ID</th>
            <td><input type="text" name="<?php echo $opt['twitter'] ?>" value="<?php echo $options['twitter']; ?>" /></td>
        </tr>

        <tr valign="top"><th scope="row">Twitter Search Terms</th>
            <td><input type="text" name="<?php echo $opt['twitter_search'] ?>" value="<?php echo $options['twitter_search']; ?>" /></td>
            <td class="description">Please separate search terms using a comma</td>
        </tr>

    </table>

    <p class="submit">
        <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
    </p>

</form>
</div>

<?php

}

Now we need to add our sanitizing function. This function just ensures that no badly formatted data is saved into our database.

function validate_theme_options( $input ) 
{   
$input['fb_page']        =  wp_filter_nohtml_kses( $input['fb_page'] );
$input['twitter']    =  wp_filter_nohtml_kses( $input['twitter'] );
$input['twitter_search'] =  wp_filter_nohtml_kses( $input['twitter_search'] );

return $input;
}

Now lastly we actually need to tie all these functions into the correct WordPress Hooks so that our Theme Options page is added and works.

add_action( 'admin_init', 'add_theme_options_init' );
add_action( 'admin_menu', 'add_theme_options_page' );

This code is almost verbatim what I use in my own Theme, but you may need to play with it a little bit and check for typos.

Also for more information check out this post on adding Plugin Options

Leave a Comment Cancel reply