Wordpress Customizer content specific controls

Question

i'm struggeling with one challenge to do in my custom theme for Wordpress. I want to have content specific controls in my Theme Customizer. I know there is option "active_callback", but this is not sufficient for my purpose and i read 2 documentation articles about customizer and this https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/ article, but still have no clue, here is what i want to achieve:

For example, i want to have "show sidebar" checkbox, but this checkbox should be more contextual specifix. For example, when i will be on homepage, there will be just one checkbox as "Show sidebar default" but when i will go into some post, i want there 3 checkboxes:

1. "Show sidebar default" - id="show_sidebar"
2. "Show sidebar in Post archive page" - id="show_sidebar_archive_{post_type}"
3. "Show sidebar for this post" - id="show_sidebar_singular_{post_id}"

So when i want to have this kind of specific IDs for control, just active_callback is not enought, becauce it can just show/hide controls, i can't create new when URL in iframe changes.

There could be 2 sollutions: 1. Better - when i could somehow create/remove controls by context, it would be best solution. If it's somehow possible with customizer API, give me som hint please 2. Not good, but sufficient - is at least possible somehow reload whole /wp-admin/customize.php?url= with new clicked url? this could be enought for a while

thx for any advices!

Answer 1

Ok, i figured out that second solution, here is code. It's enought for me for now.

'use strict';

(function ($) {

  /**
   * This is important fix for Theme Customizer
   * It will change whole customizer url, because we need to load
   * all controls ahan for new url, because of hierarchical options
   */
  if ( /\/customize\.php$/.test( window.location.pathname ) ) {
    wp.customize.bind( 'preview-ready', function() {
      var body = $( 'body' );
      body.off( 'click.preview' );
      body.on( 'click.preview', 'a[href]', function( event ) {
        var link, isInternalJumpLink;
        link = $( this );
        isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
        event.preventDefault();

        if ( isInternalJumpLink && '#' !== link.attr( 'href' ) ) {
          $( link.attr( 'href' ) ).each( function() {
            this.scrollIntoView();
          } );
        }

        /*
         * Note the shift key is checked so shift+click on widgets or
         * nav menu items can just result on focusing on the corresponding
         * control instead of also navigating to the URL linked to.
         */
        if ( event.shiftKey || isInternalJumpLink ) {
          return;
        }
        //self.send( 'scroll', 0 );
        //self.send( 'url', link.prop( 'href' ) );

        var newUrl = link.prop( 'href' );
        var currentUrl = window.location.href;

        var customizeUrl = currentUrl.substring(0, currentUrl.indexOf("?url=") + 5) + newUrl;

        // Reload whole customizer for new url
        window.parent.location.replace(customizeUrl);
      });
    } );
  }
})(jQuery);
//# sourceMappingURL=customizer.js.map