5

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

  • 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.org/core/2015/07/27/… – mrwweb Aug 23 '15 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 Aug 23 '15 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 Aug 23 '15 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 Aug 23 '15 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 Jan 10 '16 at 7:09
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.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.

  • Hi @OriginalEXE, I am trying to use your code on twentyseventeen theme with the same pe_customize_register() function which you have defined with the same code, but got just like panel>section>control no sub panel or sub section. can you please help me to implement it . – Prafulla Kumar Sahu Feb 14 '17 at 9:31
  • 1
    Hi, I used the twentyseventeen theme as well for this. So if you place the php code to a file pe-customizer.php inside the inc folder, css inside assets/css and js inside assets/js, and then add require get_parent_theme_file_path( '/inc/pe-customizer.php' ); to functions.php file at the end, it should work. – OriginalEXE Feb 14 '17 at 12:42
  • thank you, it worked, just one thing I would like to suggest, you should specify setting type to theme_mod or option . – Prafulla Kumar Sahu Feb 15 '17 at 7:05
  • Glad it worked :) Indeed, my focus here was on extending sections/panels, controls are there just so I know it renders correctly, but thanks for the reminder :) – OriginalEXE Feb 15 '17 at 21:52
  • Wow :) Thanks a lot for your hard work with 500+ lines of code. AWESOME!!! I have clicked to accept your answer. – Pakpoom Tiwakornkit Apr 7 '17 at 4:27
2

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.

  • However it is possible for WP to have this kind of levels for Widget and Menu options. So I think it's possible but needs a lot of tweaking/creating custom scripts – Philipp Aug 2 '16 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.