Learn an Easy Way To Create WordPress Theme Settings Page

WordPress is a powerful and extremely popular CMS around the world. The platform is lauded for its vast collection of fantastic themes, which not only revamp your website appearance, but also make it truly functional. While playing around themes in WordPress, you must have encountered theme options or settings page. The theme options page can be found under the Appearance menu or in the Administrator menu. The main purpose of these settings is to allow users an ability to change some of the settings within the theme. Although, there are some free themes that come with theme settings page, but the majority of Premium templates have this kind of options that enable you to change of the fonts, logo, color, background Google analytics code or anything that helps you extend your theme’s ability.

In this tutorial, I will explain you the entire process of creating a simple theme options page to give your site ability to provide a unique experience to its visitors.

1. Deciding upon the theme and settings needed

To create a useful theme settings page, the first thing you need to do is decide upon the things that you want to change. Every new setting that you add to the WordPress admin menus increases the interface complexity level, so make sure you choose those options which can changed easily and more frequently.

Another thing to consider is “ who will change these settings? ” If the user knows the ins and outs of PHP and WordPress, it makes some sense that he or she might be comfortable integrating Google analytic code. Keeping the things simple and comprehensible will reduce the changes of getting perplexed.

2. Preparing the grounds

Before you start creating the theme settings page, it’s important to create the theme itself first. In WordPress, a theme is a collection of template files and images, that informs visitor’s browser about how your website will look like. Your theme can consist of the following template files:

  • style.css
  • sidebar.php
  • screenshots (png file)
  • index.php
  • header.php
  • functions.php
  • footer.php
  • js folder
  • images folder
  • fonts folder
  • css folder

3. Installing and activating the theme

Once you finish downloading the theme file, you have two ways to install it- you can either do it manually or simply choose to install theme option in the WordPress admin area. If you are not familiar with the process of installing WordPress theme, you might find this article useful for you.
After this, start activating the theme. For this go to Appearance-> Theme and then activate.

4. Configure Your Settings Page

In this step, we need to register the options that we are going to use. We will do this with the help of functions.php file. Open this file and insert the following code at the bottom of this file.

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

The above function depicts a function called theme_settings_init which consists a menu-blocking code. This is the point when we need to register our option settings page with the help of admin_menu_page action hook.

5. Actions and Save Options

Once the theme settings page has been registered, it’s time add some more actions, codes along with the WordPress actions and save button.

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

6. Adding the fields you need

The next step is to add fields, or we call inputs, for our theme options page using the add_settings_field function. The required input will be the simple text boxes and areas coupled with the theme name options.

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

We have created the following fields using the code above:

  • Custom Logo Url (Text box)
  • 743px X 82px banner (Text Area)
  • 268px X 268px banner (Text Area)
  • Footer Text (Text box)
  • Google Analytics (Text Area)

It’s completely a matter of choice when it comes to adding a number of fields. All you need is simply add the desired field, give it a unique ID, and name using the php_option code.

7. Validating fields

Fields can be validated using the wp_filter_nohtml_kses and wp_filter_post_kses.

<?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; 
} 
?>

8. Calling the Options

Merely creating the function isn’t enough, you need to enable them as well to make them functional. For this, the following code can be added at the top of each php ‘options’ code.

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

9. Add a Custom Logo

Custom logo can be added with the help of header.php file and the below mentioned code.

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

10. Google Analytics

To enable Google analytics, open your header.php file again and insert the code below:

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

The Output

Easy Way To Create WordPress Theme Settings Page

Hopefully, you find the tutorial helpful and will bookmark it for the future.

Tags: Create a Settings Page For Your WordPress Theme, How To Create A Theme Options Page For WordPress, Creating a custom WordPress theme options page, How to create a WordPress Theme Options Page, A Sample WordPress Theme Options Page, Creating Custom Options Pages in WordPress, wordpress theme options panel tutorial, create wordpress theme options page

Author Bio:

This post is written by Samuel Dawson, working as front-end developer for Designs2HTML Ltd. a leading PSD to HTML conversion company and he shares concrete information, latest trend & tips on front-end development technologies.


About Admin

Hi I am Md. Masum Billah Contributor of this website. I always like to share various things with other. In this website I am sharing web design related tips and tricks, necessary web development tools, source codes for beginner and advance web developer. You may join with us to help other who want to learn web design and development. Thank you for stay with.

Leave a Reply

Your email address will not be published. Required fields are marked *