Hi, welcome to this lesson on including assets in your block theme.
With this lesson, you'll describe how to enqueue styles and scripts, include CSS in your theme
using stylesheets or inline styles, include JavaScript in your theme using an external
file or inline JavaScript, include images in your theme, and include fonts in your theme
using theme.json.
So let's dive in.
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.
So 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.
Let's start with including CSS in your theme, either using stylesheets or inline styles.
As an example, here in the 2022 theme, we see within the functions.php file that they
have enqueued the styles by using the WP enqueue scripts action hook.
So 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.
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 2021 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.
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.
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 2022 theme.
You see that the font files have been added to assets fonts.
And then within theme.json under settings, typography, font families, 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.
And this is an example of using the source serif pro font for the post title.
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 within