This article was originally published on webinuse.com
In the last article, we talked about How to simply convert any HTML template into a WordPress theme in under 10 minutes. 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 and this template can be found for FREE on aptex.gumroad.com.
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 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.
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.
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.
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 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
/**
* 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. 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. 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.
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
/**
* 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, 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 we will enqueue app.js file from the theme root that comes with the template.
<?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. 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 by Nat Miletic. 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.
Affiliate
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like How to bind events to dynamically created elements in JavaScript.
Top comments (0)