Tuesday, 20 October 2015

How to create custom theme options

There are 4 steps to complete this task.
Step 1. Create a folder name options in your theme.
Step 2. Create a style.css file in the options folder. Paste the css  from below.
Step 3. Create a file name sociallinks.php in the options folder. Paste the php code  from below.
Step 4. Open your functions.php file and write the below code.
Step 5. Paste the below code in your template file to get the result.

 ********************************************************************************
style.css.
#theme-options #left-column,#theme-options #right-column,.option-name{float:left}#theme-options #left-column .postbox,#theme-options #right-column .postbox{width:380px;margin:0 10px 10px 0;height:auto;padding-bottom:15px}#theme-options{width:900px;margin:20px 0 0}.postbox-content{padding:14px 14px 0;font-size:12px}.option-row{float:left;width:100%;padding:0 0 8px;margin:0 0 8px;border-bottom:1px #ddd dotted}.option-value{float:right}.title-valign{margin:5px 0 0}.subtitle-valign{margin:7px 0 0}.button{margin:6px 0 0 -2px}.option-name label{float:left;margin-top:6px}.postbox p{margin:15px 0 0 15px}.no-line{border-bottom:none}.option-row p{margin:0}.background_pattern_input{width:250px}

 ********************************************************************************
sociallinks.php
<?php
    $option_fields[] = $linkedin = THEME_PREFIX . "linkedin";
    $option_fields[] = $facebook = THEME_PREFIX . "facebook";  
?>
<div class="postbox">
  <h3>Social links</h3>
  <div class="postbox-content">   
    <div class="option-row">
      <div class="option-name">
        <label>Linkedin</label>
      </div>
      <!--end option-name-->
      <div class="option-value">
        <input class="background_pattern_input" id="<?php echo $linkedin; ?>" type="text" name="<?php echo $linkedin; ?>" value="<?php echo get_option($linkedin); ?>" />
      </div>
      <!--end option-value-->
    </div>   
    <div class="option-row">
      <div class="option-name">
        <label>Facebook</label>
      </div>
      <!--end option-name-->
      <div class="option-value">
        <input class="background_pattern_input" id="<?php echo $facebook; ?>" type="text" name="<?php echo $facebook; ?>" value="<?php echo get_option($facebook) ?>" />
      </div>
      <!--end option-value-->
    </div>
    <!--end option-row-->
    <input type="submit" class="button" value="Save Changes" />
  </div>
  <!--end postbox-content-->
</div>
<!--end postbox-->
 ********************************************************************************
functions.php 
function theme_options_admin_init(){
add_theme_page("Ramesh Theme Options","Ramesh Themes Options",10,basename(__FILE__),'theme_options_admin');
}
function theme_options_admin() {
$option_fields = array();
if ( $_GET['updated'] ) echo '<div id="message" class="updated fade"><p>Ramesh Options Saved.</p></div>';echo '<link rel="stylesheet" href="'.get_bloginfo('template_url').'/options/style.css" />';
?>
  <div class="wrap">
    <h2>Ramesh theme Options</h2>
    <div id="message"></div>
    <div class="metabox-holder">
      <form method="post" action="options.php">
        <?php wp_nonce_field('update-options'); ?>
        <div id="theme-options">
          <div id="left-column">                                                     
          <?php include("options/sociallinks.php"); ?>             
          </div>
          <div id="right-column">
          <?php include("options/google-analytics.php"); ?>       
          </div>                 
        </div>       
        <input type="hidden" name="action" value="update" />
        <input type="hidden" name="page_options" value="<?php echo implode(",", $option_fields); ?>" />
      </form>
    </div> 
  </div>
<?php } 
add_action('admin_menu', "theme_options_admin_init");
 ********************************************************************************
Open your template and paste the below lines.
<?php if(get_option(THEME_PREFIX .'facebook')!=""){ ?><?php echo get_option(THEME_PREFIX .'facebook'); ?><?php }?>
<?php if(get_option(THEME_PREFIX.'linkedin')!=""){ ?><?php echo get_option(THEME_PREFIX.'linkedin'); ?><?php } ?>



No comments:

Post a Comment