#Admin enqueue javascript how to#

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' ) Īdd_shortcode( 'custom_gallery', 'custom_gallery' ) 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. Enqueueing Basics With wp_enqueue_scripts The way to make this happen is to register the script first, and only actually enqueue it when the shortcode is shown (suggested reading: The Ultimate Guide to WordPress Shortcodes). For example: If you’re building a custom gallery shortcode that uses Javascript you only actually need to load the JS when the shortcode is used – probably not on every page. Sometimes you’ll want to let WordPress know about an asset, but you may not want to use it on every page. The reason for having two steps has to do with modularity.

First you register it – tell WordPress it’s there – and then you actually enqueue it, which eventually outputs it into the header or just before the closing body tag. There are two steps taken when enqueueing a script or a style. Enqueueing Basics With wp_enqueue_scripts.

#Admin enqueue javascript how to#

Find out how to do it below using wp_enqueue_scripts. In WordPress, instead of simply adding these to the header, you should use a method called enqueueing which is a standardized way of handling your assets with the added bonus of managing dependencies.