What is the method to switch to specific page on entering theme customizer screen?

On entering the theme customizer, it defaults to the set home page, however I need to change the default to a page with ID 45.

The set home page uses a special template and is formatted by the elementor plugin so it is not expected to respond to the theme customizations. The page ID 45 uses the primary theme and is not set for public display, but solely for the purpose of previewing the changes.

I tried the following without success

add_action('customize_register', function($mgr) 
{
  add_action('customize_controls_print_scripts', function() 
  {
    echo '
    <script>
    wp.customize.previewer.previewUrl.set(wp.customize.settings.url + "?page_id=45");
    </script>
    ';
  }
}

The console error states cannot read property of previewUrl but I am stumped on resolving the errors. I reviewed the customizer js api at https://developer.wordpress.org/themes/customize-api/the-customizer-javascript-api/ but just cannot determine the correct process.

theme customizer – How to add CSS to head by php through echo self::css();

The tutorial https://iamsteve.me/blog/hero-area-series-wordpress-customizer-with-selective-refresh#customizer-setup gives a method for changing color by WordPress Customizer (Color control). It changes the color through the following code

/**
 * For hooking into `wp_head` mostly to output CSS
 */
public static function output()
{
  echo '<style id="hero-css">';
  echo self::css('.hero', 'background-color', 'hero_background_color');
  echo '</style>';
}

When I do this, I get a 500 error. Am I missing something?

applicationcustomizers – React components not working in Customizer

I am trying to use react components following this tutorial. But when I load the page I am getting a bunch of errors in chrome console complaining about invalid relative path in loading react and react-dom.

enter image description here

There is one more error after these errors:
enter image description here

Here is the code I am using to load tthe top place holder:

        if (this._topPlaceholder.domElement) {
            const element: React.ReactElement<IProps> = React.createElement(
              LeftNav,
              {}
            );
            ReactDom.render(undefined, this._topPlaceholder.domElement);

If I comment these lines , the error is gone. I checked the package json and node modules folder; react and reac-dom are added properly.

enter image description here

What am I missing here?

sharepoint online – Jquery Datatable not loading – SPFX Application Customizer

I’m trying to migrate Jquery Datatable from On Prem 2013 to online, I’m gonna create SPFX application extension, where I insert the scripts in order, still datatable is undefined.

$.fn.dataTable is undefined

I’m using jquery 1.11.1 and DataTables 1.10.4.

Loading jquery and other files like below in config.json

 "externals": {
    "jquery": "https://xxx.sharepoint.com/SiteAssets/FileLookup/jquery-1.11.1.min.js",
    "datatables.net" : {
      "path": "https://xxx.sharepoint.com/SiteAssets/FileLookup/jquery.dataTables.min.js",
      "globalName": "jQuery",
      "globalDependencies": [
        "jquery"
      ]
    },
    "propertysearch": {
      "path": "https://xx.sharepoint.com/SiteAssets/FileLookup/filesearch.js",
      "globalName": "propertySearch",
      "globalDependencies": [
        "jquery",
        "datatables.net"
      ]
    }
  },

Shed me some ideas

customizer refresh breaks with this code but I don’t understand why

Below code is a portion of my “wp_nav_menu” code. I don’t understand why the 4th part below, the ‘menu’ section breaks the “customizer refresh”. It makes the refresh in customizer not function when editing menus. But if I delete the ‘menu’ line completely, then the customizer functions normal/perfect. Fine with me, I will delete it. But can someone explain why the line breaks the customizer refresh?

    wp_nav_menu( array(
    'container'       => 'nav',
    'container_id'    => 'site-navigation',
    'container_class' => 'main-navigation',
    'menu'            => 'primary',

making customizer sections sortable but items not getting sorted first time items are moved

I’m trying to make a panel in customizer whose sections are sortable and the order of the sections determines the order of the areas they control at the front-end. I referred to the following question –
possible to make sections in theme customizer sortable and saveable at publish button clicked?

Everything seems to be working fine. But when I try to sort the elements, sorting fails for the first time and items don’t change their order. It works normally second time onwards. It’s the first time that causes issues.

Here is my JS code (modified it a bit depending on my project )
var frontPanel, frontSections, hiddenSection, hiddenArc, order

frontPanel      = jQuery('#sub-accordion-panel-itpg_front_page')
frontSections   = frontPanel.find('li(id^="accordion-section-")').not('#accordion-section-itpg_hidden_front_order')
hiddenAcc       = jQuery('#accordion-section-itpg_hidden_front_order')
hiddenPanel     = jQuery('#' + hiddenAcc.attr('aria-owns'));

frontSections.each(function() {
    jQuery(this).addClass('itpg_draggable') 
})

frontPanel.sortable({
    item: 'li.itpg_draggable',
    axis: 'y',
    stop: function( event, ui ) {
        
        getOrder()
        hiddenPanel.find('input').trigger('change')
        
    }
})


//Get ids of all the sections of Front Page and save them in the 'itpg_front_order' setting
const getOrder = () => {
    
    order = frontPanel.find('.itpg_draggable').map( function() {
        
        var id = jQuery(this).attr('id'),
            id = id.replace('accordion-section-','');
        
        return id;
    }).get().join(',');
    
    hiddenPanel.find('input').prop('value', order)
    
}

When I comment out the trigger event that is used to let Publish Button know that a change needs to be saved, it works fine but setting cannot be saved.

Any help would be appreciated! Thanks

sharepoint online – Can I add more than one SPFX extension – Application Customizer in one solution?

I am trying to add more than one SPFX extension in my solution (Application customizer in this case – one for header another for footer) but after deployment I only see one extension in my site.
Am I missing something here?

my elements.xml is:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="TopNavigation"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="819db51e-c5d7-447e-b4a8-3c8ae35681a3"
        ClientSideComponentProperties="{&quot;testMessage&quot;:&quot;Test message&quot;}">
    </CustomAction>
    <CustomAction
        Title="Footer"
        Location="ClientSideExtension.ApplicationCustomizer"
        ClientSideComponentId="6ea24ae1-1d36-464e-9330-a94c97134e76"
        ClientSideComponentProperties="{&quot;Top&quot;:&quot;Top area of the page&quot;,&quot;Bottom&quot;:&quot;Bottom area in the page&quot;}">
    </CustomAction>
</Elements>

and Config.JSON has entries:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "top-navigation-application-customizer": {
      "components": (
        {
          "entrypoint": "./lib/extensions/topNavigation/TopNavigationApplicationCustomizer.js",
          "manifest": "./src/extensions/topNavigation/TopNavigationApplicationCustomizer.manifest.json"
        }
      )
    },
    "footer-application-customizer": {
      "components": (
        {
          "entrypoint": "./lib/extensions/footer/FooterApplicationCustomizer.js",
          "manifest": "./src/extensions/footer/FooterApplicationCustomizer.manifest.json"
        }
      )
    }
  },
  "externals": {},
  "localizedResources": {
    "TopNavigationApplicationCustomizerStrings": "lib/extensions/topNavigation/loc/{locale}.js",
    "FooterApplicationCustomizerStrings": "lib/extensions/footer/loc/{locale}.js"
  }
}

TIA

theme development – what is the best way to use postMessage refresh in customizer to load a template part using get_template part()?

Let’s say I have a checkbox in the customizer. I want to load a file : /template-parts/components/author-info by this:

if (get_theme_mod('show_author_info')) {
    get_template_part('/template-parts/components/author-info');
}

I want to use postMessage or selective-refresh in the customizer. what’s the best way to do this?
Thanks for taking the time to read.

themes – Font styles lost in live site but still visible in customizer

since I used the Cpanel option “optimize website” I have lost the styles in a Hestia themed wp site, as you can see in the following screenshot coming from a live preview in an incognito firefox window:
https://imgur.com/a/hSuBeQM

What is interesting is that when you enter the wp editor for each page, the font styles incluiding size, weight and even fonts used, all do seem to be in place, such as the following:
https://imgur.com/a/PiMmto3

I already unchecked the “optimize website” option in cpanel but got no results as the difference still exists between what is seen in the wordpress customizer vs the live website. I want to know how to fix this.

The difference is not that big I know, but it does disrupts the harmony of the website overall. Additional screenshot for better clarity:
comparisson