Theme Customizer : how to create multiple-level panel

admin管理员组

文章数量:1410724

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...

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 :)

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...

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 :)

• theme-development
• themes
• theme-customizer

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Aug 23, 2015 at 6:09 Pakpoom TiwakornkitPakpoom Tiwakornkit 18311 silver badge88 bronze badges 6

• 1 Please include any code you've tried and what isn't working about it. Also, don't miss these customizer changes in 4.3: make.wordpress/core/2015/07/27/… – mrwweb Commented Aug 23, 2015 at 6:20
• @mrwweb I'am so thank you for your comment :) I will include my code and try to read customizer changes in v4.3 – Pakpoom Tiwakornkit Commented Aug 23, 2015 at 6:31
• No problem. For future questions, keep in mind that people are much likelier to help if you can demonstrate that you've put in an effort to solve the problem and gotten stuck on something specific. Any question that even smells like "please write code for me" often gets ignored, down-voted, or closed. – mrwweb Commented Aug 23, 2015 at 6:36
• @mrwweb I have included the code that I tried. it isn't working. Thank you so much for your help. – Pakpoom Tiwakornkit Commented Aug 23, 2015 at 7:50
• Hi @PakpoomTiwakornkit, could you tell me if you found a solution for this problem. I've looked at the core, but i don't think that you can associate a panel to another panel like that way. – Trong Lam Phan Commented Jan 10, 2016 at 7:09

 |  Show 1 more comment

2 Answers 2

Sorted by: Reset to default 5

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/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.

At the moment it is simply not possible to have more than panels, sections and controls. Expanding this system would require extensive programming at WP. Given the narrow size of the customizer you could also easily get lost if you have so many nested panels. So it's probably not desirable either.

本文标签： Theme Customizerhow to create multiplelevel panel