Settings API repeater fields

1 comment

1. After you finish with following article, you will be able to add and get options from your admin with only a few lines of code. this will be creating options for a WordPress theme in this article .

   Titan Framework(WordPress option framework)

    Add new theme option
   

   function.php

    if (!class_exists('TitanFramework')) {
           require_once( get_template_directory() . '/titan-framework/titan-framework.php' );
       }
   
       $child_titan = TitanFramework::getInstance('child');
   
       $adminPanel = $child_titan->createAdminPanel(array(
           'name' => 'Child Theme',
           'parent' => 'rtpanel'
               ));
   
       /* Home Tab */
       $homeTab = $adminPanel->createTab(array(
           'name' => __('General Settings', 'Child Theme'),
           'title' => __('Slider', 'Child Theme'),
           'id' => 'slider',
               ));
   
       if (isset($_REQUEST['images_amount'])) {
           $images_amount = $_REQUEST['images_amount'];
           update_option("images_amount", $images_amount);
       } else {
           $images_amount = 2;
       }
   
       if (!get_option("images_amount")) {
           add_option("images_amount", $images_amount);
       } else {
           $images_amount = get_option("images_amount");
       }
   
   
       for ($x = 1; $x <= $images_amount; $x++) {
           $homeTab->createOption(array(
               'name' => 'Choose Slider Image ' . $x,
               'id' => 'slider_img_' . $x,
               'type' => 'upload',
           ));
       }
   
       /**
        * Save Home Settings
        */
       $homeTab->createOption(array(
           'type' => 'save',
       ));
   
       /**
        * Add control for handling no of images inside slider
        */
       function add_image_amount_field() {
           wp_enqueue_script('rtp-theme-options', get_stylesheet_directory_uri() . '/js/rtp-theme-options.js', 'rtp-admin-scripts');
   
           if (!isset($_REQUEST['tab']) || $_REQUEST['tab'] == "slider") {
               global $images_amount;
               echo "<input type='number' id='images_amount' name='images_amount' value='" . $images_amount . "'/>";
           }
       }
   
       add_action("tf_admin_page_table_start_child", "add_image_amount_field");
   

   rtp-theme-options.js

   /**
    * Theme Options Scripts
    */
   
   jQuery(function($) {
   
      $("#images_amount").change(function() {
       var lastIndex = $(".tf-heading").prev().find("input[name^=child_slider_img_]").attr("name").replace('child_slider_img_', '');
       var images_amount = $(this).val();
       if (lastIndex < images_amount) {
           $(".tf-heading").before("<tr valign='top' class='even first'><th scope='row' class='first last'><label for='child_slider_img_" + images_amount + "'>Choose Slider Image " + images_amount + "</label></th><td class='first last second tf-upload'><div class='thumbnail tf-image-preview'></div><input name='child_slider_img_" + images_amount + "' placeholder='' id='child_slider_img_" + images_amount + "' type='hidden' value=''></td></tr>");
       } else {
           $(".tf-heading").prev().remove();
       }
   });
   
   });
   

   Use Theme option

   function rtp_theme_slider() {
   
       // $slider_image = '';
       $slider_pagination = true;
       $slider_html = '<div class="row welcome-note"><div class="large-8 columns slider"><div class="rtp-orbit-slider-row"><ul data-orbit id="rtp-orbit-slider" data-options="timer_speed:2500; bullets:false;">';
       $titan = TitanFramework::getInstance('child');
   
       // The value may be a URL to the image (for the default parameter)
       // or an attachment ID to the selected image.
   
       for ($x = 1; $x <= get_option("images_amount"); $x++) {
           $imageID = $titan->getOption('slider_img_' . $x);
           $imageSrc = $imageID; // For the default value
           if (is_numeric($imageID)) {
               $imageAttachment = wp_get_attachment_image_src($imageID, 'large');
               $imageSrc = $imageAttachment[0];
               $imageDetail = wp_get_attachment($imageID);
           }
   
           $slider_html .= '<li>';
           $slider_html .= '<img src = "' . $imageSrc . '" />';
   
           $slider_html .= "<div class='orbit-caption'>";
           $slider_html .= $imageDetail['caption'];
           $slider_html .="</div>";
   
   
           $slider_html .= '</li>';
           $slider_pagination = true;
       }
   
   
   
   
       $slider_html .= '</ul></div></div>';
   
       echo $slider_html;
   
   
       wp_reset_postdata();
   }
   

Comments are closed.