How to load styles and scripts on a WordPress theme

WordPress provides two useful functions to help you keep the head section on your header.php template file clean. The wp_enqueue_style will help you load your styles and the wp_enqueue_script will help you load your scripts. Both take the same parameters (name, source, dependencies, version, media – only for wp_enqueue_style – and in_footer – only for wp_enqueue_script) and the official WordPress documentation explains everything in great detail. Below I’ll demonstrate a simple way to use them, this is the same way it works on my latest free WordPress theme, Ambrosia.

These two functions “live” into the functions.php file. So let’s load the styles first. We only have to create an include function (for example ambrosia_load_styles()) that will load all the files using one or multiple wp_enqueue_style functions. To be more  specific, we’ll only load styles in our wordpress theme and not at the admin area (!is_admin()). Then an action hook will run the include function (ambrosia_load_styles()), just before the header.php template file is loaded. It’s simpler than it sounds, have a look at the below code.

It’s much more simple to load script files. We only include our scripts using the wp_enqueue_script function (again excluding the admin area).

Don’t forget that you can create dependencies on both CSS and javascript files, and of course load your javascript files in your footer area (after the page content is fully loaded).

Unfortunately, wp_enqueue_style and wp_enqueue_script functions don’t support any conditional comment mechanism, so if you have Internet Explorer (IE) only styles and scripts, you have to include them manually to your header.php file.

That’s all you need to know, so next time you’re building a theme, keep your header.php file clean by doing all the dirty work into the functions.php file!

3 thoughts on “How to load styles and scripts on a WordPress theme”

  1. Actually, you can load styles in conditionally, scripts is another story.. I’m actually trying to do some research and figure out the scripts solution…

    but for styles you want to use the $wp_style->add_data() object.

    Your code should look like this

    function ambrosia_load_styles() {
    if (!is_admin()) {
    global $wp_style
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('layout', get_template_directory_uri() . '/css/layout.css');
    wp_enqueue_style('typography', get_template_directory_uri() . '/css/typography.css');
    wp_enqueue_style('ie-only-styles', get_template_directory_uri() . '/ie-only-styles.css');
    $wp_style->add_data('ie-only-styles', 'condition', 'lt IE 9');
    }
    }

    add_action(‘get_header’, ‘ambrosia_load_styles’);

  2. This is very interesting, You’re a very skilled blogger. I’ve
    joined your rss feed and look forward to seeking more of your wonderful post.
    Also, I have shared your website in my social networks!

Leave a Reply