Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress How to Build a WordPress Theme Preparing to Code WordPress Templates Linking CSS

Brittany Cerra
Brittany Cerra
7,424 Points

What exactly does wp_enqueue_script do?

I'm confused by wp_enqueue_script. In this video, it is used by the hook, add_action, with the function we created, theme_styles, to call the style sheet.

What does it do/how does it work?

Is it a function? If so, why doesn't it require parentheses?

8 Answers

Matt Campbell
Matt Campbell
9,767 Points

Hi Brittany Cerra,

So, here's how the process works and I'll use stylesheets as an example There's 4 functions involved in getting a stylesheet linked up and working.

Deep in the core of WP is a function that's got a name of wp_enqueue_scripts. What this function does is add the markup the same as we would for putting something in the head tags with the necessary markup to include a style sheet.

So that's our function that's actually going to create the markup so we can have a stylesheet. We don't need to worry too much about it other than know we need it.

Next up, we need to actually link our stylesheet to our programme, the website. For that, we need to write a function that will take where we're storing our stylesheet and tell the function in the core where it is. Now the core function knows what stylesheet we're talking about and where it is. This is our wp_enqueue_style function. We tell this function what we want to label the stylesheet as, that it's in our theme directory and where in our theme directory it is.

Now we put that code in our own function so we've got something to pass to our 4th function which is the add_action() function. We need to put it in a function because, as we know, functions are isolated blocks of code that operate on their own but only when we ask them to. Functions require arguments to be passed to them, ie other functions.

We can call our function wrapping wp_enqueue_styles whatever we want but for the sake of maintainability, we call them sensible names. Same sort of logic with variables, classes and the like.

So we've got 3 functions we're dealing with at the moment.

Last thing we need to do is get it to run. Again, looking back at the wp_enqueue_scripts function, that will have a stipulation that determines at what point in the programme it runs. In our instance, when wp_head() fires, it will fire along with many other functions. May not be wp_head() that fires the function, I'd need to check.

Either way, what we do is add an action. An action is simply a function that runs other functions. We pass it two arguments, WHEN to run WHAT function. So, our add_action reads like this:

add_action('run_it_during_the_creation_of_the_document_head', 'something_to_link_our_stylesheet');

I think that basically covers it. I'd like it for Zac Gordon to validate my explanation just to be sure I'm not talking mumbo jumbo. :)

Brittany Cerra
Brittany Cerra
7,424 Points

Thanks for linking me, Jeremy. Unfortunately, the language used in codex requires more of a prerequesite than I have.

Matt Campbell
Matt Campbell
9,767 Points

I'll do my best to explain, probably in an over simplified manner.

WordPress is a PHP framework. All a framework is, is a massive library of functions. When we create a function, we can give it a name so that we can call it elsewhere. So, we could write a date and time function and call it date time. Something like

function datetime () {
    //Code here....
}

and we could call it later in our page by simply writing datetime(); For more complex functions, imagine having to write them out dozens of time throughout a site, such as how you would for the more complex mySQL query functions that are in WP like, the_content().

All the functions require () at the end so that you can pass other functions into this function.

If you wanted to use your datetime function in another function, you'd need to pass in this function as functions isolate code. This means that if you were to run a function in a function, you wouldn't be able to use the second function outside of the function, you'd need to pass the first function into a new function.

I think I'm probably now making it a little complicated to follow and may be getting off topic a little.

Short answer, yes, wp_enqueue_script is a function.

Brittany Cerra
Brittany Cerra
7,424 Points

Thank you, Matthew!! Breaking it down the way you did is exactly what I was hoping for.

I still don't understand why wp_enqueue_script doesn't require the parentheses, though.

Also, I want to make sure I understand the relationship between the three functions, add_action, wp_enqueue_script, and theme_styles from the video example. Theme_styles is the function we created to load the stylesheet. It will be called upon by add_action to give input to wp_enqueue_script and, ultimately, display the styles. Is this right?

I feel like I must be misunderstanding because it seems so inefficient.

Matt Campbell
Matt Campbell
9,767 Points

As for parenthesis, what are you expecting?

Brittany Cerra
Brittany Cerra
7,424 Points

Ahh..okay.. I think I get it. The layman example code, "add_action('run_it_during_the_creation_of_the_document_head', 'something_to_link_our_stylesheet') connects the dots for me. Thank you!!!

For the sake of consistency, I expected it to look like wp_enqueue_script(). The parentheses appear to be used with functions regardless of whether or not the function actually takes a parameter(s). I don't understand why this would be an exception.

Matt Campbell
Matt Campbell
9,767 Points

There is no exception. ALL functions require (). They kind of denote that this is a function.

Where are you seeing the exception?

Brittany Cerra
Brittany Cerra
7,424 Points

add_action( 'wp_enqueue_scripts', 'theme_styles' )

add_action has ( ), but its nested functions, wp_enqueue_scripts and theme_styles do not.

Matt Campbell
Matt Campbell
9,767 Points

No because they're the handles of functions. The function is already written, you're just passing them into this function as arguments.

Brittany Cerra
Brittany Cerra
7,424 Points

That makes sense. Thank you!!!

Christophe Rudyj
seal-mask
.a{fill-rule:evenodd;}techdegree
Christophe Rudyj
Full Stack JavaScript Techdegree Student 13,011 Points

but franly i wouldn't use enqueue to use stylesheet i would put them directly into the header.php of the theme using link. Enqueue is mostly used for javascript files

Matt Campbell
Matt Campbell
9,767 Points

Until you need an admin area stylesheet or a plugin stylesheet or you only want to load a stylesheet if it's a particular page, something useful for speeding up load times.

And just no...follow best practices. You don't use inline styles even though they work becuase it's not a good practice.

Likewise with WP. There's an action for it, use it.

Brittany Cerra
Brittany Cerra
7,424 Points

Thanks, Christophe. I know a lot of people do that. I have a better understanding of the link method, I just wanted to make sure I understood enqueue.