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"

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();
Code language: JavaScript (javascript)

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

Remove theme mod after button-click in the customizer

In the upcoming version of my Hannover theme, there should be an improved user experience in the Customizer besides a reworked design and code base. Among other things, the user should be able to remove sections with a button click (like known from removing a menu in the customizer). After that, not only the section should be removed from the customizer, but also the corresponding theme mods need to be removed from the database. This post shows my solution for that.

Continue reading "Remove theme mod after button-click in the customizer"

Creating panels, sections, and controls with the Customize JS API

Until now I mostly used the PHP API of the customizer. Since Weston Ruter’s post about the improvements of the Customize JS API in WordPress 4.9, I wanted to change that and learn more about the Customize JS API. This post shows you how to create panels, sections, and controls with that API.

Continue reading "Creating panels, sections, and controls with the Customize JS API"

Use selective refresh in the customizer

Since WordPress 4.5, we can reload only parts of the customizer preview after a setting has changed. With that, the user has — at least — the feeling of a faster experience. And in most cases, it will be actually faster (and besides that, this feature could eliminate the customizer page and replace it with inline editing, writes Weston Ruter in his post »Selective Refresh in the Customizer«). Here I show you how to implement selective refresh.

Continue reading "Use selective refresh in the customizer"

Conditional displaying and hiding of customizer controls via JavaScript

When using Partial Refresh in the customizer to reload only a part of the preview after changing a setting’s value, the active_callback for these settings is not working anymore. With active_callback you can, for example, show a control only if another control has a particular value. In that case, the conditional displaying has to be done with JavaScript.

Continue reading "Conditional displaying and hiding of customizer controls via JavaScript"