This entry is part 7 of 8 in the Plugin Development 101 Series
- Introduction to WordPress Plugin Development 101
- Plugin Development 101 – What Makes a Plugin?
- Plugin Development 101 – General Best Practices
- Plugin Development 101 – An Intro to Filters
- Plugin Development 101 – Registering a Custom Post Type
- Plugin Development 101 – Intro to Short Codes
- Plugin Development 101 – Intro to Loading Scripts and Styles
- Plugin Development 101 – Introduction to Adding Dashboard Menus
In this part of Plugin Development 101 you will be introduced to how to load scripts and styles in your WordPress plugins. This is a fundamental element of WordPress plugin development and is used in the vast majority of all plugins. There are many ways that asset loading can be done wrong, so I want to ensure that you learn early how to do it correctly.
The code written in the video is shown below:
1 2 3 4 5 | function pd101_load_styles() { wp_enqueue_style( 'pd101-styles', plugins_url( 'pd101-styles.css', __FILE__ ) ); wp_enqueue_script( 'pd101-scripts', plugins_url( 'pd101-scripts.js', __FILE__ ), array( 'jquery' ), '1.0' ); } add_action( 'wp_enqueue_scripts', 'pd101_load_styles' ); |
Codex reference for the functions used:
Although they appear similar, is there a benefit to using your method versus the following:
wp_enqueue_script( 'pd101-scripts', plugin_dir_url( __FILE__ ) . 'pd101-scripts.js', array( 'jquery' ), '1.0' );In regards to the URL?
Yes, specifically:
plugins_url( 'pd101-scripts.js', __FILE__ )versusplugin_dir_url( __FILE__ ) . 'pd101-scripts.js'… just wondering if there was a benefit, or is it a preference?I prefer the `plugin_dir_url` method for readability sake but if there is a benefit to your method then I’d look at switching over to it for my plugins.
PS: Is it me, or is this comment text a bit light when writing?
Really no difference.
I recently asked a guy on Twitter – who was giving WP answers – if I should enqueue CSS and scripts in a plugin, and got a stupid answer….. So, this post hits the spot!
Thanks, Pippin! It’s like you read my mind…!!
I’m curious to know what the answer was he gave. Care yo share? No need to disclose his name.
Really I got two…
First he said “Generally not. One way to optimize this is to use a caching plugin. Generally I use WP Super Cache for quick setup.”
Completely confused with that answer, I realize he must have misunderstood the question, so I clarified “oh, I meant when developing a plugin for the repository, I know this is standard for themes.”
Then the second stupid answer: “Not really a coder sorry. More of a developer that helps WordPress beginners”
Call me old school, but I’ve never heard of a developer who doesn’t code.
Sounds like a “Web Design Shop” that doesn’t know basic CSS
What about when you put your assets in sub folders? (ie. css and js folders)
would it then be:
plugins_url( 'js/pd101-scripts.js', __FILE__ )Yep!
for sites w/ frequent changes to their stylesheet, any downside in forcing a refresh by using the file mod-time as version number? eg:
http://www.mojowill.com/developer/get-your-wordpress-css-changes-noticed-immediately/
Nope, that’s a great idea!
Wonderful tutorial learned how version number can help in update, never knew that before. Just for curosity, in themes we have to enque several stylesheets and scripts(specially in case of sliders), is there any short way to enque multiple scripts or stylesheets? Or do we have to create seperate functions for each of them and then hook them individually?
You can place all of the wp_enqueue_script/style() call into a single function that is hooked to “wp_enqueue_scripts”. Here’s an example: https://easydigitaldownloads.com/codex/source-function-edd_load_scripts.html#15-75
Thanks, one function and one time “add_action” that saves time and space. http://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts made me think that we have to do it individually because they did it twice, probably I misunderstood. Thanks for clearifying.
And I became a premimum member but I still cannot see an option to ask question in your forum. Is there something else I have to do?
Ask a question in my support forum, or a general plugin-dev related question?