Change title of customize section

When creating a customize section, you define a title for it. Sometimes it can be useful to change this title during a customize session, for example, to reflect the value of a control, like the GIF shows:

A GIF showing the detail view of a section. When changing a select field, the section title is also updated.

I did not find a solution for that via the Customize JS API, so there was only the way via manipulating the DOM directly. Continue reading Change title of customize section

Using a custom template for the head container of a customizer section

When you are opening a panel in the customizer, either you get options directly (like in the »Site Identity« panel) or links to sections (like in the menu area). By default, these links look like in the screenshot below for Slider settings – the section title in a light area background with an arrow on the right side.

We want to change this so that we get a describing text with a button to open the section, as shown in the screenshot for Portfolio feature. Continue reading Using a custom template for the head container of a customizer section

Closing a customize section via JS

Sometimes it can be helpful to close a section in the WordPress Customizer, for example, after a button was clicked. If you know how to do it, it is really easy to do, but I searched for a while recently until finding the solution.

With this one-liner you can close a section:

wp.customize.section('hannover_portfolio_archive_page_options').collapse();

hannover_portfolio_archive_page_options is the ID of the section you want to close.