Create An Advanced Theme Options Page in WordPress: Day 3

day-3
Tell us what you think of your hosting for the 2014 WordPress hosting survey!

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
  • download-2

    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.

    Styling the small text area

    This code must go underneath the code above, otherwise you’ll get lots of errors! As you can see, it’s just a table, echoing the values we entered yesterday:

    switch ( $value['type'] ) {
    		case 'text':
    		?>
    		<tr valign="top">
    			<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo __($value['name'],'thematic'); ?></label></th>
    			<td>
    				<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_option( $value['id'] ) != "") { echo get_option( $value['id'] ); } else { echo $value['std']; } ?>" />
    				<?php echo __($value['desc'],'thematic'); ?>
    
    			</td>
    		</tr>

    Styling the large text area

    This too goes underneath the code above, and is much the same idea as before.

    <?php
    		break;
    
    		case 'textarea':
    		$ta_options = $value['options'];
    		?>
    		<tr valign="top">
    			<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo __($value['name'],'thematic'); ?></label></th>
    			<td><textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="<?php echo $ta_options['rows']; ?>"><?php
    				if( get_option($value['id']) != "") {
    						echo __(stripslashes(get_option($value['id'])),'thematic');
    					}else{
    						echo __($value['std'],'thematic');
    				}?></textarea><br /><?php echo __($value['desc'],'thematic'); ?></td>
    		</tr>

    Styling the title

    The title is breaking from the norm here by ending the table, displaying the title’s description and then restarting the table so the rest of the elements display fine:

    <?php
    		break;
    
    		case 'nothing':
    		$ta_options = $value['options'];
    		?>
    		</table>
    			<?php echo __($value['desc'],'thematic'); ?>
    		<table class="form-table">

    Styling the checkbox

    <?php
    		break;
    
    		case 'radio':
    		?>
    		<tr valign="top">
    			<th scope="row"><?php echo __($value['name'],'thematic'); ?></th>
    			<td>
    				<?php foreach ($value['options'] as $key=>$option) {
    				$radio_setting = get_option($value['id']);
    				if($radio_setting != ''){
    					if ($key == get_option($value['id']) ) {
    						$checked = "checked=\"checked\"";
    						} else {
    							$checked = "";
    						}
    				}else{
    					if($key == $value['std']){
    						$checked = "checked=\"checked\"";
    					}else{
    						$checked = "";
    					}
    				}?>
    				<input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'] . $key; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label for="<?php echo $value['id'] . $key; ?>"><?php echo $option; ?></label><br />
    				<?php } ?>
    			</td>
    		</tr>
    		<?php
    		break;
    
    		case 'checkbox':
    		?>
    		<tr valign="top">
    			<th scope="row"><?php echo __($value['name'],'thematic'); ?></th>
    			<td>
    				<?php
    					if(get_option($value['id'])){
    						$checked = "checked=\"checked\"";
    					}else{
    						$checked = "";
    					}
    				?>
    				<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
    				<label for="<?php echo $value['id']; ?>"><?php echo __($value['desc'],'thematic'); ?></label>
    			</td>
    		</tr>

    Ending the options page

    <?php
    		break;
    
    		default:
    
    		break;
    	}
    }
    ?>
    
    	</table>
    
    	<p class="submit">
    		<input name="save" type="submit" value="<?php _e('Save changes','thematic'); ?>" />
    		<input type="hidden" name="action" value="save" />
    	</p>
    </form>
    <form method="post" action="">
    	<p class="submit">
    		<input name="reset" type="submit" value="<?php _e('Reset','thematic'); ?>" />
    		<input type="hidden" name="action" value="reset" />
    	</p>
    </form>
    
    <p>Biblioteca theme.</p>
    </div>
    <?php
    }
    
    add_action('admin_menu' , 'mytheme_add_admin'); 
    
    ?>

    With all the code above in our functions.php file, we can end the table, add save and reset buttons and close up all the loose ends. With that, we’re done creating the options page itself. All that is left to do is merge the functions-options.php and functions.php file. Make sure you first create a backup of the original functions.php file before merging the two files. With the two files merged, refresh the WordPress backend and you should see your new options page! If you’re getting any errors, make sure you’ve put the code outside closing

    ?>

    and wrapped your own code in

    <?php and ?>

    . If that doesn’t fix it, restore the original file and leave a comment with your problem, with as much detail as possible.

    Wrapping up

    If you haven’t already noticed, the download that includes all of the code used in today’s tutorial is available at the top of the page, to save you copying and pasting it. Tomorrow we’ve got the exciting job of implementing all of the options we’ve created, and until then, why not [f], leave a comment and [s]!

    Found this helpful? You'll find us helpful!

    WPShout is published by a full-service WordPress-loving constultancy, Press Up. Get in touch with us about your project or business idea, we're knowledgable and friendly.

    About the author

    Hello, I'm Alex! I started WPShout in 2009, just before my 16th birthday. Get in touch with me, I'd love to chat. You should also follow me on Twitter :)

    12 Comments

    • The download txt link is dead

      • Hi! I was able to download it. There’s just a missing ‘n’ in the link. It should have been downloads not dowloads.

    • i’m sorry to bother you again but some of the code that you use (from thematic framework i guess)

      is for translating purpose, you should rename it with your own theme

    • The download link is error caused dowload . Its supposed download

      AH.. never mind here the link

      http://wpshout.com/downloads/theme-options-day-3.txt

      Btw. Nice tutorial

    • I still cant get the merge files part. Are you merging the two files function-options.php and functions.php using the PHP include statement.

      like adding include(‘function-options.php’); at the end of functions.php file?

      Thank You.

    • Hi, how are you meant to merge the function-options.php file and the funcitons.php?

    • hello,

      thank you very much for really good and useful tutorial :)
      i have one problem though:
      i’ve managed to add the option page with no problem, and it work fine – except of 1 thing:
      when i press “save changes” – i get a blank page.
      i don’t get back to the same page with a saying that “changes saved” or something – i just get blank page.
      it does save the content i’ve put inside the fields and all , so it does work – just this blank page annoys me.
      any idea why it happens, and how i can solve it?

      thanks in advance,
      ilan

    • i forgot to mention that i’ve put the code inside functions.php via the include function, and i have a functions-options.php file which has the code in it.

      i’ve checked if that’s the problem, but it didn’t make any different.
      is it also becoz of that? is it better to put the code straight into functions.php?

      thanks again,
      ilan

    • I get the following error when I change the WP_DEBUG to true in

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

      Notice: Undefined index: page in C:\wamp\www\wordpress\wp-content\themes\wptheme\includes\theme-options.php on line 214

      Any solution for it ?