Wordpress Customizer keeps hiding custom sections

Question

I have custom plugin that adds Customizer sections and options. The sections can be seen briefly on the customizer screen but then disappear. This behavior is happening on all themes (I am using my plugin on other sites).

Maybe it might be because the setting fields are not used in the theme yet, but even if I create my own theme (for which this plugin is mainly used) and add echo get_theme_mod('setting-key') somewhere in the themes code, the sections are still being hidden by wordpress.

I have clean Wordpress install version 5.2.2, using default Twenty Nineteen theme with only jQuery updater plugin active. I have checked all JS code for potential errors and any hiding happening, but nothing on my part can be causing this.

This is how I am adding sections, in customize_register hook:

add_action('customize_register', 'setup_section');
function setup_section($wp_customize){
  // Add section
  $wp_customize->add_section('section_id', array(
    'title'    => 'Section Title',
    'priority' => 160,
  ));
  // Add settings for a field
  $wp_customize->add_setting('setting_id', array(
    'default'   => '',
    'transport' => 'refresh',
  ));
  // Add the field into a section and assign setting id
  $wp_customize->add_control('setting_id', array(
    'label'    => 'Option Label',
    'section'  => 'section_id',
    'settings' => 'setting_id',
    'type'     => 'text',
  ));
}

The PHP code is working as expected, but after the page loads, all my custom sections get display: none; inline css added and the sections disappear.

Any help is appreciated.

Sounds like there is some javascript somewhere that is hiding your sections. Are you executing any custom js in your theme or plugin? Check there first. If your own js isn't causing this, deactivate all other plugins one at a time and check if your sections are still being hidden after each deactivation. — kenef
@kenef Thank you for your input. Yes, I have clean 5.2.2 install, all plugins deactivated (except jQuery Update) and I have checked all my JS code if it's causing this. And haven't found anything. I have also gone through the documentation again and updated the code a little. Still not fixed, here is the pastebin: pastebin.com/ScG7DTqa — Vincurekf
I have a hunch thats telling me its your jQuery Update plugin. Have you tried disabling that? — kenef
I found it @kenef , I have been initializing my customizer options only after is_admin() check. No realizing that after the frontend preview reloads, the customizer options are not loaded for the preview and that in turn affects the customizer UI. Initializing the options outside is_admin() check fixed it. Thank you for your time :) — Vincurekf

Faisal Ashfaq Faisal Ashfaq · Accepted Answer · 2021-02-28T04:56:48

Another reason why the custom sections kept hidden is when they don't have any controls. When a section is empty WordPress hides it by default.

Here's a full working piece of code for adding a section within Customizer with one control:

function mytheme_customize_register( $wp_customize ) {
    
    $wp_customize->add_section('footer_settings_section', array(
        'title'          => 'Footer Text Section'
    ));

    $wp_customize->add_setting('text_setting', array(
        'default'        => 'Default Text For Footer Section',
    ));

    $wp_customize->add_control('text_setting', array(
        'label'   => 'Footer Text Here',
        'section' => 'footer_settings_section',
        'type'    => 'textarea',
    ));

    
 }
 add_action( 'customize_register', 'mytheme_customize_register' );

Wordpress Customizer keeps hiding custom sections

1 Answers