Embed assets in a WordPress theme
Tags: wordpress, theme, programming
Published: 2021-11-22 15:17:04

*This article was originally published on [webinuse.com](https://webinuse.com/embed-assets-in-a-wordpress-theme/)*

In the last article, we talked about [How to simply convert any HTML template into a WordPress theme in under 10 minutes](https://webinuse.com/how-to-convert-any-html-template-into-wordpress-theme/). Today we are going to continue our journey on creating a WordPress theme out of any HTML template. We are going to see how to embed assets in a WordPress theme.

In today’s article, we are going to continue our journey, but we are going to use a real template. This template is courtesy of [Nathan](https://twitter.com/natension) and this template can be found for FREE on [aptex.gumroad.com](https://aptex.gumroad.com/l/portfolio-template-01?campaign_name=webinuse).

In order to be able to embed assets in a WordPress theme first thing we need to do is create a file called functions.php.

### What is functions.php

Functions.php is the file where we extend our theme’s functions. It is one of the default WordPress files, and it acts like our theme’s plugin. We leverage WordPress hooks and functions to achieve new or add existing functionality using PHP.

If we want to add widget area, woocommerce support, menu support, and a lot of other things, we do that by editing functions.php.

According to [WPBeginner](https://www.wpbeginner.com/glossary/functions-php/) the functions.php file automatically loads when you install and activate a theme on your WordPress site.

For more information about functions.php, we can [visit official Developer Resources on WordPress.org](https://developer.wordpress.org/themes/basics/theme-functions/).

### How to create functions.php

We need to create functions.php at the root of our theme. In our last article, in the end, we explained [how and where themes are uploaded](https://webinuse.com/how-to-convert-any-html-template-into-wordpress-theme/).

After we create our functions.php we are going to paste some code inside. For now, we are going to assume that the only thing we want to include is style.css file.

WordPress has a special hook for embedding assets and it is called `wp_enqueue_style()`. This hook, or function, is used when we want to enqueue style in our WordPress theme. Style is anything that is being used for styling our website, like CSS or fonts. This is the only, proper, way to embed assets in a WordPress theme.

Let’s take a look at `wp_enqueue_style()` function parameters.

```php
wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )
```

### Enqueue style parameters

According to official [WordPress docs](https://developer.wordpress.org/reference/functions/wp_enqueue_style/) as the first parameter we need to pass the `$handle`, that is the name of stylesheet, and it should be unique. The second parameter is `$src` and it holds the source of the style that we want to embed.

This source can be anything. From third-party URLs like https://cdn.example.com/path-to-style, or path to a local file. Path to local file is relative to WordPress root directory. Also, when using external stylesheets, `wp_enqueue_style()` doesn’t need protocol like http or https. It is enough to start our link with a double forward slash, `//`. There is also another option when we want to use path relative to our theme, but we will look at that later.

Why `$handle` needs to be unique? Because of the third parameter, `$deps`. This parameter holds an array of handles that this stylesheet depends on.

The fourth parameter is `$ver` that holds the current version of the stylesheet. This is used for multiple purposes like caching or making sure that our site serves the right stylesheet. **NOTE:** This should be updated every time we update our stylesheet.

The last parameter is `$media`. We pass media query to this parameter if it is applicable. E.g. `(max-width: 1024px)`.

### How to enqueue style.css

The first thing we need to do is embed style.css stylesheet in our theme.

```php

<?php
 
/**
 * theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package theme
 */
 
 
/**
* Enqueue scripts and styles.
*/
function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), 0 );
 
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

```

Let’s analyze our code. After a few comments, we created a function `theme_scripts`. Inside that function, we embedded our style.css file. Instead of using a path, as everyone would expect, there is a [built-in WordPress function for getting the default stylesheet](https://developer.wordpress.org/reference/functions/get_stylesheet_uri/). This function, `get_stylesheet_uri()`, retrieves stylesheet URI for the current theme.

After our function `theme_scripts` we used built-in WordPress function, hook, [`add_action` that will register our function](https://developer.wordpress.org/reference/functions/add_action/). We will not get into writing more about add_action, but we will say that if we want to enqueue script, or enqueue style, we need to use this exact same code.

```php 
add_action( 'wp_enqueue_scripts', 'function_name' );
```

We only need to change `'function_name'` parameter to match our function’s name.

### How to embed other assets to our WordPress theme

Let’s say we want to add Google Fonts, we only need to add another `wp_enqueue_script` to our `theme_scripts` function.

```php
<?php
 
/**
 * theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package theme
 */
 
 
/**
* Enqueue scripts and styles.
*/
function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), 0 );
    
    //We have added this line of code
    wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Roboto+Slab:wght@900&display=swap', array(), 0);
 
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
```

What we did? We picked a [Google Fonts](https://fonts.google.com/), we copied the link, and pasted it as `$src`.

### How to enqueue script

Instead of using `wp_enqueue_style` function, we are going to use `wp_enqueue_script` function. It is the same as `wp_enqueue_style` only the last parameter is different.

Instead of `$media` parameter we have `$in_footer` parameter. It is `false` by default. This parameter decides whether our script will be embedded in header or footer. If it is `false` then our script will be embedded in header, otherwise in footer.

Let’s enqueue script to our theme. Since we are using [Portfolio HTML template](https://aptex.gumroad.com/l/portfolio-template-01) we will enqueue app.js file from the theme root that comes with the template.

```php

<?php
 
/**
 * theme functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package theme
 */
 
 
/**
* Enqueue scripts and styles.
*/
function theme_scripts() {
    wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array(), 0 );
    wp_enqueue_style('google-fonts', '//fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=Roboto+Slab:wght@900&display=swap', array(), 0);
    
    //We have added this line of code
    wp_enqueue_script( 'default-js', get_template_directory_uri() . '/app.js', array(), 0, true );
 
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

```

As shown in the example above, we just added `wp_enqueue_script` to `theme_scripts`. But there is one thing we haven’t seen before. It is [`get_template_directory_uri()` function](https://developer.wordpress.org/reference/functions/get_template_directory_uri/). This function basically retrieves the URI of the currently active theme.

> If you want to learn more about what is WordPress you can check this awesome course [Building websites with WordPress](https://gumroad.com/a/882791539/kSrqD) by [Nat Miletic](https://twitter.com/natmiletic). This course is excellent for those who want to start with WordPress. Nat is teaching us what is WordPress, what can we use it for, how can we use it, in a really nice and simple way.
> 
> <cite>Affiliate</cite>

<meta charset="utf-8">If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [How to bind events to dynamically created elements in JavaScript](https://webinuse.com/how-to-bind-events-to-dynamically-created-elements/).