Plugin Development 101 - Intro to Loading Scripts and Styles

This entry is part 8 of 14 in the Plugin Development 101 Series

← Plugin Development 101 – Intro to Short Codes 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:

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:

Edward Caissie
March 15, 2013

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' );
- Pippin
  March 15, 2013
  
  In regards to the URL?
- Edward Caissie
  March 15, 2013
  
  Yes, specifically:
  plugins_url( 'pd101-scripts.js', __FILE__ ) versus plugin_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?
- Pippin
  March 15, 2013
  
  Really no difference.
MonkeyMays
March 15, 2013

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…!!
- Pippin
  March 16, 2013
  
  I’m curious to know what the answer was he gave. Care yo share? No need to disclose his name.
MonkeyMays
March 16, 2013

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.
- Pippin
  March 17, 2013
  
  Sounds like a “Web Design Shop” that doesn’t know basic CSS 😀
designerken
March 22, 2013

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__ )
- Pippin
  March 22, 2013
  
  Yep!
Barrett Golding
April 13, 2013

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/
- Pippin
  April 13, 2013
  
  Nope, that’s a great idea!
sayed taqui
May 6, 2013

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?
- Pippin
  May 6, 2013
  
  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
sayed taqui
May 6, 2013

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?
- Pippin
  May 6, 2013
  
  Ask a question in my support forum, or a general plugin-dev related question?
Joan Boluda
September 13, 2013

Hi Pippin! Nice lesson! Just a couple of quick questions!!

1. Will plugins_dir function work if the plugin is under mu-plugins folder?
2. Your EDD plugin loads edd.min.css, edd-ajax.min.js (and a couple of jquery files that depends on them) on every single page. Are they necessary in not product pages?

Thanks for your time!
- Pippin
  September 13, 2013
  
  1. Yes I believe it does, according to core source: http://core.trac.wordpress.org/browser/tags/3.6.1/wp-includes/link-template.php#L2092
  
  2. No, they’re not necessary on non-product pages, unless the site admin has placed a purchase button short code on that page. We’re working on making only load the scripts/styles if on a product page or if an EDD short code is present.
- Joan Boluda
  September 13, 2013
  
  Wow, quick answer! Thanks! As for the EDD changes, that would be great!
  
  Thks!
keyboardji
January 8, 2014

This video is not playing for me on Chrome. Can you confirm if it works?
- Pippin
  January 13, 2014
  
  It’s working for me. Does it work if you let it load for a bit first?
Cliff Beckwith
January 17, 2014

Hi, Pippin… I’m not seeing the video either. I took a screenshot and posted it on my webserver, if a looksee would help:

http://www.ingso.com/cant-see-video.png

Thanks!
- Pippin
  January 21, 2014
  
  I’m going to get the video moved to vimeo today or tomorrow.
Cliff Beckwith
January 17, 2014

PS – If it’s helpful, I’d just watched the shortcode video, and had no problem with it. I can even go back and watch it again:

http://www.ingso.com/can-see-video.png

I just can’t see the ‘load scripts..’ video.

Thanks again…
Cliff Beckwith
January 20, 2014

Hi, Pippin…

I think I’ve figured out why I couldn’t see the video (and I learned something about html5 video in the process).

I’m using Firefox on a Win7 machine, and have eschewed quicktime as it causes problems with some other software on my machine. I see that you’ve provided a couple of for your video – both a Quicktime .mov and an OGG file. Normally, when the QT browser plugin loads, it’s controls, video preview, etc. will load, too. But when a non QT browser falls back to the OGG source, those items aren’t automatic; HTML5 expects the developer either specify the ‘controls’ switch in the element, or script his/her own controls.

I found that I could right-click on the video poster and play the video, but you might want to explicitly specify the ‘controls’ switch for non-Mac or non-QT folks.

Thanks again for your great videos!
Cliff Beckwith
January 20, 2014

sorry… I foolishly put tags in my above post. They were rightly, automatically stripped. But it should read:

“…I see that you’ve provided a couple of <sources> for your video….”

and

“…specify the ‘controls’ switch in the <video> element…”

I hope this makes sense.
Pippin
January 21, 2014

Hey everyone, the video for this tutorial is now hosted on Vimeo pro and should be available to be played in about 25 minutes (here on this page).
Cliff Beckwith
January 21, 2014

Thanks for fixing this, Pippin!
Dasha Luna
March 4, 2014

Hello,

Are there any benefits of registering a script/stylesheet with wp_register_script() / wp_register_style() prior to enqueueing them with wp_enqueue_script() / wp_enqueue_style() ?

Many thanks,
Dasha
- Pippin
  March 4, 2014
  
  The only advantage comes in when you want to register a script before you want to load/enqueue it. For example, you could register the script at one point but not load it on the page until later, such as in the footer.
Zack Ward
September 9, 2014

Great tutorial Pippin! Thank you for making these videos realistic. Some might go back and re-record or edit some of the small mistakes out of the video. I’m glad that you don’t do that, because there is real value in seeing how you troubleshoot problems.

I’m learning a lot from your tutorials, thank you for making them available! =)
Nate Finch
April 20, 2015

Woohoo! Thanks for these series. I just put together my first plugin, thanks to these: https://github.com/FinchPS/genesis-bootstrapper

You rock, Pippin!
- Pippin
  April 20, 2015
  
  Looks great!
drjamespratt
January 11, 2018

How can i join as a learner? The https://pippinsplugins.com/join-the-site/ link not working for me.
- Pippin Williamson
  January 12, 2018
  
  This tutorial and all others are now free to everyone. See https://pippinsplugins.com/discontinuing-memberships-pippins-plugins/