Own Theme Setting Page for WP Theme

In wordpress theme development theme setting page is very important to handle a easily. Most of the premium theme have own theme setting page to handle logo, footer text, to use google analytic code. In this tune easily describe how to create and use a theme setting page.

Step-1: Add below function in your theme functions.php file to registering the theme setting page.

//Admin Panel Settings
//Register Settings Function
function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
}

//Add settings to page menu
function add_settings_page() {
add_menu_page( __( 'Theme Settings' ), __( 'Theme Settings' ), 'manage_options', 'settings', 'theme_settings_page');
}

Step-2: Add below function to create save option and create fields.

//Add Actions
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );
 
 
//Start Setting Page
function theme_settings_page() {
 
if ( ! isset( $_REQUEST['updated'] ) )
$_REQUEST['updated'] = false;
 
?>
 
<div>
 
<div id="icon-options-general"></div>
<h2 id="title"><?php _e( 'Theme Settings' ) //your admin panel title ?></h2>
 
<?php
//show saved options message
if ( false !== $_REQUEST['updated'] ) : ?>
<div><p><strong><?php _e( 'Options saved' ); ?></strong></p></div>
<?php endif; ?>
 
<form method="post" action="options.php">
 
<?php settings_fields( 'theme_settings' ); ?>
<?php $options = get_option( 'theme_settings' ); ?>
<table>
 
<!-- Custom Logo -->
<tr valign="top">
<th scope="row"><?php _e( 'Custom Logo' ); ?></th>
<td><input id="theme_settings[custom_logo]" type="text" size="40" name="theme_settings[custom_logo]" value="<?php esc_attr_e( $options['custom_logo'] ); ?>" />
</td>
</tr>
 
 
<!-- 743px X 82px banner -->
<tr valign="top">
<th scope="row"><?php _e( '743px X 82px banner' ); ?></th>
<td><textarea id="theme_settings[banner1]" rows="5" cols="36" name="theme_settings[banner1]"><?php esc_attr_e( $options['banner1'] ); ?></textarea></td>
</tr>
 
<!-- 268px X 268px banner -->
<tr valign="top">
<th scope="row"><?php _e( '268px X 268px banner' ); ?></th>
<td><textarea id="theme_settings[banner2]" rows="5" cols="36" name="theme_settings[banner2]"><?php esc_attr_e( $options['banner2'] ); ?></textarea>
</td>
</tr>
 
<!-- Footer Text -->
<tr valign="top">
<th scope="row"><?php _e( 'Footer Text' ); ?></th>
<td><input id="theme_settings[footer]" type="text" size="40" name="theme_settings[footer]" value="<?php esc_attr_e( $options['footer'] ); ?>" />
</td>
</tr>
 
 
<!-- Google Analytics -->
<tr valign="top">
<th scope="row"><?php _e( 'Google Analytics' ); ?></th>
<td>
<br />
<textarea id="theme_settings[tracking]" name="theme_settings[tracking]" rows="5" cols="36"><?php esc_attr_e( $options['tracking'] ); ?></textarea></td>
</tr>
 
</table>
 
<p><input name="submit" id="submit" value="Save Changes" type="submit"></p>
</form>
 
</div></pre>
<pre><?php
}

Step-3: Add below function in functions.php file to check validation.

//validation
function options_validate( $input ) {
global $select_options, $radio_options;
if ( ! isset( $input['option1'] ) )
$input['option1'] = null;
$input['option1'] = ( $input['option1'] == 1 ? 1 : 0 );
$input['sometext'] = wp_filter_nohtml_kses( $input['sometext'] );
if ( ! isset( $input['radioinput'] ) )
$input['radioinput'] = null;
if ( ! array_key_exists( $input['radioinput'], $radio_options ) )
$input['radioinput'] = null;
$input['sometextarea'] = wp_filter_post_kses( $input['sometextarea'] );
return $input;
}

Step-4: In this step are shown how to uses logo.

<div id="logo" href="<?php echo home_url(); ?>">
<?php
//get theme options
$options = get_option( 'theme_settings' ); ?>
<?php if($options['custom_logo']) { ?>
<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img src="<?php echo $options['custom_logo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
<?php } else { ?>
<h2><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
<?php } ?>
</div>

Step-5: Use below code for advertisement banner. Bannar1 size 743px X 82px banner

<div>
<?php $options = get_option( 'theme_settings' ); ?>
<?php echo $options['banner1']; ?> <!-- 743px X 82px banner -->
</div>

To use widget banner are show below:

<div>
<?php $options = get_option( 'theme_settings' ); ?>
<?php echo $options['banner2']; ?> <!-- 268px X 268px banner -->
</div>

Step-6: In this step are shown how to use footer text input value.

<div id="footer" role="contentinfo">
<?php
//get theme options
$options = get_option( 'theme_settings' ); ?>
<?php if($options['footer']) { ?>
<p><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php echo $options['footer']; ?></a>
<?php } else { ?>
<p>© 2014 <a href="#">Company</a>. All rights reserved.</p>
<?php } ?>
</div>

Step-7: In this step are show analytic code.

<?php
//Google Analytics
$options = get_option( 'theme_settings' );
echo stripslashes($options['tracking']);
?>

Like this you can easily use multiple input fields.