Kirki: Nested Panels and Sections

[ravishakya]

Someone posted a post about Nested panels and sections in facebook. I think it would be great to include it in kirki.

Screenshot

Code
https://gist.github.com/OriginalEXE/9a6183e09f4cae2f30b006232bb154af

[aristath]

Nice!

I'm marking this one as a feature request so we can further investigate 👍

[alax034]

Hi guys, is it now possible to nest more sections in one panel? It doesn't work for me, I don't know why. I can't nest sections into panel either fields into sections. Any help is welcome. My config:

1. Added Kirki folder to theme root(tried version from Codex, development and master branch from GitHub)
2. Added this to theme function.php:

include_once( get_template_directory() . '/kirki/kirki.php' ); 

include_once( get_template_directory() . '/inc/kirki-config.php' );

Kirki::add_config( 'krypton_theme', array(
    'capability'    => 'edit_theme_options',
    'option_type'   => 'theme_mod',
) );

1. Created kirky-config.php with following code:
   ```
   /*
   
   
   
   • Add Arrays of values
     
     /
     
     //Stylesheets
     
     $styles = array(
     
     'bootstrap.min.css' => 'Bootstrap',
     
     'cerulean.min.css' => 'Cerulean',
     
     'cosmo.min.css' => 'Cosmo',
     
     'cyborg.min.css' => 'Cyborg',
     
     'darkly.min.css' => 'Darkly',
     
     'flatly.min.css' => 'Flatly',
     
     'journal.min.css' => 'Journal',
     
     'lumen.min.css' => 'Lumen',
     
     'paper.min.css' => 'Paper',
     
     'readable.min.css' => 'Readable',
     
     'sandstone.min.css' => 'Sandstone',
     
     'simplex.min.css' => 'Simplex',
     
     'slate.min.css' => 'Slate',
     
     'spacelab.min.css' => 'Spacelab',
     
     'superhero.min.css' => 'Superhero',
     
     'united.min.css' => 'United',
     
     'yeti.min.css' => 'Yeti'
     
     );
     
     /
   
   
   • Add panels
     
     */
     
     Kirki::add_panel( 'general111', array(
     
     'priority' => 10,
     
     'title' => __( 'General111', 'krypton' ),
     
     'description' => __( 'My Description is here', 'krypton' ),
     
     ) );
   
   

/**

• Add sections
  */
  Kirki::add_section( 'theme_stylesheet', array(
  'title' => __( 'Theme Stylesheet' ),
  'description' => __( 'Choose theme stylesheet' ),
  'panel' => 'general111', // Not typically needed.
  'priority' => 8,
  'capability' => 'edit_theme_options',
  'theme_supports' => '', // Rarely needed.
  ) );

Kirki::add_section( 'favicon', array(
'title' => __( 'Favicon' ),
'description' => __( 'Favicon settings' ),
'panel' => 'general111', // Not typically needed.
'priority' => 9,
'capability' => 'edit_theme_options',
'theme_supports' => '', // Rarely needed.
) );

/**

• Add fields
  */

//GENERAL

Kirki::add_field( 'krypton_theme', array(
'type' => 'select',
'settings' => 'krypton_setting',
'label' => __( 'Theme Stylesheet', 'krypton' ),
'description' => __('Select your themes alternative color scheme.', 'krypton'),
'section' => 'theme_stylesheet',
'default' => 'bootstrap.min.css',
'priority' => 10,
'multiple' => 1,
'choices' => $styles,
) );
Kirki::add_field( 'krypton_theme', array(
'type' => 'image',
'settings' => 'krypton_setting',
'label' => __( 'Favicon', 'krypton' ),
'description' => __( 'Use this field to upload your custom favicon.', 'krypton' ),
'help' => __( 'This is some extra help text.', 'krypton' ),
'section' => 'favicon',
'default' => '',
'priority' => 11,
) );
?>
```
I get structure like this in Customizer: General111>Favicon>Image upload

There is no other section. Maybe I'm missing something, please suggest?
Thanks!

[aristath]

@alax034 The problem in the above code is that both your fields have the same setting.

The setting field is the field's unique ID. So in this case, the 2nd field overrides the 1st one and therefore the 1st one doesn't exist.
And I hope you've got the krypton_theme config defined somewhere... Otherwise here's the docs on how to add it: https://aristath.github.io/kirki/docs/getting-started/config.html

P.S. In the future if your issue doesn't relate to the original topic, please create a new one instead.

[alax034]

How I missed that, thank you very much. And also sorry to waste your time on these beginner's problems, I feel stupid.
I defined config at step 2, directly at functions.php.
@aristath Thank you for making the word a better place.

P.S. If I need to delete these comments feel free to inform me.

[aristath]

@ravishakya this is currently added in the feature/nested-panels-and-sections branch.

I think it's working, but it could really use some testing....

If you want to nest a section inside another section you just add a 'section' => 'parent_section_id' parameter to it.
Similarly for panels 'panel' => 'parent_panel_id'

It looks though that controls must also be added to the parent section in order for it to be displayed - which is a good thing IMO. If you don't want any controls in parent sections you could just add a custom control with some text to explain things to users. 👍

[aristath]

Update: branch merged in develop so you can test it there directly.

[aristath]

Closing this one.
If there are any issues with the implementation create a new ticket 👍

[sabbiseaan]

ravishakya does it solve ur problem aristath solution doesnt work for me

[aristath]

@sabbiseaan this ticket was closed almost a year ago and I only saw your reply by accident, we don't regularly watch closed tickets.
To avoid spamming everyone else who has posted on this thread in the past please create a new ticket instead.
Post details about what you're doing including a code sample so we can test and see what's wrong.
Both myself and other developers all use nested sections and panels without any issues, so we'll need to see what it is you're trying to do and how you do it in order to provide some valuable feedback.