Tag: Customizer

How to output choices from a custom sortable checkboxes control via Customizer settings

I’m trying to dynamically output some settings from theme Customizer. I use this custom controls, Example 3.

How can I display the settings so that the selected options appear as well as in the order in which they were placed in Customizer?

So far I’ve tried without success:

    $  box = get_theme_mod( 'sample_pill_checkbox3' ) ;       switch ( $  box ) {                  case 'author':                 echo 'Author';                 break;                  case 'date':                 echo 'Date' ;                 break; }

Basically, if Author and Date is selected and Date is placed first, so I would need to appear in the frontend, Date first then Author.

Thank you!

Customizer – binding jQuery created controls

I tried several plugins posted by Weston Ruter for jQuery created controls for the wp customizer. They work but are different from those created via PHP. For example, controls created with PHP ( customizer.php ) respond normally to code in customize-controls.js or in customize-previews.js:

”’ api( ‘tzkmx_test_control’, function( value ){ value.bind( function( to ) { var answer = to; });}); ”’ Controls created with jQuery do not respond to binding! Does anyone know how to bind them?

Widget not appearing in customizer

Hello I have a theme installed but on the homepage the homepage content widget section does not appear in the customizer view. I have it set on the wp-admin themes settings but when I go to the customizer it does not show all of the widgets that are setup in the admin settings. Every page I go to in the customizer only shows 5 widgets (not sure if theres a setting to enable more than 5) but I cant seem to get this figured out. any help is greatly appreciated .. I have 2 screenshots with this post to show whats going on[enter image description here]1

enter image description here

is_admin() returns false for theme customizer, how to check for it?

As I strive to get rid of jQuery, I force it off otherwise, some plugins will always add it back if enqueued.

I still want it for the admin as it’s required and performance is less of an issue. Nevertheless, id_admin() function returns false when using the theme customizer.

function my_theme_remove_jquery(&$  scripts) {     // here if have to check for server url to add jQuery when customizing the site,     // otherwise it's not loaded and customizer won't work properly     if (is_admin() || strpos($  _SERVER['REQUEST_URI'], 'customize_theme')) return;      $  scripts->remove('jquery'); } add_filter('wp_default_scripts', 'my_theme_remove_jquery');

Is there some other way I could detect the customizer or is this good enough?

AJAX content that only appears while the customizer is open

While this is likely specifically a WooCommerce issue, it still applies here. I am using the AJAX add-to-cart feature, so, upon clicking “add to cart,” items should be added to the cart (this part works) as well as have a message appear that confirms the product was added to the cart (this part doesn’t), all while not reloading the page.

The weird thing is that the “X was added to your cart” only ever appears when I am in the customizer, and not while viewing the page normally. Even upon inspecting the page I can see that the container for the message is there, but contains no content, so it’s not simply being hidden. Has anyone seen this before or are there any troubleshooting steps I should be taking to figure out why it only behaves properly with the customizer open?

Detect navigation change in SPFX Application customizer

I have a SPFX customizer that displays a banner in the topPlaceholder. When the page loads, if it’s a list, then it performs a calculation and then displays the banner.

When I move from one library to another, because the page isn’t performing a full load, I found out I need use the navigatedEvent. This fires when the navigation changes.

However, I need to display the banner differently depending on what folder I’m in within a single document library. When navigating from one folder to another in a document library the navigatedEvent doesn’t seem to fire, even though I am navigating to a different location.

Is this a bug with the navigatedEvent, or should I be using a different event?

    public onInit(): Promise<void> {        var rootSiteFullUrl = this.context.pageContext.site.absoluteUrl;     pnp.setup({       spfxContext: this.context     });     this.context.application.navigatedEvent.add(this,  this.renderControl);       return Promise.resolve<void>();   }       private renderControl(){     Log.info(LOG_SOURCE, `Available placeholders: $  {this.context.placeholderProvider.placeholderNames.map(name => PlaceholderName[name]).join(', ')}`);       //handling the top placeholder     if(!this._topPlaceholder){       this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(           PlaceholderName.Top,            {onDispose: this._onDispose});        if(!this._topPlaceholder){         console.error(`The expected placholder (Top) was not found.`);         return;       }       }      if(this._topPlaceholder.domElement){         const element : React.ReactElement<IInfoBarMainProps> = React.createElement(           MainClosureBar,{             siteRelativeUrl: this._siteRelativeURL,             listID: this._listID,             rootSiteUrl: this._rootSiteURL,             context: this.context           }         );          ReactDom.render(element, this._topPlaceholder.domElement);     }   }    private _onDispose(){     Log.info(LOG_SOURCE, `[IInfoBarApplicationCustomizer._onDispose] Disposed custom top placeholders`);   }

I have a feeling that there isn’t an event for navigating inside a folder, as when I’m in a folder, there is nothing within the this.context.pageContext that indicates that I’m in a folder.

wp customizer js preview – use setting based on other setting

I’m quite green at wp js framework;

What i’m trying to achieve is that if setting 123 == a then assign setting_x to .header-banner background-color; else if setting 123 == b assign value of setting_y.

To help understand my problem better below is the code for wp customizer api

customizer-preview.js

header_option = wp.customize('123').get();    if(header_option =="a"){         wp.customize('setting_x', function (value){             value.bind (function(newval){                 $  ('.header-banner').css('background-color', newval);              });         });    } else{         wp.customize('setting_y' ,function (value){             value.bind ( function (newval){                 $  ('.header-banner').css('background-color', newval);              });         });    }

I would appreciate an explanation as search wp debugger / codex pages didn’t get me very far, hence my question here