Thursday, 22 October 2015

Create you own slider with theme options

Step 1.
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js"></script>

Step 2.
Create a template and place this code, where you want to display the banner.
<div class="slidshow">
<?php if (get_option("slider_enabled")) { ?>   
     <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">    
              <?php if(get_option('slider')!=''){
                $page_data = get_page(get_option('slider'));
                $content = $page_data->post_content;
                echo $page_data->post_content;
                ?>
                   </div>
     </div>          
        <?php }else{?>
                <div style="border:1px solid #ddd; text-align:center; padding:150px 100px 0; height:219px; font-size:14px;">
                    This is the slider. In order to have items here you need to create a page in which to insert the images, simply one after another, setting up the link to point at ( if needed ) and text captions in the Title field. Then select the page as the "slider page" in the Theme Options Page. Make sure your images are 466px x 316px.
    </div>
    <?php }?>           
<?php } ?></div>

Step 3.
create a slider.php in options folder.
<?php
$option_fields[] = $slider = "slider";
$option_fields[] = $slider_enabled = "slider_enabled";
?>
<div class="postbox">
  <h3>Slider</h3>
  <div class="postbox-content">
    <div class="option-row">
      <div class="option-name">
        <label>Use slider</label>
      </div>
      <!--end option-name-->
      <div class="option-value">
        <input class="checkbox" id="<?php echo $slider_enabled; ?>" type="checkbox" name="<?php echo $slider_enabled; ?>" value="true"<?php checked(TRUE, (bool) get_option($slider_enabled)); ?> />
      </div>
      <!--end option-value-->
    </div>
    <div class="option-row">
      <div class="option-name">
        <label>Slider Page</label>
      </div>
      <!--end option-name-->
      <div class="option-value">
        <?php wp_dropdown_pages("name=slider&show_option_none=".__('- Select -')."&selected=" .get_option('slider')); ?>
      </div>
      <!--end option-value-->
    </div>
    <input type="submit" class="button" value="Save Changes" />
  </div>
  <!--end postbox-content-->
</div>
<!--end postbox-->

Step 4.
Insert banner images in page.

No comments:

Post a Comment