{"id":4489,"date":"2018-01-26T11:09:30","date_gmt":"2018-01-26T10:09:30","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4489"},"modified":"2020-02-09T10:59:38","modified_gmt":"2020-02-09T09:59:38","slug":"custom-template-head-container-customizer-section","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/custom-template-head-container-customizer-section-4489\/","title":{"rendered":"Using a custom template for the head container of a customizer section"},"content":{"rendered":"<p class=\"wp-block-paragraph\">When you are opening a panel in the customizer, either you get options directly (like in the \u00bbSite Identity\u00ab panel) or links to sections (like in the menu area). By default, these links look like in the screenshot below for <em>Slider settings<\/em> \u2013 the section title in a light area background with an arrow on the right side.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"348\" height=\"363\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head.png\" alt class=\"wp-image-4490\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head.png 348w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head-192x200.png 192w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head-288x300.png 288w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head-300x313.png 300w\" sizes=\"(max-width: 348px) 100vw, 348px\"><\/noscript><img decoding=\"async\" width=\"348\" height=\"363\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20363%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-4490 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20348%20363%22%3E%3C%2Fsvg%3E 348w\" sizes=\"(max-width: 348px) 100vw, 348px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head.png 348w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head-192x200.png 192w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head-288x300.png 288w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head-300x313.png 300w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2018\/01\/customizer-section-head.png\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 <em>Portfolio feature<\/em>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Creating template for the section head<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We include the section head markup as a template into the customizer:<\/p>\n\n\n<pre class=\"wp-block-code lang-php\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span>\n<span class=\"hljs-comment\">\/\/ Include customize control templates into the customizer.<\/span>\nadd_action( <span class=\"hljs-string\">'customize_controls_print_footer_scripts'<\/span>, <span class=\"hljs-string\">'hannover_customize_templates'<\/span> );\n\n<span class=\"hljs-comment\">\/**\n * Prints templates into the customizer.\n *\/<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">hannover_customize_templates<\/span><span class=\"hljs-params\">()<\/span> <\/span>{ <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/html\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"tmpl-hannover-no-portfolio-page-notice\"<\/span>&gt;<\/span><span class=\"handlebars\"><span class=\"xml\">\n\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hannover-customize-control-text-wrapper\"<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"customize-control-description\"<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> _e( <span class=\"hljs-string\">'It looks like your site does not have a portfolio yet.'<\/span>, <span class=\"hljs-string\">'hannover'<\/span> ); <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"button\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"button hannover-open-portfolio-page-section-button\"<\/span>&gt;<\/span>\n\t\t\t\t<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> _e( <span class=\"hljs-string\">'Create Portfolio'<\/span>, <span class=\"hljs-string\">'hannover'<\/span> ); <span class=\"hljs-meta\">?&gt;<\/span><\/span>\n\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\t<\/span><\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span> }<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">For that, we use the <code class=\"lang-php\">customize_controls_print_footer_scripts<\/code> action and hook our <code class=\"lang-php\">hannover_customize_templates()<\/code> function to it. In that function, we create the markup for our section head inside a <code class=\"lang-markup\">script<\/code> element. The ID of the <code class=\"lang-markup\">script<\/code> has to have the prefix <code class=\"lang-markup\">tmpl-<\/code>, so the template can be used via JS later.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Replace section head with template<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To insert the template, we need just a few lines of JavaScript (I described how to enqueue the file into the customizer in my \u00bb<a href=\"https:\/\/florianbrinkmann.com\/en\/4337\/panels-sections-controls-customize-js-api\/\">Creating panels, sections, and controls with the Customize JS API<\/a>\u00ab article):<\/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-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\">\/\/ Replace section head with custom template.<\/span>\n\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).headContainer.find(<span class=\"hljs-string\">'.accordion-section-title'<\/span>).replaceWith(\n\t\t\twp.template(<span class=\"hljs-string\">'hannover-no-portfolio-page-notice'<\/span>)\n\t\t);\n\n\t\t<span class=\"hljs-comment\">\/\/ Add click event listener to the portfolio page section button.<\/span>\n\t\tpanel.container.find(<span class=\"hljs-string\">'.hannover-open-portfolio-page-section-button'<\/span>).on(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).expand();\n\t\t});\n\t});\n})(wp.customize);<\/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 class=\"wp-block-paragraph\">After the customizer is ready, we search for the <code class=\"lang-markup\">.accordion-section-title<\/code> in the head container of the section we want to modify (in our case <code class=\"lang-js\">hannover_portfolio_page_section<\/code>). We replace it with our template, which we can call via <code class=\"lang-js\">wp.template('hannover-no-portfolio-page-notice')<\/code>. The param for <code class=\"lang-js\">wp.template<\/code> has to be the template <code class=\"lang-markup\">id<\/code> without the <code class=\"lang-markup\">tmpl-<\/code> prefix.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then we add a click event listener to the button and open the section after the button was clicked.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Save original markup and restore it<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you need to restore the original markup later during a customize session, you can save it at the beginning for later usage. That could look like the following:<\/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\">\/\/ Backup the original markup.<\/span>\n\t\t<span class=\"hljs-keyword\">var<\/span> backup = api.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).headContainer&#91;<span class=\"hljs-number\">0<\/span>].innerHTML;\n\n\t\t<span class=\"hljs-comment\">\/\/ Replace section head with custom template.<\/span>\n\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).headContainer.find(<span class=\"hljs-string\">'.accordion-section-title'<\/span>).replaceWith(\n\t\t\twp.template(<span class=\"hljs-string\">'hannover-no-portfolio-page-notice'<\/span>)\n\t\t);\n\n\t\t<span class=\"hljs-comment\">\/\/ Add click event listener to the portfolio page section button.<\/span>\n\t\tpanel.container.find(<span class=\"hljs-string\">'.hannover-open-portfolio-page-section-button'<\/span>).on(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).expand();\n\t\t});\n\n\t\t<span class=\"hljs-built_in\">document<\/span>.querySelector(<span class=\"hljs-string\">'button.hannover-create-portfolio-button'<\/span>).addEventListener(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t\t\t<span class=\"hljs-comment\">\/\/ Restore the original section head markup.<\/span>\n\t\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).headContainer&#91;<span class=\"hljs-number\">0<\/span>].innerHTML = backup;\n\n\t\t\t<span class=\"hljs-comment\">\/\/ Add event listener.<\/span>\n\t\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).container.find(<span class=\"hljs-string\">'.accordion-section-title'<\/span>).on(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> (<span class=\"hljs-params\"><\/span>) <\/span>{\n\t\t\t\tapi.section(<span class=\"hljs-string\">'hannover_portfolio_page_section'<\/span>).expand();\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 class=\"wp-block-paragraph\">The middle part is known, and at the beginning, we just save the HTML of the head container of our section in a variable. At the end of the code, an event listener is used again to restore the HTML after a button click. To do this, we assign the saved original markup to the <code class=\"lang-js\">innerHTML<\/code> of the head container element and must then create an additional event listener to open the section after clicking on the section title.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you are opening a panel in the customizer, either you get options directly (like in the \u00bbSite Identity\u00ab panel) or links to sections (like in the menu area). By default, these links look like in the screenshot below for Slider settings \u2013 the section title in a light area background with an arrow on [&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":[42],"tags":[],"class_list":["post-4489","post","type-post","status-publish","format-standard","hentry","category-wordpress-plugins"],"wp-worthy-pixel":{"ignored":false,"public":"cd62253b948148c69a19be0963780b4d","server":"vg04.met.vgwort.de","url":"https:\/\/vg04.met.vgwort.de\/na\/cd62253b948148c69a19be0963780b4d"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4489","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=4489"}],"version-history":[{"count":2,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4489\/revisions"}],"predecessor-version":[{"id":5813,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4489\/revisions\/5813"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}