0

WordPress allows to use active_callback argument to display a section for a specific page(s) in the Customizer. In PHP it looks like this:

$wp_customize->add_section( 'section_id', array(
  'title' => 'Contact Page Options',
  'priority' => 1,
  'panel' => 'panel_id',
  'active_callback' => 'is_contact_page',
) );

Then we can create is_contact_page function that will do all the checks.

I am wondering what is a correct way to use active_callback when creating a section using Customizer JS API?

1 Answer 1

2

Yes, however you will need to use a different approach, and you may need to do a but more work because active_callback here in PHP can directly connect with the database to find out whether the current query is for the contact page. The Customizer controls by default just has access to the previewUrl. So if you can rely on the URL to determine whether something is the contact page, all you need to do is this:

function isContactPage() {
    return /contact/.test( wp.customize.previewer.previewUrl.get() );
}

var section = new wp.customize.Section( 'section_id', {
    title: 'Contact Page Options',
    customizeAction: 'Customizing',
    priority: 1,
    panel: 'panel_id',
    active: isContactPage() // Initial state.
} );
wp.customize.section.add( section );

// Update the active state whenever the previewed URL changes.
wp.customize.previewer.previewUrl.bind( function activeCallback() {
    section.active.set( isContactPage() ); // Update state.
} );

A more robust way to set the active state would require doing the PHP logic in is_contact_page and then sending this in a message from the preview window to the controls window (which is what is being done with the active_callback behind the scenes). This is what is done in the Customize Posts plugin. However there is #36582 which proposes exporting the main query to JS and send in a message from the preview window to the controls window as an additional value in wp.customize.state.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.