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 does wp_enqueue_script and wp_enqueue_style work?

I don't fully understand how the following code works..

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );
    wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'wpt_theme_styles' );

function wpt_theme_js() {

    wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );  
    wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );        

}
add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );

That is, it doesn't appear that you have to call functions.php in any of the other php files (header.php, footer.php, index.php, etc.) for the js and css to work. How is this? Does WordPress automatically run functions.php first?

3 Answers

functions.php is available to your wordpress site at any given time. As the file name suggests, its a great spot to have all of your functions, both wordpress provided functions, and custom functions. These functions can than be called from any other part of your theme.

I can't imagine a situation where you would want more than one wp_enqueue_script or wp_enqueue_style function. Keep it dry, you'll create a mess for yourself. I've never tested it, so I'm not sure how wordpress would react to having more than one. I just wouldn't though.

Thanks Kevin,

That's actually not my code. That's from the WordPress Theme Development course.

Right, I know, but the functions are only being created, and called one time, which is great. That code is similar to how the code should look.

It was this part of your reply:

However, what is not clear is whether this function looks for ALL wp_enqueue_script/style functions or just the ones within functions.php file.

That I was trying to address.

I see. Thanks for clearing that up for me!

You bet, no problem man!

So, I think I found the answer here (https://teamtreehouse.com/community/how-does-wphead-know-what-to-load). The question was asked before. Basically, wp_head() has a ton of other functions nested within it and they pull css and js via wp_enqueue_script/style. However, what is not clear is whether this function looks for ALL wp_enqueue_script/style functions or just the ones within functions.php file.

So, I think I found the answer here (https://teamtreehouse.com/community/how-does-wphead-know-what-to-load). The question was asked before. Basically, wp_head() has a ton of other functions nested within it and they pull css and js via wp_enqueue_script/style. However, what is not clear is whether this function looks for ALL wp_enqueue_script/style functions or just the ones within functions.php file.