Is there a way to create deep-level sub Panel in Theme Customizer(like roots of plants) ? My theme that I have been developing seem to be more complicated. I think that if we can create deep-level sub Panel, our Customizer Page won’t look messy, our user will customize our theme easier and we will be able to make much more complicated WordPress theme easier. Images below describe what my idea is…

Theme Customizer concept that I found on online tutorials
Here is sub panel that I wan to create

Unfortunately, I have tried to search out about this one, but I could only find a way to create single-level Panel in the Theme Customizer here is what I found on another thread , couldn’t find a way to make sub Panel deeper. Could you please shade some light in my life ?

Update : following code is some code I use to create Panel and Control like image #1 which is single-level Panel. they all work fine.

$wp_customize->add_panel('panel1',
        array(
            'title' => 'Panel 1',
            'priority' => 1,
            )
        );
        $wp_customize->add_section( 'section1',
            array(
                'title' => 'This is section 1',
                'priority' => 1,
                'panel' => 'panel1'
                )
            );
            $wp_customize->add_setting('field1', array('default' => 'default text'));
            $wp_customize->add_control('field1', array(
                'label' => 'Text field',
                'section' => 'section1',
                'type' => 'text',
                )
            );

My problem is that I want to create new panel and let them stick in another panel which will make it look like roots hierarchy(image #2) I think that if we can do some thing like that, we will be able to make much more powerful Theme Customizer. I then tried to accomplish that idea and tried to rewrite my code. Unluckily, it didn’t work. Please check up the following one.

$wp_customize->add_panel('panel1',
        array(
            'title' => 'Panel 1',
            'priority' => 1,
            )
        );
        $wp_customize->add_section( 'section1',
            array(
                'title' => 'This is section 1',
                'priority' => 1,
                'panel' => 'panel1'
                )
            );
            $wp_customize->add_setting('field1', array('default' => 'default text'));
            $wp_customize->add_control('field1', array(
                'label' => 'Text field',
                'section' => 'section1',
                'type' => 'text',
                )
            );
        // I used the code below with a little hope that it will help me accomplish my idea, but it didn't work T^T.
        $wp_customize->add_panel('panel1_1',
            array(
                'title' => 'Panel 1.1',
                'priority' => 2,
                'panel' => 'panel1' // I tried adding this line of code in order to let it depend on another panel
                )
            );
            $wp_customize->add_section( 'section1_1',
            array(
                'title' => 'This is section 1',
                'priority' => 1,
                'panel' => 'panel1_1'
                )
            );
            $wp_customize->add_setting('field1_1', array('default' => 'default text'));
            $wp_customize->add_control('field1_1', array(
                'label' => 'Text field',
                'section' => 'section1_1',
                'type' => 'text',
                )
            );

Could you please give me the solution, I can’t figure out how to make panel look like roots hierarchy. Any help would be appreciated 🙂

2 s
2

For anyone that comes here looking for this, I was able to do it after battling with it for a few hours.

The code is a bit extensive so did not want to post here, (mods feel free to let me now if that would be better), instead I created a gist: https://gist.github.com/OriginalEXE/9a6183e09f4cae2f30b006232bb154af

What it does is it basically allows you yo specify panel property on panels (for nesting panels under panels) and section property on sections (for nesting sections under sections).

Notes:

  • The php code includes an example of how to create
    panels/sub-panels/sections/sub-sections. It is worth noting that you
    instantiate new panels/sections using the subclass I created, instead
    of directly calling $wp-customize->add_panel and passing it a
    configuration array.
  • JS and CSS files don’t need to be modified. If you were wondering why CSS is needed, it’s there to fix the animation when transitioning from panels to sub-panels and sections to sub-sections.
  • When creating sub-sections, make sure you also add a panel property which should be the same as the panel of the parent section

I tried to do this with as little code as possible, and without overriding anything that might screw up with others people code. Some refactoring might be needed if they change logic in the future versions, I made it as future-proof as I could.

Leave a Reply

Your email address will not be published. Required fields are marked *