Loading scripts the wrong way can break compatibility, affect performance, or mess up other plugins.
Here’s how I handle script loading in WordPress the right way — clean, safe, and conflict-free.
1. Use wp_enqueue_script()
and wp_enqueue_style()
Always enqueue scripts. Never hardcode them into the page.
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_assets' );
function my_plugin_admin_assets( $hook ) {
if ( $hook !== 'toplevel_page_my-plugin' ) return;
wp_enqueue_style(
'my-plugin-style',
plugin_dir_url( __FILE__ ) . 'assets/css/admin.css',
[],
'1.0.0'
);
wp_enqueue_script(
'my-plugin-script',
plugin_dir_url( __FILE__ ) . 'assets/js/admin.js',
[ 'jquery' ],
'1.0.0',
true // load in footer
);
}
2. Load Assets Only When Needed
Use the $hook
parameter to load scripts only on specific admin pages.
This reduces bloat and prevents conflicts.
3. Use plugins_url()
or plugin_dir_url()
Avoid hardcoding plugin paths. Use WordPress functions to make your URLs dynamic.
plugin_dir_url( __FILE__ ) . 'assets/js/script.js';
4. Add Versioning to Bust Cache
Always version your scripts and styles, especially during development.
wp_enqueue_style( 'my-plugin-css', $url, [], '1.1.2' );
Use filemtime()
during dev to avoid caching issues:
wp_enqueue_style( 'my-plugin-css', $url, [], filemtime( $path ) );
5. Respect Dependencies
If your script depends on jQuery or WP libraries, declare them properly.
wp_enqueue_script( 'my-js', $url, [ 'jquery', 'wp-util' ], '1.0.0', true );
Final Thought
Good plugins don’t just work — they play well with others.
Loading your assets the right way keeps your plugin fast, safe, and conflict-free — especially on sites running 20+ other plugins.
Leave a Reply