Settings API repeater fields

I’m new to the WP settings API, and a fairly novice PHP developer. To get started I followed this great tutorial

• Using Settings API – part 1 — Create a Theme Options Page

and customized it to my needs. and all is working nice and neat.

Unfortunately I could not find online reference to creating user dynamically repeating fields, such as an “add new slide” to a slideshow. I feel like I’m really close, but I can’t figure how to register new content. I’ll be thankful for suggestions or pointer in the right direction.

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