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

Alex Flores
Alex Flores
7,864 Points

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

Kevin Korte
Kevin Korte
28,149 Points

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.

Alex Flores
Alex Flores
7,864 Points

Thanks Kevin,

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

Kevin Korte
Kevin Korte
28,149 Points

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.

Alex Flores
Alex Flores
7,864 Points

I see. Thanks for clearing that up for me!

Kevin Korte
Kevin Korte
28,149 Points

You bet, no problem man!

Alex Flores
Alex Flores
7,864 Points

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.

Alex Flores
Alex Flores
7,864 Points

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.