Create An Advanced Theme Options Page in WordPress: Day 3

day-3
Posted in Theme Options Page, Tutorials | Tags:

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.

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]!


12 Responses

Comments

  • Dian says:

    The download txt link is dead

    • Amor says:

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

  • Dian says:

    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

  • radik says:

    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

  • dandy says:

    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.

  • Max says:

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

  • ilan says:

    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

  • ilan says:

    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 ?

Pingbacks

Shares
Share This

Share This

Liked this post? Help us by sharing it!

Shares