Skip to content

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.

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

Yay! 🎉 You made it to the end of the article!
Alex Denning

11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Simrandeep Singh
September 25, 2010 3:52 pm

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 ?

ilan
August 31, 2010 3:02 pm

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

ilan
August 31, 2010 2:59 pm

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

Max
August 9, 2010 3:00 am

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

Create An Advanced Theme Options Page in WordPress: Day 4 | WPShout.com
April 11, 2010 8:26 pm

[…] Theme Options Page in WordPress is here!Day 1: IntroductionDay 2: Creating the different optionsDay 3: Styling the options pageDay 4: Implementing the options into a themeToday comes the exciting implementation of our options […]

dandy
March 21, 2010 6:59 am

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.

Dian
January 11, 2010 3:56 pm

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

Dian
January 11, 2010 7:51 am

The download txt link is dead

Amor
January 23, 2010 1:27 pm
Reply to  Dian

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

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

11
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...