The Publishing Project

Inline scripts in WordPress

There are times when we need to add scripts to the page that will run only when there is a script already enqueued and loaded before it happens.

I got bit by this when trying to use FontFaceObserver. For some reason, it worked fine in development but it would give a FontFaceObserver is not defined error when I moved the theme to production.

The solution was hidden in some older documentation. As of version 4.5 there is an additional script loading function for loading inline scripts: wp_add_inline_script. This function allows adding inline scripts that depend on scripts

The only important thing to remember is that this will only work when using a script that was enqueued using wp_enqueue_script.

The final solution looks like this:

function rivendellweb_enqueue_fontfaceobserver() {
  wp_enqueue_script( 'ffo_script',
    get_stylesheet_directory_uri() . '/js/fontfaceobserver.js',
    array(),
    '20151215',
    false );

   wp_add_inline_script( 'ffo_script', 'const recursive = new FontFaceObserver("Recursive VF");let html = document.documentElement;
     Promise.all([recursive.load()]).then(() => {sessionStorage.fontsLoaded = true;console.log("Recursive has loaded.");
     }).catch((err) => {sessionStorage.fontsLoaded = false;console.log("Recursive failed to load", err);
     });

     // Add a class based on whether the font loaded successfully
     if (sessionStorage.fontsLoaded) {html.classList.add("fonts-loaded");
     } else {html.classList.add("fonts-failed");}'
   );
}

add_action( 'wp_enqueue_scripts', 'rivendellweb_enqueue_fontfaceobserver' );

Links and References