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.textContent
Code language: JavaScript (javascript)
And the section title in the panel view like that:
document.querySelector('#accordion-section-sectionId .accordion-section-title').childNodes[0].textContent
Code 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.