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.


Posted by admin in: Wordpress
  • RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!

7 Responses to “add theme options for your wordpress theme”

  1. tattoo says:

    Thanks for sharing, es ist gro脽artig!

  2. Zonia Garske says:

    Yea, these are all great suggestions. I am so with you on this one… Let me see if it works on my blog.

  3. I’ve already bookmark this article and will definitely refer this article to all my close friends and colleagues. Thanks for posting!

  4. That is some inspirational stuff. Never knew that opinions could be this varied. Thanks for all the enthusiasm to offer such helpful information here.

  5. Nice to see you blogging about this good topic.

  6. To be honest, I don鈥檛 speak great English, but I believe I understood most of this. It would be good if it was in my language also. Great site anyway!

  7. I am occupying with this theme and I think I will benefit from this message. Thank you extremely significantly

Leave a Reply


valid-xhtml10 css2.1 valid © BrightYourSite.com All Right Reaserved