How to add separator between default and custom panels in WordPress customizer?

I have implemented theme options using WordPress customizer with a mix of native WordPress customizer fields and Kirki framework. This works great.

Now, I wonder if it is possible to add a separator between my theme options and default WordPress customizer options. Something similar to the attached image.

Guess, this can be achieved by overriding custom CSS. But a native and cleaner approach is what I am looking for.

Topic theme-customizer plugins themes Wordpress

Category Web


I know this is very old, but here is a solution, in 'label' type this but remove spaces '‎[ U + 2 0 0 E ]'

 $wp_customize->add_setting('blank', array(
        'default'        => '',
    ));

    $wp_customize->add_control('blank', array(
        'label'   => '‎',
        'section' => 'usluge',
        'type'    => 'hidden',
    ));

You should probably not have more than one item at the customizer "root" panel, as that panel just do not scale and each plugin that might need to add something to it have to place at least it "root" on that panel.

In addition, in theory, there is no guaranty that your items will be grouped together and it will depend on how unique is the priority you use, and how wordpress resolves placements of items with the same priority.


Although the customizer is the official way to work with the theme options, and everything that can be managed in WordPress, really there is no primitive to add the separator.

It is not that obvious, but that Iframe we are targeting to add the separator typically can contain Panels and Sections on the top level.

enter image description here

Furthermore, did you know that panels and sections are managed via JavaScript?

File: /wp-admin/customize.php
167:            <div id="customize-theme-controls">
168:                <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
169:            </div>

The possible road to add the panel or the section that would be empty is not smart. These are containers and would not appear if they do not have controls with associated settings. And to create custom controls that would be empty is simple not so smart.

JavaScript again would be a hack for a common WordPress developer also, so I think the CSS is the way to go.

Speaking of JavaScript, when we added the Backbone.js together with Underscore.js ( at WordPress version 3.5 ) Nacin announced JavaScript will soon dominate the WordPress world. I think this will happen but not that fast.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.