It Is Possible to Import Assets Into the Files Into CSS and JS Used for WordPress Theme Development

When developing WordPress themes, you may want to control the style or functionality of a specific image within your theme folder.

I faced a similar issue when I wanted to control a PNG image to play an animation using the GSAP library.

WordPress provides functions like get_template_directory_uri() to be used in function.php or template PHP files. This function dynamically generates the theme folder path. WordPress then uses this path to access the theme's CSS and Javascript files, but this function cannot be used directly in those files.

To overcome this challenge, we can add a variable to our functions.php file and use the WordPress hook wp_localize_script to pass the variable to our frontend files.

wp_localize_script() is a WordPress function that allows developers to pass data from PHP to static files like CSS and JavaScript. It enables seamless communication between PHP and JavaScript files and provides an efficient method for importing assets into JavaScript.

By leveraging wp_localize_script(), developers can define and pass asset URLs, paths, or any other necessary data from PHP to JavaScript. This approach ensures dynamic asset import and reference within JavaScript files.

The Steps

The following example shows how to import a dotLottie file to use in JavaScript code. The animation will then be run in the WordPress theme component.

We will use this Lottie animation by @Afonso de Lima

First, let's locate our dotlottie file in the theme folder.

- your-theme-folder/
  - js/
    - script.js
  - lottie/
    - promptfy.lottie

Enqueue the JavaScript file using wp_enqueue_script() in the function.php file.

function enqueue_scripts() {

    // Enqueue Lottie library from CDN
    wp_enqueue_script( 'lottie-player', 'https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js', array(), '1.0.0', false );

    wp_enqueue_script( 'custom-theme-script', get_stylesheet_directory_uri() . '/js/script.js', array(), '1.0', true );

}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

• It is just a normal enqueue script to the page. Here I load the script.js file and the dotLottie player from CDN to the page.

Now utilize wp_localize_script() to pass asset data to the JavaScript file, ensuring correct URLs and paths.

function enqueue_scripts() {

    // Enqueue Lottie library from CDN
    wp_enqueue_script( 'lottie-player', 'https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js', array(), '1.0.0', false );

    wp_enqueue_script( 'custom-theme-script', get_stylesheet_directory_uri() . '/js/script.js', array(), '1.0', true );

    wp_localize_script( 'custom-theme-script', 'lottieFile', array( 'lottieUrl' => get_stylesheet_directory_uri() . '/lottie/promptfy.lottie' ) );
}

add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );

• Here I added the wp_localize_script by naming the handler custom-theme-script the same as script.js. Next is the object name lottieFile that contains the lottieUrl function that we'll use to load it. Finally the target file itself promptfy.lottie.
• Here I am using child-theme for the parent theme Kadence WP(aff). If you are not using child-theme no need to use get_stylesheet_directory_uri(), you can use get_template_directory_uri() instead.

For the Lottie component, I can just put the player like this

<dotlottie-player autoplay loop mode="normal" style="width: 500px"></dotlottie-player>

• As you can see, there is no src attribute. Because we will load the DotLottie file from the Javascript.

Access the passed data in the JavaScript file and dynamically import the assets using the received information.

In my /js/scripts.js file:

document.addEventListener('DOMContentLoaded', function() {
    const lottiePath = lottieFile.lottieUrl;

    // Get the lottie player element by selector
    const player = document.querySelector("dotlottie-player");

    player.load(lottiePath);
});

• To access the file we create a variable name lottiePath that have object lottieFile.lottieUrl
• Pass this variable to the load function

Now the Lottie player is playing the animation from the file that is accessed on the javascript file.

With this guide, you'll be able to import assets seamlessly into your CSS and JavaScript files. Hope this guide helps your project!

References:
https://developer.wordpress.org/reference/functions/wp_localize_script/
https://lottiefiles.com/147055-promptfy
https://lottiefiles.notion.site/Getting-started-with-dotLottie-907cb7b157b34990a7bba7bcae8f21b0