Welcome to your guide on including CSS, JavaScript, images, and fonts in your themes.
With this lesson, you will:
- describe how to enqueue styles and scripts,
- include CSS in your theme either using stylesheets or inline styles,
- include JavaScript in your theme by either using an external file or inline JavaScript,
- include images in your theme, and
- include fonts in your theme.
Enqueue styles and scripts
How would you enqueue styles and scripts in your theme?
Well, it’s very similar to how you would enqueue CSS or JavaScript for developing a WordPress plugin. Do check out the enqueuing CSS or JavaScript lesson within the Beginner WordPress developer learning pathway.
Essentially, in order to enqueue or include your CSS or JavaScript files within your themes, you would use the WP enqueue scripts action hook.
Including CSS
Let’s start with including CSS in your theme, either using stylesheets or inline styles. As an example, here in the Twenty Twenty-Two theme, we see within the functions.php file that they have enqueued the styles by using the WP enqueue scripts action hook.
We see here specifically get template directory URI, that function concatenated with the style.css file will essentially make the CSS styling available in the front end. In case you ever need to add inline CSS, WordPress has the WP add inline style function.
Including JavaScript
Now let’s take a look at including JavaScript in your theme by either using an external file or inline JavaScript. Here we have an example within the Twenty Twenty-One theme.
We have a couple of JavaScript files being enqueued. We’re using the WP enqueue scripts action hook and these files are located within the ‘assets/js’ folder. And similar to adding inline CSS, you can add inline JavaScript by using the WP add inline script function.
Including images
How would you include images in your theme?
We’re going on the assumption here that you’re not building a block theme. Use an example of the code that you could choose to use. Place your image file within the ‘assets/img’ folder and use the function get_parent_theme_file_URI, which will get the URL of your theme.
<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />
Including fonts
Let’s now take a look at how to include fonts in your theme using theme.json.
You can include fonts within your theme by using theme.json. Here’s an example of how this was done within the Twenty Twenty-Two theme. You see that the font files have been added to assets fonts. And then within theme.json under settings.typography.fontFamilies, we see under font face how the file has been referenced in order to generate a variable that can be used within styles.
This is what the variable would look like and you would just have to replace the slug with the one you set under settings.
var( --wp--preset--font-family--{$slug} )
And this is an example of using the source serif pro font for the post title.
var( --wp--preset--font-family--source-serif-pro )
Next steps
If you’re wanting to take a look at the functions mentioned here in this lesson, take a look at the reference document available to you on WordPress.org. You can also take a look at the theme handbook to read up more on how to include assets.