Settings API repeater fields

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();
}