{"id":4499,"date":"2018-02-04T12:24:13","date_gmt":"2018-02-04T11:24:13","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4499"},"modified":"2020-02-09T10:59:37","modified_gmt":"2020-02-09T09:59:37","slug":"change-title-of-customize-section","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/change-title-of-customize-section-4499\/","title":{"rendered":"Change title of customize section"},"content":{"rendered":"<p>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:<\/p>\n\n\n\n<figure class=\"wp-block-image alignnone size-full wp-image-4500\"><noscript><img decoding=\"async\" width=\"345\" height=\"228\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/02\/dynamically-changing-a-customize-section-title.gif\" alt class=\"wp-image-4500\"><\/noscript><img decoding=\"async\" width=\"345\" height=\"228\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20345%20228%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-4500 lazyload\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/02\/dynamically-changing-a-customize-section-title.gif\"><figcaption>A GIF showing the detail view of a section. When changing a select field, the section title is also updated.<\/figcaption><\/figure>\n\n\n\n<p>I did not find a solution for that via the Customize JS API, so there was only the way via manipulating the DOM directly.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>We can reach the title of a section in the detail view (like shown in the GIF) as follows:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#sub-accordion-section-sectionId .customize-section-title h3'<\/span>).lastChild.textContent<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>And the section title in the panel view like that:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#accordion-section-sectionId .accordion-section-title'<\/span>).childNodes&#91;<span class=\"hljs-number\">0<\/span>].textContent<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To get the behavior from the GIF, we use the following code:<\/p>\n\n\n<pre class=\"wp-block-code lang-js\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">;(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">api<\/span>) <\/span>{\n\tapi.bind(<span class=\"hljs-string\">'ready'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t\t<span class=\"hljs-comment\">\/\/ Listen to changes of the page control value to update the page title in the section head and section title.<\/span>\n\t\tapi.control(<span class=\"hljs-string\">'portfolio_category_page&#91;1]&#91;id]'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\">control<\/span>) <\/span>{\n\t\t\tcontrol.setting.bind(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t\t\t\t<span class=\"hljs-keyword\">var<\/span> sectionTitle= <span class=\"hljs-string\">'No page selected'<\/span>;\n\n\t\t\t\t<span class=\"hljs-comment\">\/\/ Build the title for the section.<\/span>\n\t\t\t\t<span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-string\">'0'<\/span> !== api.control(<span class=\"hljs-string\">'portfolio_category_page&#91;1]&#91;id]'<\/span>).setting.get() &amp;&amp; <span class=\"hljs-string\">''<\/span> !== api.control(<span class=\"hljs-string\">'portfolio_category_page&#91;1]&#91;id]'<\/span>).setting.get()) {\n\t\t\t\t\t<span class=\"hljs-comment\">\/\/ Get the page title.<\/span>\n\t\t\t\t\t<span class=\"hljs-keyword\">var<\/span> pageSelectElem = <span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#customize-control-portfolio_category_page-1-id select'<\/span>);\n\t\t\t\t\t<span class=\"hljs-keyword\">if<\/span> (<span class=\"hljs-number\">-1<\/span> !== pageSelectElem.selectedIndex) {\n\t\t\t\t\t\tsectionTitle= <span class=\"hljs-string\">'\u00bb'<\/span> + pageSelectElem.options&#91;pageSelectElem.selectedIndex].text.trim() + <span class=\"hljs-string\">'\u00ab'<\/span>;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t<span class=\"hljs-comment\">\/\/ Add the page title to the section.<\/span>\n\t\t\t\t<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#accordion-section-hannover_portfolio_category_page_section\\\\&#91;1\\\\] .accordion-section-title'<\/span>).childNodes&#91;<span class=\"hljs-number\">0<\/span>].textContent = sectionTitle;\n\t\t\t\t<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'#sub-accordion-section-hannover_portfolio_category_page_section\\\\&#91;1\\\\] .customize-section-title h3'<\/span>).lastChild.textContent = sectionTitle;\n\t\t\t});\n\t\t});\n\t});\n})(wp.customize);<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We listen to changes of the <code class=\"lang-js\">portfolio_category_page[1][id]<\/code> control\u2019s setting. If it changes we check if the \u00bbempty\u00ab select value is selected or a page (we can get the currently selected value of a select element via <code class=\"lang-js\">selectedIndex<\/code>). 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-4499","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":"383d0cf5582147e6a8a0e59b5e754820","server":"vg04.met.vgwort.de","url":"https:\/\/vg04.met.vgwort.de\/na\/383d0cf5582147e6a8a0e59b5e754820"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4499"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4499\/revisions"}],"predecessor-version":[{"id":5811,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4499\/revisions\/5811"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}