Fields marked with an * are required
options page screenshot

Adding theme options an easy way, to your current wordpress theme

Hello all, this would be another quick tutorial on wordpress. Just stay connected you will learn the process in just about 10 minutes. I hope you are following us on twitter and facebook and you can directly subscribe to all our posts through feedburner, you can find link to all the connections below the post.

With the variety of free themes available, its tough for a new developer to promote his product on net. I always consider wordpress theming an imortant concept, and consider html to wordpress and theme options a tough task for beginners.

Well this post is all about how to create wordpress theme options ? so let us start with that, it must be noted that u must have a sound knowledge about wordpress template tags and u must know how to create HTML forms.

This link explains it all at wordpress codex – http://codex.wordpress.org/Creating_Options_Pages

Note i have changed code from codex while pasting below, one of the function has been do_settings has been deprecated and is replaced with do_settings_fields

<?php
// create custom plugin settings menu
add_action('admin_menu', 'baw_create_menu');
function baw_create_menu() {
//create new top-level menu
 add_menu_page('BAW Plugin Settings', 'BAW Settings', 'administrator', __FILE__, 'baw_settings_page',plugins_url('/images/icon.png', __FILE__));
//call register settings function
 add_action( 'admin_init', 'register_mysettings' );
}
function register_mysettings() {
 //register our settings
 register_setting( 'baw-settings-group', 'new_option_name' );
 register_setting( 'baw-settings-group', 'some_other_option' );
 register_setting( 'baw-settings-group', 'option_etc' );
}
function baw_settings_page() {
?>
<div class="wrap">
<h2>Your Plugin Name</h2>
<form method="post" action="options.php">
 <?php settings_fields( 'baw-settings-group' ); ?>
 <?php do_settings_fields( 'baw-settings-group','' ); ?>
 <table class="form-table">
 <tr valign="top">
 <th scope="row">New Option Name</th>
 <td><input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" /></td>
 </tr>

 <tr valign="top">
 <th scope="row">Some Other Option</th>
 <td><input type="text" name="some_other_option" value="<?php echo get_option('some_other_option'); ?>" /></td>
 </tr>

 <tr valign="top">
 <th scope="row">Options, Etc.</th>
 <td><input type="text" name="option_etc" value="<?php echo get_option('option_etc'); ?>" /></td>
 </tr>
 </table>

 <?php submit_button(); ?>
</form>
</div>
<?php } ?>

This will create a nice theme options page in main wordpress dashboard menu.

This is how your theme options page will look like and below we will discuss how to present the values in our site.

options page screenshot
options page screenshot

Displaying Values in Theme

A HTML coder knows how to display the output in browser. Well if you don’t, i say its easier than anything else, we just need to write the values in our desired page, we can add the value in single.php, page.php, header.php or any other file.

 <?php echo get_option('new_option_name'); ?>

Your comments are welcome.

Other Related Articles

WordPress Online training

Scroll to Top