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


We created the create_form function in the previous tutorial. Now we have two questions in front of us:

  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


First we look at the mynewtheme_add_admin function in functions.php:

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


We have already done the heavy lifting here in our create_form method. Let us now look at the mynewtheme_admin function, which calls this function:

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


The call to create_form adds the buttons for saving and resetting the options. The actual code for saving and resetting is present in the mynewtheme_add_admin function described above. In case of saving, all the options that have a value set for them on the UI are entered into the database. In case of resetting all the existing options are deleted from the database.

Retrieving the options


To retrieve the options, add the following code to all files that need the options. Adding this code is very important, or the options will not be accessible.

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.

  7 Responses to “WP Theme Options: Setting and Retrieving”

Comments (7)
  1. Very useful article about WP Theme Options. I was looking for wp theme development and found this article. waiting for more articles related to wp theme.
    http://www.ferrarivsporsche.com
    http://www.kartplast.com

     
  2. Great article series on building Theme Options page. I appreciate the full description about what the code does and how/why we use it this way.

    Very useful tutorial!

    Thank You!

     
  3. Hi. Thanks for the great tutorial. I have a question.
    How should look this lines of code:

    if ( $_GET['page'] == basename(__FILE__) ) {
    header(Location: themes.php?page=functions.php&saved=true);
    header(Location: themes.php?page=functions.php&.$_REQUEST['formaction'].=true);

    when I get all options array from external files. I mean theme options separeted to several pages using add_submenu_page. Only with this lines I have problem, I’m a bit confused. Please help me.

     
    • Not sure if I understand your question, but you can pass the form name as a parameter too.
      Also, you don’t need two header statements. Just the second one should do.

       
  4. I think I dont understand you! I make sample file for example. I think it’s much better for understand.
    bd.x10.mx/sample.txt

     
    • You have to make your general_options function print the options – currently they only define the array. Check out the Suffusion theme’s admin folder if you want to see a working implementation. You can download the theme from the link on the side.

       
  5. Sayontan, what you think about code that I write? How should look
    function mynewtheme_add_admin() if I have this code. If you think that this code is to complicated I try to make more desriptive code. I need your help, please.