This is how I create my settings page's output:

public function create_settings_page() {

    $this->options = $this->lal_get_settings();     

    ?>
    <div class="wrap">
        <h1>My plugin name</h1>
        <form method="post" action="options.php">
        <?php
            // Output nonce, action, and option_page fields for a settings page.
            settings_fields( 'lal_settingz' );
            do_settings_sections( $this->settings_page_name );
            submit_button();
        ?>
        </form>
    </div>
    <?php
}

All my settings appear within tr tags, th being setting description and td setting itself. I would like manipulate whole tr, for example apply display: none if other setting has certain value or wrap this tr with div and do the same with this div element.

With jQuery I am able to access tr as parent of parent of my setting element dynamically like this:

jQuery(document).ready(function($) {    

    $('#lal_display_type').change(function() {      
        if (this.value === 'icon') {
            $('#lal_login_text').parents().eq(1).hide();
        } else if (this.value === 'links') {
            $('#lal_login_text').parents().eq(1).show();
        }
    });

});

However, I would like to use PHP style="display: none" for initial display, to avoid any flickering on page load with jQuery solution, but I don't see any way to access mentioned tr. Should I replace do_settings_sections with some custom way to provide output of my settings?

This is how I create my settings page's output:

public function create_settings_page() {

    $this->options = $this->lal_get_settings();     

    ?>
    <div class="wrap">
        <h1>My plugin name</h1>
        <form method="post" action="options.php">
        <?php
            // Output nonce, action, and option_page fields for a settings page.
            settings_fields( 'lal_settingz' );
            do_settings_sections( $this->settings_page_name );
            submit_button();
        ?>
        </form>
    </div>
    <?php
}

All my settings appear within tr tags, th being setting description and td setting itself. I would like manipulate whole tr, for example apply display: none if other setting has certain value or wrap this tr with div and do the same with this div element.

With jQuery I am able to access tr as parent of parent of my setting element dynamically like this:

jQuery(document).ready(function($) {    

    $('#lal_display_type').change(function() {      
        if (this.value === 'icon') {
            $('#lal_login_text').parents().eq(1).hide();
        } else if (this.value === 'links') {
            $('#lal_login_text').parents().eq(1).show();
        }
    });

});

However, I would like to use PHP style="display: none" for initial display, to avoid any flickering on page load with jQuery solution, but I don't see any way to access mentioned tr. Should I replace do_settings_sections with some custom way to provide output of my settings?

• plugin-development

Share Improve this question asked May 22, 2019 at 17:14 Ryszard JędraszykRyszard Jędraszyk 32444 silver badges1717 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

It doesn't seem possible to modify the <tr> tag, but for making it hidden by default (or initially hidden), then you can use the sixth parameter passed to add_settings_field(), which is $args:

add_settings_field(
    'my_field',           // ID
    'My Field',           // Title
    'my_field_callback',  // Callback
    'my-setting-admin',   // Page/slug
    'setting_section_id', // Section
    array( 'class' => 'hidden' )
);

So as you can see, we set the tr's class to hidden which applies display: none to the tr element. (hidden is an existing CSS rule in wp-admin/css/common.css which is loaded on the WordPress admin pages).