1stwebdesigner

How to Create a Simple WordPress Settings Page

Posted: 12 Aug 2014 06:00 AM PDT

If you are a WordPress user, you might be familiar with the theme settings page. This page can be found under the Appearance Menu or in the Administrator Menu itself. Basically it allows the administrator to change specific settings like logo, text color, Google Analytics code and so on. Perhaps one of the first things you do is tweak that WordPress settings page, for sure.

Though there are some free WordPress templates that have theme theme settings page, a Premium WordPress theme commonly have this kind of options.

In today’s tutorial, you will learn how can to create a simple theme options page for your WordPress theme.

Resources You Need to Complete This Tutorial

WordPress installation with version 3.5 or above
Bots Custom WordPress Theme (custom theme by Sam)
Basic Knowledge about WordPress Codex

Step 1 – Preparing the files

Before creating the theme settings page, you need to prepare the theme itself. For this example, a simple WordPress theme was created made with Bootstrap 3. You can download it here. It is named bots WordPress theme. Inside you should see the following files:

Bots

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

Step 2 – Installing and Activating the Theme

After downloading the theme file, you need to install it, either manually or using the install theme option at the backend. If you don’t know how to install a theme, then, this article might be helpful.

Next, it's time to activate the theme. Go to Appearance -> Themes and activate the bots WordPress theme.

activate

Step 3 – Registering the Settings Page

Now that everything set up, open up the functions.php file and copy the code below to the very bottom part of the 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');  }

In the code above, a function theme_settings_init that contains the menu-building code was created. Next, register it using the admin_menu_page action hook.

Step 4 – Adding Actions and Creating Save Option

Now that you have successfully registered the theme settings page, add some more codes, which includes the adding of WordPress actions and creating the save options.

  //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 5 – Creating the Fields

Now, add the fields you need for the theme settings page. This will include the simple text boxes and text areas with their respected 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>

In the codes above, notice the following fields were created:

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 easy to add more fields using the table markup. Just add your preferred field and give it a unique ID and name to be used later on the php get_option code.

Step 6 – Validation

Now you need to validate the fields using the wp_filter_nohtml_kses and wp_filter_post_kses to strip and sanitize of the HTML in the content.

  <?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 7 – Calling the Options

To enable all the functions you just created, you need to add the following codes at the top of each php options codes.

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

Step 8 – Adding the Custom Logo

To add a custom logo, you need to open our header.php file and add the following code below. Notice that you need to create an if statement to check if the logo image was not set or the default blog title will be displayed.

  <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 9 – Adding Advertisement Banners

For the advertisement banners, you have 2 choices: the 743px X 82px banner and 268px X 268px banner. For the 743px X 82px banner, add the following code on the index.php file above the article roll excerpt.

  <div>  <?php $options = get_option( 'theme_settings' ); ?>  <?php echo $options['banner1']; ?>  </div>

Now for our 268px X 268px banner, the following code above the sidebar call function.

  <?php echo $options['banner2']; ?>

Step 10 – Adding the Footer Text

Adding the footer text is just like the custom logo codes; however, this time, you need to check for text, not the image. Open up the footer.php file and copy the code below inside the div with a class col-md-12.

  <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="http://www.1stwebdesigner.com/">1stwebdesigner</a>. All rights reserved.</p>  <?php } ?>  </div>

Step 10 – Enabling the Google Analytics Code

To enable the Google Analytics code, you need to open the header.php file and copy the code below the js files links.

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

Our Finished Product

test

Conclusion

And that's really it! That's is how you can create your own theme settings page. Although you have done this manually, there are plenty of WordPress Settings library you can use to create more advance and dynamic settings page like WordPress Settings Library by Laura Dobkins.

Let me know about your thoughts regarding this tutorial on the comment Section. See you again next time!

Web Design Academy

Tuesday, August 12, 2014

1stwebdesigner

1stwebdesigner

Resources You Need to Complete This Tutorial

Step 1 – Preparing the files

Step 2 – Installing and Activating the Theme

Step 3 – Registering the Settings Page

Step 4 – Adding Actions and Creating Save Option

Step 5 – Creating the Fields

Step 6 – Validation

Step 7 – Calling the Options

Step 8 – Adding the Custom Logo

Step 9 – Adding Advertisement Banners

Step 10 – Adding the Footer Text

Step 10 – Enabling the Google Analytics Code

Our Finished Product

Conclusion

No comments:

Post a Comment