2/15/2024 0 Comments Wp enqueue script load lastWp_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.Find out how to do it below using wp_enqueue_scripts. This function takes the page id, name or an array of the page ids and names.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. WordPress has a suitable function to achieve this, is_page(). Conditionally loading assetsįor this particular scenario the assets only need to be loaded on the contact page. Our next task is to specify the pages we’d like to load them on. Now the assets will not load on any pages. However, CF7 provides a filter that can be accessed, for which we can just return false, thus not enqueuing anything: /**Īdd_filter('wpcf7_load_js', '_return_false') Īdd_filter('wpcf7_load_css', '_return_false') A generic way of achieving this would be to find the assets in the $wp_styles and $wp_scripts variable. The first thing we need to do is stop the default action of the assets being loaded on all pages. NB: For the rest of this article I’ll refer to scripts and styles collectively as assets. Preventing/dequeuing the script and styles This article will demonstrate how to conditionally load the JS and CSS for CF7, but the concept could be adapted to apply to other plugins. One such example would be to only load the JavaScript and CSS stylesheets for Contact Form 7 ( a lightweight contact form plugin) on the contact page. There are many use-cases where scripts and stylesheets only need to be loaded on certain pages. Updated on August 28th, 2020 Conditionally enqueue scripts and stylesheets on specific pages Originally published on November 3rd, 2018
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |