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

Question

I've created a wordpress theme and new in wordpress development I want to create option page to take some values from user and I've little bit done with that but confused where and how to save that data I want to create user interface in short.

Answer 1

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

Answer 2

If you don't want to be bothered with coding the entire theme options, Options Framework Plugin can probably help you immensely. You just install this plugin and tweak the settings (what kind of user input you want to add, and so on). It will do the saving/retrieving/UI display tasks for you.

There's also a theme version for that plugin, which you can include into your theme so you don't have to rely on using a plugin.

Answer 3

Here is a good article from the Wordpress theme developers, I am literally following it right now.

Answer 4

Otto has a really good blog post about the WordPress settings API. It does a lot of the work for you when it comes to saving values to the database. Here's the link: WordPress Settings API Tutorial

Answer 5

If you like to, you can use this plugin http://wordpress.org/extend/plugins/option-tree/