Add Snippet To Project
Have you ever made changes to the scripts or stylesheets in your WordPress plugin or theme, only to realize that the changes aren’t taking effect on the front end of your website? It can be frustrating to spend time troubleshooting and trying to figure out the issue. The good news is that there’s a simple solution: force a reload of your scripts and stylesheets. In this article, we’ll show you how to do it and ensure that your changes are reflected immediately on your site.
function wpturbo_force_reload_scripts_styles() {
wp_enqueue_style( 'my-style', get_stylesheet_uri(), array(), filemtime( get_stylesheet_uri() ) );
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), filemtime( get_template_directory() . '/js/my-script.js' ), true );
}
add_action( 'wp_enqueue_scripts', 'wpturbo_force_reload_scripts_styles' );
The code snippet provided aims to force the reload of scripts and stylesheets in your WordPress plugin or theme. This is useful when you have made changes to your scripts or stylesheets and want to ensure that visitors see the latest versions.
The wpturbo_force_reload_scripts_styles() function is responsible for enqueuing the updated versions of the scripts and stylesheets. Let’s go through the code step by step to understand how it works.
First, we use the wp_enqueue_style() function to enqueue the stylesheet. In this case, we are enqueueing a stylesheet called my-style. We pass get_stylesheet_uri() as the file parameter, which retrieves the URL of the current theme’s stylesheet. The array() parameter is used to specify any dependencies for this stylesheet (in this case, there are none). Lastly, we use the filemtime() function to append the stylesheet’s last modified timestamp as a version number. This ensures that whenever the stylesheet is updated, the browser will see it as a new file and not use the cached version.
Next, we use the wp_enqueue_script() function to enqueue the script. In this case, we are enqueueing a script called my-script. We use get_template_directory_uri() to retrieve the URL of the directory that contains the currently active theme. We concatenate '/js/my-script.js' to get the complete path to our script file. As with the stylesheet, we pass an empty array for the dependencies parameter. Finally, we again use filemtime() to append the last modified timestamp of the script file as the version number.
The last part of the code is the add_action() function. We hook our wpturbo_force_reload_scripts_styles() function into the wp_enqueue_scripts action. This ensures that our function is executed when WordPress is enqueueing scripts and stylesheets.
By using this code snippet, you can force the browser to reload the scripts and stylesheets whenever changes are made, guaranteeing that users see the latest versions of these assets.