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:

I did not find a solution for that via the Customize JS API, so there was only the way via manipulating the DOM directly.

We can reach the title of a section in the detail view (like shown in the GIF) as follows:

document.querySelector('#sub-accordion-section-sectionId .customize-section-title h3').lastChild.textContentCode language: JavaScript (javascript)

And the section title in the panel view like that:

document.querySelector('#accordion-section-sectionId .accordion-section-title').childNodes[0].textContentCode language: JavaScript (javascript)

To get the behavior from the GIF, we use the following code:

;(function (api) {
	api.bind('ready', function () {
		// Listen to changes of the page control value to update the page title in the section head and section title.
		api.control('portfolio_category_page[1][id]', function (control) {
			control.setting.bind(function () {
				var sectionTitle= 'No page selected';

				// Build the title for the section.
				if ('0' !== api.control('portfolio_category_page[1][id]').setting.get() && '' !== api.control('portfolio_category_page[1][id]').setting.get()) {
					// Get the page title.
					var pageSelectElem = document.querySelector('#customize-control-portfolio_category_page-1-id select');
					if (-1 !== pageSelectElem.selectedIndex) {
						sectionTitle= '»' + pageSelectElem.options[pageSelectElem.selectedIndex].text.trim() + '«';
					}
				}

				// Add the page title to the section.
				document.querySelector('#accordion-section-hannover_portfolio_category_page_section\\[1\\] .accordion-section-title').childNodes[0].textContent = sectionTitle;
				document.querySelector('#sub-accordion-section-hannover_portfolio_category_page_section\\[1\\] .customize-section-title h3').lastChild.textContent = sectionTitle;
			});
		});
	});
})(wp.customize);Code language: JavaScript (javascript)

We listen to changes of the portfolio_category_page[1][id] control’s setting. If it changes we check if the »empty« select value is selected or a page (we can get the currently selected value of a select element via selectedIndex). If a page is selected, we save its title in a variable and set it as the value for both occurrences of the section title.