WordPress Templates

Underscores Menu Exercise pt 2: Enqueuing Styles and Scripts

The verb to enqueue comes from the French language. It means to add something into a lineup.

In WordPress the wp_enqueue_style() and wp_enqueue_script() functions are used to manage the loading of external resources like scripts and stylesheets.

Why do we do things this way?

Imagine if you have a theme that requires a dependency like jQuery. Imagine that in a site using your theme, the owner installs a plugin that requires jQuery.

Several issues arise:

  • Are you downloading jQuery twice?
  • Are you downloading different, potentially incompatible, versions?
  • Does the library load before or after other scripts?
  • Do scripts in plugins and themes have identically named functions?
  • Are all dependencies addressed?
  • etc, etc

For more detail, please read this page.

Ultimately, enqueuing styles and scripts allows WordPress to manage calls to these external resources and thus avoid a bunch of potential problems.

Enqueuing Font Awesome

Open up functions.php and scroll down to somewhere near line 100. You are looking for the wp_enqueue_style() and wp_enqueue_scripts() functions.

Copy this line and then paste it on the line below below. Part of it might look a bit different from what you see here.

wp_enqueue_script( 'guitarmania-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

Change it to the following (keep your theme name, not mine [guitarmania]):

  wp_enqueue_script( 'guitarmania-font-awesome', 'https://use.fontawesome.com/48d4d341c1.js', array(), '201700301', false );

What is happening here?

The Handle

First, we give the script a unique “handle”. This is a name for the script. If you start with your theme name, it greatly increases the chances that your handle will not conflict with those of plugins, etc.

The Script Location

Then we include the location of the script. In the original that we copied, the location of the script is inside the theme. As a result, underscore dynamically generates the URL.

All URLs in WordPress are absolute, not relative, so when the theme is installed at a new domain, WordPress needs to figure out the path to resources, starting with the http://domain.com/ part.

This is done with the php concatenation operation (the dot). The get_template_directory() function retrieves the absolute URL of the theme, then we add the dot, then remainder of the path to the local resource.

With Font-Awesome, we do not need to do this because the URL is absolute. In other words, we can replace the get_template_directory_uri() . ‘/js/navigation.js’ part with just ‘https://use.fontawesome.com/48d4d341c1.js’.

Other Values

The remaining values passed to the function are:

  • An Array: if needed we can list script dependencies here, by their handles. Don’t worry about that for now.
  • A number, typically today’s date, that will be appended to the URL for cache busting purposes. Don’t worry about that either
  • True or False: this determines whether the script loads in the HEAD or before the close of the BODY.

Load your font page, then inspect it and search for the word AWESOME. See if you script has loaded.

YOUR LAB TASKS

Figure out how to load a google font (Merriweather Sans). Then use it in your page in your stylesheet ( no need for the @import statement in the stylesheet for an enqueued stylesheet).

Figure out how to use the newly downloaded Font Awesome, along with the screen-reader-text class that comes with underscores. You will use that class to hide the words associated with each icon. This will require editing the code you have put into footer.php. As well, it will likely require advanced attribute selectors in your stylesheet.

This page from the WordPress Code Reference will be very helpful in this task.

Finally, figure out how to load a simple JavaScript that sends a message to the console on page load.

Standard