0

I'm trying to find a way to add repeatable fields inside a custom admin page that I've made.

Code:

  /*WordPress Menus API.*/
    function add_new_menu_items()
    {
        add_menu_page(
            "Theme Options", 
            "Theme Options",
            "manage_options",
            "theme-options", 
            "theme_options_page", 
            "", 
            100 
        );

    }

    function theme_options_page()
    {
        ?>
        <?php settings_errors(); ?>
            <div class="wrap">
            <div id="icon-options-general" class="icon32"></div>
            <h1>Theme Options</h1>
            <form method="post" action="options.php">
                <?php

                    settings_fields("header_section");

                    do_settings_sections("theme-options");

                    submit_button();

                ?>         
            </form>
        </div>
        <?php
    }

    add_action("admin_menu", "add_new_menu_items");



    function display_options()
    {
        add_settings_section("header_section", "Header Options", "display_header_options_content", "theme-options");

        add_settings_field("header_logo", "Logo Url", "display_logo_form_element", "theme-options", "header_section");
        add_settings_field("advertising_code", "Ads Code", "display_ads_form_element", "theme-options", "header_section");

        register_setting("header_section", "header_logo");
        register_setting("header_section", "advertising_code");
    }

    function display_header_options_content(){echo "The header of the theme";}
    function display_logo_form_element()
    {
        ?>
            <input type="text" name="header_logo" id="header_logo" value="<?php echo get_option('header_logo'); ?>" />
        <?php
    }
    function display_ads_form_element()
    {
        ?>
            <input type="text" name="advertising_code" id="advertising_code" value="<?php echo get_option('advertising_code'); ?>" />
        <?php
    }

    add_action("admin_init", "display_options");

Is there any way to make advertising_code input repeatable field?

Thank you

2
  • Welcome to WordPress StackExchange, can you explain what you mean with "repeatable field"? A list?
    – user141080
    Commented May 6, 2020 at 16:38
  • @user141080 Hi thanks for the reply, I'm trying to do something like this: jsfiddle.net/jaredwilli/tZPg4/4
    – trunks
    Commented May 6, 2020 at 17:10

2 Answers 2

2

It`s not the best solution but maybe it is helpful for you to create your own solution.

function display_ads_form_element()
{
    // get the total number of "advertising codes" from the database
    // the default value is 1
    $codes  = array('1' => '' );
    if( get_option('advertising_code') !== FALSE ) {
        $codes = get_option('advertising_code');
    }
    ?>

    <?php /// button to add the new field // ?>
    <input type="button" onClick="add_new_ad_code()" value="add new advertising code">

    <ul id="advertising_code_list" >

        <?php foreach($codes as $key => $code): ?>

            <?php /// create for every "advertising code" an input field // ?>
            <?php /// advertising_codes[key] => square brackets means the data will send as array  // ?>
            <?php /// data-listkey => is only an easy way that the js can detect the last key  // ?>
            <li><input type="text" name="advertising_code[<?php echo esc_attr( $key ); ?>]" value="<?php echo esc_attr( $code ); ?>" data-listkey="<?php echo esc_attr( $key ); ?>"/></li>

        <?php endforeach; ?>


    </ul>

    <script>

        function add_new_ad_code() {

            // detect the last li element
            const last_li = document.getElementById('advertising_code_list').lastElementChild;

            // get the listKey from the input field
            const new_key = parseInt(last_li.childNodes[0].dataset.listkey) + 1;

            // create the new list tag
            const li_element = document.createElement('li');

            // create the new input tag for the new advertising code
            const input_element = document.createElement('input');

            // set the type
            input_element.type = "text";

            // set the name attribute
            input_element.name = "advertising_code[" + new_key +  "]";

            // set empty value
            input_element.value = "";

            // add the new key as data attribute
            input_element.dataset.listkey = new_key;

            // add the new advertising code to the list element
            li_element.appendChild(input_element);

            // add the list element to the list
            document.getElementById('advertising_code_list').appendChild(li_element);
        }

    </script>

    <?php
}

screenshot

0

Add at the top of the page after PHP opening tag like
<?php $advertising_code = 'advertising_code';
and call it where you need to
$advertising_code;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.