Create An Advanced Theme Options Page in WordPress: Day 3

Day three of [c] is here! Today we’ll be taking the options we made yesterday, styling them and creating the actual page that displays them in the WordPress backend.

• Day 1: Introduction
• Day 2: Creating the different options
• Day 3: Styling the options page
• Day 4: Implementing the options into a theme

Creating the options page

The first thing we’re going to do today is create the actual page that shows the options, which we can do with the following code, pasted straight after where we left off yesterday, in the functions.php file:

	);

function mytheme_add_admin() {

    global $themename, $shortname, $options;

    if ( $_GET['page'] == basename(__FILE__) ) {

        if ( 'save' == $_REQUEST['action'] ) {

                foreach ($options as $value) {
                    update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

                foreach ($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=theme-options.php&saved=true");
                die;

        } else if( 'reset' == $_REQUEST['action'] ) {

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

            header("Location: themes.php?page=theme-options.php&reset=true");
            die;

        } else if ( 'reset_widgets' == $_REQUEST['action'] ) {
            $null = null;
            update_option('sidebars_widgets',$null);
            header("Location: themes.php?page=theme-options.php&reset=true");
            die;
        }
    }

    add_theme_page($themename." Options", "Bibliteca Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');

}

function mytheme_admin() {

    global $themename, $shortname, $options;

    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('settings saved.','thematic').'</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('settings reset.','thematic').'</strong></p></div>';
    if ( $_REQUEST['reset_widgets'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('widgets reset.','thematic').'</strong></p></div>';

?>

Styling the elements

The options page is actually just a table, with each element a new row, split into columns, so first, we need to start the table:

<div="wrap">

<?php if ( function_exists('screen_icon') ) screen_icon(); ?>

<h2><?php echo $themename; ?> Options</h2>

<form method="post" action="">

<table class="form-table">

<?php foreach ($options as $value) {

Next, we’re going to style each element, one by one. As I explained yesterday, we can do this once and the PHP will apply the styling multiple times.