forms - WordPress Settings API Repeatable fields

admin管理员组

文章数量:1387360

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

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

• custom-field
• forms
• settings-api
• add-menu-page

Share Improve this question asked May 6, 2020 at 12:46 trunkstrunks 1344 bronze badges 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/jaredwilli/tZPg4/4 – trunks Commented May 6, 2020 at 17:10

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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
}

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;

本文标签： formsWordPress Settings API Repeatable fields