Custom Options Page

This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.

Update: Here’s a tutorial from Sitepoint that’s even better than my post – Creating Custom Options Pages in WordPress.

One of my clients needed a WordPress theme that would be reused by many realtors in different regions.  They wanted the realtors to be able to customize the look and feel of their sites without compromising the core functionality that they were hiring me to build. Thesis, because of its extensive Design Options, was the perfect choice. (Here’s two examples of the theme in action).

But there were a few parts of the design that they couldn’t customize using the Design Options, and I didn’t want the client to have to edit the code just for this. So I built an additional page called More Options that appears inside the Thesis Options.

I’ll show you how to make that page with two options in it, and how to pull the data from those options into your theme.

Building the More Options page

I’ll describe what we’re doing verbally then give you the code to use. The code is commented which should help you follow along.

  • First we add a new page to the admin menu. we’re using the add_submenu_page() function to add it as a subpage to the Thesis Options page. If you’re not using Thesis, you’ll want to use the add_theme_page() function that’s commented out.
  • We create a variable called $tt_hidden_field_name that will tell us if the form has been changed.
  • We create three variables for each option. The first one ($tt_twitter_option) holds the name of that option in the database (where we’re storing the data). The second one ($tt_data_field_name), holds the data that was put into the form on our More Options page. The third one ($tt_twitter_value) pulls the current value of that option out of the database.
  • If the hidden field is set to “yes,” meaning the form has been edited, update the database with the current values on the page, and display the text “Your changes have been saved.”
  • Now we get to the actual form. For each option, we have the description text and an input field with the default value set to the current value in the database.
  • When you click the “Update Options” button, it will set all the data fields to whatever the current value is, and set the hidden field to “yes”.

Here’s the code to put in your custom_functions.php file:
[php]/* More Options in wp-admin */
add_action(‘admin_menu’, ‘thesis_custom_add_page’); // Moves the add page function in the WP dashboard admin menu via WP hook

function thesis_custom_add_page() { // Adds our test page to Thesis menu
add_submenu_page(‘thesis-options’,__(‘More Options’, ‘thesis’), __(‘More Options’, ‘thesis’), ‘edit_themes’, ‘more-options’, ‘more_options_admin’);
// add_theme_page(‘More Options’, ‘More Options’, ‘edit_themes’, ‘more-options’, ‘more_options_admin’);
}

function more_options_admin() { // Our function (as seen above) that runs when the page is accessed

$tt_hidden_field_name = ‘tt_submit_hidden’;

$tt_twitter_option = ‘tt_twitter_name’; // Option name (in db)
$tt_data_field_name = ‘tt_twitter_field’;</code><code>

$fa_facebook_option = ‘fa_facebook_name’;
$fa_data_field_name = ‘fa_facebook_field’;

$tt_twitter_value = get_option($tt_twitter_option); // Read in existing option value from database
$fa_facebook_value = get_option($fa_facebook_option);

if( $_POST[ $tt_hidden_field_name ] == ‘yes’ ) { // If form has been sumbitted
$tt_twitter_value = $_POST[ $tt_data_field_name ]; // Read value from post
$fa_facebook_value = $_POST[ $fa_data_field_name ];

update_option($tt_twitter_option, $tt_twitter_value); // Save value in database
update_option($fa_facebook_option, $fa_facebook_value);
?>
<div><p><strong>Your changes have been saved</strong></p></div>
<?php
}
// Main screen:
echo ‘<div>’;
echo "<h2>More Options</h2>"; // header
?>
<form name="form1" method="post" action="<?php echo str_replace( ‘%7E’, ‘~’, $_SERVER[‘REQUEST_URI’]); ?>">
<input type="hidden" name="<?php echo $tt_hidden_field_name; ?>" value="yes">

<p>Twitter username:
<input type="text" name="<?php echo $tt_data_field_name; ?>" value="<?php echo $tt_twitter_value; ?>" size="25">
</p>

<p>Facebook URL: http://
<input type="text" name="<?php echo $fa_data_field_name; ?>" value="<?php echo $fa_facebook_value;?>" size="25">
</p>
<p>
<input type="submit" name="Submit" value="Update Options" />
</p>
</form>
</div>
<?php
}[/php]

Using the More Options

Now that you have an options page, you’re going to want to use the data in your site. Since our fields on the options page asked for a Twitter username and Facebook URL, I’ll show you how to make a box on your page that shows a twitter and facebook icon if that value is set.

[php]<div id="social">
<?php
$twitter = get_option(‘tt_twitter_name’);
$facebook = get_option(‘fa_facebook_name’);
?>
<p align="center"><?php if($twitter){?><a href="http://www.twitter.com/<?php echo $twitter;?>"><img src="<?php bloginfo(‘template_url’);?>/custom/images/twitter.jpg" /></a><?php } if($facebook){?> <a href="http://<?php echo $facebook;?>"><img src="<?php bloginfo(‘template_url’);?>/custom/images/facebook.jpg" /></a><?php } ?></p>
</div>[/php]

What it’s doing is setting the variables $twitter and $facebook equal to the value in the database, and if those values exist, create a link and show the icon.

While that’s a rather simple use of the More Options page, I’m sure you can come up with some really interesting uses. Please post a comment sharing what you’re using the extra option page for!

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Mohammad says

    August 5, 2010 at 12:58 am

    I’m using this code to implement google maps on our site,

    I think you’re missing an opening <?php from the above code.

    and it didn't work for me but I'm still working on that.

  2. thesis says

    August 20, 2010 at 4:40 am

    it’s good to see this information in your post, i was looking the same but there was not any proper resource.

  3. Trisha says

    September 12, 2010 at 3:41 am

    Bill,
    I thought I’d never get this. You explained it so well, now I can do options for thesis!!! I mean, its REALLY clear now and so much easier than the old way. I cant thank you enough!

    A few things for anyone stuck on this. The beginning of the code does in fact need an opening <? php

    also, when outputting the data, the seems to be messing things up. when I ommited that bit of code and just used it worked.

    one last thing. if your custom_functions.php is starting to get bulky, you can move this admin code to another file. Then just add this in custom_functions:
    require_once(TEMPLATEPATH . ‘/custom/admin.php’);

    Again THANK YOU, I have so much to do now! and 17 more tips to go through! You have a subscriber for life.

    Trisha

  4. Trisha says

    September 12, 2010 at 3:43 am

    darn, code didnt show up….
    also, when outputting the data, the seems to be messing things up. when I ommited that bit of code and just used it worked.

  5. Sig Kappel says

    October 26, 2010 at 5:09 am

    wicked dude!!
    Just what I was looking for, this is going to help out my clients alot..
    I owe you a beer or 2. 🙂