WP Theme Options: Setting and Retrieving

In the previous section I showed you how to create the basic framework of a WordPress Theme Options page. I illustrated how you would display the different options to the administrator.

In this section we will see how to display the options to the administrator, how to save them, how to reset them and how to use them in the themes.

Displaying the Options

1. How do we get a link for our “Theme Options”? In other words, which page we go to to access the options processed by the create_form function?
2. How do we handle things like Save and Reset?

To answer these questions, we will look at a couple of WordPress hooks:

• add_action(‘admin_menu’, ‘mynewtheme_add_admin’);
• add_theme_page($themename.” Theme Options”, “”.$themename.” Theme Options”, ‘edit_themes’, basename(__FILE__), ‘mynewtheme_admin’);

The answer really lies in WordPress’ admin menus. Quoting from the WordPress Codex:

To add an admin menu, you must do three things:
1. Create a function which contains the menu-building code
2. Register the above function using the “admin_menu” action hook
3. Create the HTML output for the page displayed when the menu item is clicked

So here is what we will do:

1. Create a function called mynewtheme_add_admin, with the menu-building code
2. Register mynewtheme_add_admin using the admin_menu hook
3. Create the HTML output (containing create_form) for the options page and invoke it through the menu-building code in the mynewtheme_add_admin function

The Menu Building Code

function mynewtheme_add_admin() {
    global $themename, $shortname, $options, $spawned_options;

    if ( $_GET['page'] == basename(__FILE__) ) {
        if ( 'save' == $_REQUEST['formaction'] ) {
            foreach ($options as $value) {
                if( isset( $_REQUEST[ $value['id'] ] ) ) {
                    update_option( $value['id'], $_REQUEST[ $value['id'] ]  );
                }
                else {
                    delete_option( $value['id'] );
                }
            }

            foreach ($spawned_options as $value) {
                if( isset( $_REQUEST[ $value['id'] ] ) ) {
                    update_option( $value['id'], $_REQUEST[ $value['id'] ]  );
                }
                else {
                    delete_option( $value['id'] );
                }
            }

            header("Location: themes.php?page=functions.php&saved=true");
            die;
        }
        else if('reset_all' == $_REQUEST['formaction']) {
            foreach ($options as $value) {
                delete_option( $value['id'] );
            }

            foreach ($spawned_options as $value) {
                delete_option( $value['id'] );
            }

            header("Location: themes.php?page=functions.php&".$_REQUEST['formaction']."=true");
            die;
        }
    }
    add_theme_page($themename." Theme Options", "".$themename." Theme Options",
        'edit_themes', basename(__FILE__), 'mynewtheme_admin');
}

The above code does two things: it defines routines for saving / resetting options and it makes a call to add_theme_page. This is the menu-building piece. It adds a link to the “Appearance” section of your WordPress themes, called “My New Theme Options”, which, upon clicking, will invoke the mynewtheme_admin function. All you do is add the following line to functions.php and this will invoke mynewtheme_add_admin, which will set the rest of the calls in motion:

add_action('admin_menu', 'mynewtheme_add_admin');

Creating the HTML output page

function mynewtheme_admin() {
    global $themename, $shortname, $options, $spawned_options, $theme_name;

    if ($_REQUEST['saved']) {
        echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved for this page.</strong></p></div>';
    }
    if ($_REQUEST['reset_all']) {
        echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
    }
    ?>
<div class="wrap">
    <h2>Settings for <?php echo $themename; ?></h2>
    <div class="mnt-options">
<?php
    create_form($options);
?>
    </div><!-- mnt-options -->
</div><!-- wrap -->
<?php
} // end function mynewtheme_admin()
?>

The above function will invoke the create_form function upon being called. It will create a <div> wrapper for the content, too.

Saving and Resetting

Retrieving the options

global $options;
foreach ($options as $value) {
    if (get_option($value['id']) === FALSE) {
        $$value['id'] = $value['std'];
    }
    else {
        $$value['id'] = get_option( $value['id'] );
    }
}

This code first attempts to retrieve the value of an option from the database (what you see in the http://your-domain/your-wp-install/wp-admin/options.php file). If it doesn’t find an option in the database, it pulls up the “standard” value from the “std” element in the option array that you have defined in functions.php. Note the lines

$$value['id'] = $value['std'];

and

$$value['id'] = get_option( $value['id'] );

These lines create variables for you, based on the “id” you have provided in the options array. So you will have variables called $mnt_header_background_image, $mnt_body_background_color, $mnt_sidebar_alignment, $mnt_nav_pages and $mnt_custom_analytics_code.

You can now invoke the variables as you would do with any other PHP variables:

<?php
    if (trim($mnt_header_background_image) != "") {
?>
    <img src='<?php echo $mnt_header_background_image;?>'/>
<?php
    }
?>

With this we conclude this section. In the next section we will see how to set up some more bells and whistles and make your theme ready for prime time.