How to create a WordPress theme option page

This tutorial will show you how to create a simple WordPress theme option page.

First, you will need a sample theme. Create a new folder in wp-contentthemes. Name it 'test' (or, whatever you like). Create three files in the 'test' folder: index.php, style.css and functions.php. Now, you should choose the 'test' theme as the current theme.

Second, open the functions.php file in your favourite text editor, and paste the following php code.

<?php 
add_action('admin_menu', 'add_welcome_interface'); 
function add_welcome_interface() 
{ 
    /* add_theme_page( page_title, menu_title, 
    access_level/capability, file, [function]); */ 
    
    add_theme_page('Your Theme Name', 'Your Theme Options', 
    'edit_themes', basename(__FILE__), 'editoptions'); 
} 

function editoptions() { 
?> 

<div class=“wrap">
    <h2>Your Theme Name</h2>
    <form action=“options.php" method=“post">
    
    <?php wp_nonce_field('update-options'); ?>
    
    <table class=“form-table">
    <tbody>
        <tr valign=“top">
            <th scope=“row">First Option</th>
            <td><input value=“<?php echo get_option('first_option'); ?>;" 
                name=“first_option"></td>
        </tr>
        <tr valign=“top">
            <th scope=“row">Second Option</th>
            <td><input value=<?php echo get_option('second_option'); ?>" 
                name=“second_option"></td>
        </tr>
    </tbody>
    </table>
    
    <input type=“hidden" value=“update" name=“action">
    <input type="hidden" value="first_option,second_option" 
        name="page_options">
    
    <p class=“submit">
    <input type=“submit" value=“<?php _e('Save Changes') ?>“ 
        name=“Submit">
    </p>
    
    </form>
</div>

<?php  }  ?>

Finally, you can call the options that you save in index.php file, using the get_option() function.

<?php
echo get_option(‘first_option’);
echo get_option(’second_option’);
?>

Function References:

1. http://codex.wordpress.org/Function_Reference/add_action


2. http://codex.wordpress.org/Function_Reference/get_option