To Create a Simple WordPress Theme Settings Page

To Create a Simple WordPress Theme Settings Page

Step 1 – Registering the Settings 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 – Adding Actions and Creating Save Option===========

//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' ); ?>



Step 3 – Creating the Fields=============

<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>


Step 4 – Validation============

<?php
}
//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 5 – Calling the Options=============

<?php $options = get_option( 'theme_settings' ); ?>



Step 6 – Adding the Custom 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 7 – Adding Advertisement Banners=======

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

***************Or use it for widget size banner*****************

<?php echo $options['banner2']; ?><!-- 268px X 268px banner -->

Step 8 – Adding the Footer Text==============

<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 9 – Enabling the Google Analytics Code==================

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