![]() ![]() WordPress’ enqueueing mechanism has built-in support for managing decencies, by using a third argument of both wp_register_style() and wp_register_script() functions. The following code goes where you want to output the assets. Wp_register_script('custom-searchpage', plugins_url( '/js/search.js', _FILE_ )) Īdd_shortcode('custom_search_assets', 'custom_search_assets') Wp_register_style('custom-searchpage', plugins_url( '/css/search.css', _FILE_ )) add_action('wp_enqueue_scripts', 'custom_search_assets') You can separate the two functions by using them in different “hooks.” For example, you can use the wp_enqueue_scripts hook to register the assets and then a shortcode function to enqueue the assets. ![]() Wp_enqueue_script( 'custom-searchpage', plugins_url( '/js/search.js', _FILE_ ) ) Wp_enqueue_style( 'custom-searchpage', plugins_url( '/css/search.css', _FILE_ ) ) ![]() You can use the enqueue functions to register and enqueue right away by using the same arguments as in the register functions: add_action( 'wp_enqueue_scripts', 'custom_search_assets' ) In the above example, We registered and enqueued assets within the same function, which is redundant. Wp_register_script('custom-searchpage', plugins_url('/js/search.js', _FILE_ )) Wp_register_style('custom-searchpage', plugins_url('/css/search.css', _FILE_ )) Within the hooked function you can use wp_register_script(), wp_enqueue_script(), wp_register_style() and wp_enqueue_style() functions. To enqueue assets (scripts and styles) in the WordPress front-end you can use the wp_enqueue_scripts hook. Enqueuing assets is a great way to structure assets and prevent unnecessary overhead in the network or the runtime/DOM i.e. Then you would register the file and its location, but only enqueue that file on the specific search page. An example of this could be a search page, where you would like to load some custom Javascript functions for searching – but you don’t need that extra JavaScript code on any other pages. For instance, sometimes, you want to let WordPress know about an asset, but you may not want to load that asset on every page. Here’s the initial code from the video, along with my annotations to explain what’s happening.Enqueuing in WordPress instructs WordPress to register that a file exists and its physical location and then output it into the WordPress template’s header, body, or footer.Ī reason for having multiple steps has to do with modularity. Enqueueing via the functions.php fileĪlthough we recommend enqueuing via creating a plugin, you can still add the commands to your theme’s functions.php file that’s located on the root level of your theme. BX Slider is a great example for demonstrating WP enqueue because it requires a variety of files including jQuery, it’s own JavaScript files and a Stylesheet. To demonstrate WP Enqueue in the video above, I installed BX Slider. ![]() Rather than hard-coding Scripts and Stylesheets, we can enqueue them into wp_head function via our theme’s functions file. These two very helpful WordPress functions are here to help us do it properly. Files don’t always need to run on every page.Įnter the wp_enqueue_script & wp_enqueue_style functions Hard coding scripts in the header mean they’ll run on every page unless you wrap them in conditional statements. If you’re looking to compress your files via a plugin like WP Minify, then you can’t because they’re hard-coded. Most plugins use jQuery, so chances are you’ll have the script running twice if you hard-code it in. Yes this can work, but it’s not best practice and can have the following side effects: Pasting them directly onto the header.php theme file. Like many front-end developers, I used to add  Scripts and Stylesheets to my themes in a very crude way. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |