× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

[WordPress] Using is_single as an active_callback in The Customizer

Megan Morsie
Apr 30, 2016
<p>If you are already familiar with The Customizer, you may have noticed that the controls/panels available change depending on what page is being viewed in the preview. For example, many themes use featured sections on the home page, but if you navigate to another page or post in the preview, the controls for the featured sections will disappear.</p> <p>This happens because of the <strong>active_callback</strong> on the control, section, or panel.</p> <p>If you’re trying to have a control, section, or panel show on single blog posts only, there is a slight adjustment to make.</p> <p>Because <strong>is_single</strong> <a href="http://ottopress.com/2015/whats-new-with-the-customizer/">takes an optional parameter</a>, we have to make a wrapper function for our <strong>active_callback</strong>.</p> <p>Here’s what that would look like:</p> <pre><span style="color:rgb(136, 0, 0)">// Our Wrapper Function</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 136)">function</span><span style="color:rgb(0, 0, 0)"> rose_callback_single</span><span style="color:rgb(102, 102, 0)">()</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">{</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 0, 136)">return</span><span style="color:rgb(0, 0, 0)"> is_single</span><span style="color:rgb(102, 102, 0)">();</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">}</span><span style="color:rgb(0, 0, 0)"> $wp_customize</span><span style="color:rgb(102, 102, 0)">-&gt;</span><span style="color:rgb(0, 0, 0)">add_section</span><span style="color:rgb(102, 102, 0)">(</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'rose_single_section'</span><span style="color:rgb(102, 102, 0)">,</span><span style="color:rgb(0, 0, 0)"> array</span><span style="color:rgb(102, 102, 0)">(</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'title'</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">=&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'Blog Post Layout'</span><span style="color:rgb(102, 102, 0)">,</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'description'</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">=&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'Edit the layout of blog posts.'</span><span style="color:rgb(102, 102, 0)">,</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'priority'</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">=&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 102, 102)">20</span><span style="color:rgb(102, 102, 0)">,</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'active_callback'</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">=&gt;</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(0, 136, 0)">'rose_callback_single'</span><span style="color:rgb(102, 102, 0)">,</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">)</span><span style="color:rgb(0, 0, 0)"> </span><span style="color:rgb(102, 102, 0)">);</span></pre> <p>Now, the “Blog Post Layout” section will only show in The Customizer when the preview is on a single post. You can even get creative with active_callbacks and make it so that different controls show depending on the value of another control. For example, a “Display Feature Boxes,” checkbox could show the “Feature Boxes” controls when checked. This helps de-clutter the admin experience for users.</p> <p> </p> <p>(Originally posted on my blog: <a href="http://megabyterose.com/wordpress-wednesday-3/">http://megabyterose.com/wordpress-wednesday-3/</a>)</p>
comments powered by Disqus