add theme options for your wordpress theme

What’s this can do ?

Are you want to add featured posts , easy to manage the ads on your wordpress site or show a special category posts on your home page ? Add theme options for your wordpress theme ,you will know it’s so easy !!!

Prepare

First , we should know two important wordpress tags : add_theme_page , add_action and two wordpress api : update_option , delete_option

add_theme_page : add_theme_page( page_title, menu_title, capability, handle, [function]);

page_title

Set the page title of the options page

menu_title

The anchor text of the menu .

capability

The minimum capability required to display and use this menu page. Go to wordpress capability page for more details .

handle/file

If the function parameter is omitted, this should be the PHP file that handles the display of the menu page content. Otherwise, and more commonly, it will be a unique “handle” for the page. e.g. “my-awesome-plugin-settings”

function

The function that displays the options page content for the menu page.

add_action : add_action( $tag, $function_to_add, $priority, $accepted_args );

$tag

(required) The name of the action you wish to hook onto ,check Plugin API/Action Reference for the action list .

$function_to_add

(required) The name of the function you wish to be called .

$priority

(optional) Default: 10 this define the function execute order , lower number first . eg. if a function set priority to 5 that’s means this function run earlier than which priority is 10

$accepted_args

(optional) Default: 1 This define the arguments your function takes.

update_option : update_option( $option_name, $newvalue );
this use to store the option value .
delete_option : delete_option($name);
delete the name of the option .
get_option :get_option( $name, $default )
get the option value .

Reference : Function Reference/update option

Add to the theme

From the above knowledge , we can easy to add theme options for our wordpress site now . First , let’s do a ‘hello world’ demo . add footer links manage option for the last free wordpress theme ,you may notice the footer links home ,contact …. those are hand-coded in the theme . so now we need add it to the theme options in order to make it editable via admin panel .

Save following codes in the functions.php in the wordpress theme .

<?php 
function bright_addThemePage() {
   $ThemeName=get_current_theme();
    if ( $_GET['page'] == basename(__FILE__) ) {	
	    // save settings
		if ( 'save' == $_REQUEST['action'] ) { 		
			check_admin_referer( 'save-theme-properties' );  
			update_option( 'bright_foot', stripslashes($_REQUEST[ 'bright_foot'] ));	 
			// goto theme edit page
			header("Location: themes.php?page=functions.php&saved=true");
			die;
  		// reset settings
		} else if( 'reset' == $_REQUEST['action'] ) { 
			delete_option( 'bright_foot');		 
			// goto theme edit page
			header("Location: themes.php?page=functions.php&reset=true");
			die;
		}
	}
	add_theme_page( $ThemeName . ' Theme Options', $ThemeName . ' Options', 'edit_themes', basename(__FILE__), 'bright_themePage' );
}
 
function bright_themePage() 
{
       $ThemeName=get_current_theme(); 
	if ( $_REQUEST[ 'saved' ] ) echo '<div id="message" class="updated fade"><p><strong>Settings saved.</strong></p></div>';
	if ( $_REQUEST[ 'reset' ] ) echo '<div id="message" class="updated fade"><p><strong>Settings reset.</strong></p></div>';
?>
 <div class="wrap"> 
		<h2 style="border-bottom:none;"><?php echo $ThemeName; ?> Theme Configuration</h2> 
		<form method="post"> 
			<?php if ( function_exists('wp_nonce_field') ) { wp_nonce_field( 'save-theme-properties' ); } ?> 	<div style="width:575px;float:left;padding-bottom:30px;">
		  <h3>Footer Links Management</h3>
				<p>Manage footer links here.</p> 
				<table width="100%" cellspacing="2" cellpadding="5" class="editform form-table"> 
				<tr><th>  footer links </th>
				<td style='width:80%'> <textarea name="bright_foot" id="bright_foot" style="width: 100%; height: 10em;" class="code"><?php echo get_settings("bright_foot") ; ?></textarea>  </td>
				</tr> 
				</table>		 
				<input type="hidden" name="action" value="save" /> 
				 <p class="submit" align="right"><input name="save" type="submit" value="Save Settings" /></p>
				</form>
				<br style="clear:both;" />	
			</div>
 
<?php	
}//end of themepage function
  add_action( 'admin_menu', 'bright_addThemePage' );
  ?>

Now , we need change the footer.php

<div id="footer">
   <?=get_option( "bright_foot" )?>
    <h1> &copy; 2009 www.brightyoursite.com All Rights Reserved.</h1>
  </div>
</div>  
<?php wp_footer(); ?>
</body>
</html>

Take a notice with the delete_option( ‘bright_foot’) , update_option( ‘bright_foot’, stripslashes($_REQUEST[ 'bright_foot'] )) , get_option( “bright_foot” ) ‘bright_foot’ that’s the key of option , it must the same . $_REQUEST[ 'bright_foot'] <textarea name=”bright_foot”> also the same .

More applications

From the hello world demo, we can easy to add more options and change it to manage advertisement , we also can use this to add specific category to home page as featured posts , for instance :

<div id="featured">
<?php
wp_reset_query();
$count = get_option('theme_featured_count');
query_posts('showposts=' . $count . '&cat=' . get_cat_ID(get_option('featured')));
if (have_posts()) : while (have_posts()) : the_post(); 
?>
<div class="post">
<div class="featured-body"> 
<div class="featured-text"><h1><a href="<?php the_permalink() ?>" class="featured-title"><?php the_title(); ?></a></h1>
<p><?php excerpt('30'); ?></p>
</div>
</div>
</div><!-- END Post -->
 
<?php endwhile; endif; wp_reset_query(); ?>
</div><!-- END featured -->

put those in your index.php also add two more options in the function.php theme_featured_count and featured . You also can customize it do add a slider images.

Download

Theme option hello world demo

, I'm a freelancer and available now,if need help just contact me without hesitation.