WordPress Templates

Underscores Menu Exercise pt 2: Enqueuing Styles

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 scripts in the right order?
  • 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 120. You are looking for the wp_enqueue_style() and wp_enqueue_scripts() functions.

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

wp_enqueue_style( 'frunkle-2018-style', get_stylesheet_uri() );

Now, go to the Font-Awesome get started page. ┬áMake sure that you select the CSS option rather than the SVG/JS option. The new SVG/JS method is “doable” in WordPress, but slightly more complex, involving things we haven’t covered in class yet (filters).

Copy the HREF value from the font-awesome “Use Font Awesome Free CDN” section.

Change your copied wp_enqueue_style url to the following (using the URL you’ve copied from Font Awesome). The first part is called “the handle”. For it, keep your theme name, not mine [frunkle-2018], and add “-font-awesome”.

        wp_enqueue_style( 'frunkle-2018-font-awesome', 'https://use.fontawesome.com/releases/v5.0.8/css/all.css');

What is happening here?

The Handle

A HANDLE is a name for the stylesheet or script you wish to download. If you start with your theme name, it greatly increases the chances that your handle will not conflict with the scripts or stylesheets of plugins, etc.

The Stylesheet (or Script) Location

Then we include the location of the stylesheet or script. In the original that we copied, the location of the stylesheet is inside the theme. As a result, underscores dynamically generates the URL with just the get_stylesheet_uri() function.

With Font-Awesome, however, we do not need to dynamically generate the URL because it is already absolute. In other words, we can replace the get_stylesheet_uri() part with just ‘https://use.fontawesome.com/releases/v5.0.8/css/all.css’.

( Later, when we enqueue scripts, we’ll need to dynamically construct the URLs ).


Figure out how to enqueue a google font (Merriweather Sans, bold and extra-bold weights). Then set your headings to that font.

Figure out how to use the newly downloaded Font Awesome in your Social Menu. When using the new Font Awesome 5, our font-family declaration depends on which Font Awesome collection you are using:

  • Font Awesome Free: “Font Awesome 5 Free”
  • Font Awesome Pro: “Font Awesome 5 Pro”
  • Font Awesome Brands: “Font Awesome 5 Brands”

[reference: https://stackoverflow.com/questions/47894414/the-before-pseudo-element-not-working-in-font-awesome-v-5 ]

Hints for the Font-Awesome part:

  • you won’t be adding any of the “traditional” font-awesome classes. Instead, you will use the before pseudo-class in your css (injecting the icons into the HTML the way IcoMoon does it).
  • you will need to get the Unicode value for each icon. You can get these at the Font Awesome site.

Finally, use the screen-reader-text class that comes with underscores to hide the words associated with each icon. That class works like the famous visually-hidden class. This will require editing the code you have put into footer.php.

The WordPress Code Reference for wp_nav_menu will again be very helpful in this task. In the screenshot below, we see see the link text is now not visible, while still remaining accessible to screenreaders.

From an earlier version of this exercise, we see the social icons are set to not have the text. With CSS rather than additional classes, they’re styled with circles etc. (You don’t have to do this styling, unless you want to).



And if you’re feeling ambitious (or you finish the lab tasks early), figure out how to load a simple JavaScript that sends a message to the console on page load.