#Wordpress enqueue script example how to#
#Wordpress enqueue script example full#
#Wordpress enqueue script example code#

In a real-world example we could use the wp_enqueue_scripts hook to register the assets and the shortcode’s function to enqueue them. If I were to separate the two functions I would do so by using them in different hooks. Wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js', _FILE_ ) ) Wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css', _FILE_ ) )

In fact, you can use the enqueue functions to register and enqueue right away, by using the same arguments as you do in the register functions: add_action( 'wp_enqueue_scripts', 'my_plugin_assets' ) In the example above I registered and enqueued the assets within the same function, which is a bit redundant. Wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js', _FILE_ ) ) Wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css', _FILE_ ) ) add_action( 'wp_enqueue_scripts', 'my_plugin_assets' ) Within the hooked function you can use the wp_register_script(), wp_enqueue_script(), wp_register_style() and wp_enqueue_style() functions. To enqueue scripts and styles in the front-end you’ll need to use the wp_enqueue_scripts hook.

And if you want to include a JavaScript file on only some pages on your WordPress site, read our guide to conditionally enqueueing JavaScript files.Enqueueing Basics With wp_enqueue_scripts.

If you want to understand better how plugin_dir_url() works and what function works equivalently for WordPress themes, check out at our article on linking to theme and plugin resources.

If you want to know more detail about enqueueing both JavaScript files and CSS stylesheets in WordPress, read our full-length article on the topic.

#Wordpress enqueue script example how to#

Plugin_dir_url(_FILE_).'quick-guide.js'Īnd that’s how to add a JavaScript file in WordPress!

#Wordpress enqueue script example code#

Since it can be helpful to see all the code at once, here’s the final version of our custom plugin’s code: add_action('wp_enqueue_scripts', 'qg_enqueue')

#Wordpress enqueue script example full#

How To Use wp_enqueue_script() to Add JavaScript to Each Page on Your WordPress Site: Full Code Example (If you’re working in a theme, get_stylesheet_directory_uri() is a similarly helpful function for getting to the root of the running theme.) Then the last piece, quick-guide.js, is where you need to go (folder and filename) relative to the root directory you established with plugin_dir_url(). If you’re working in a plugin, as in our example, using plugin_dir_url() with the magic _FILE_ constant is the easiest and most common way to get to the plugin’s root folder.

Your wp_enqueue_script() call will be specific to your JavaScript file’s “shorthand name,” file location, and filename.

Wp_enqueue_script('qgjs', plugin_dir_url(_FILE_).'quick-guide.js').

Add a body to the function which actually registers and enqueues your script, using wp_enqueue_script().

Create that function qg_enqueue() with a basic function qg_enqueue() expression.

Don’t save yet, because saving without having written the qg_enqueue() function itself will temporarily “break” your site.

Write the line add_action('wp_enqueue_scripts', 'qg_enqueue').

(If you’re trying to do this for a theme, you’d put the following code in your functions.php file.)

If not, check out our primer on making a WordPress plugin. You’re going to be writing PHP, and we’re going to assume you’ve got a custom plugin set up to do this in.And here’s the text version of that same guide for how to use wp_enqueue_script() in WordPress… How To Use wp_enqueue_script() to Add JavaScript to Each Page on Your WordPress Site