Learn how to properly embed CSS and JavaScript files into a WordPress theme

When developing a WordPress theme or modifying an existing theme, you may want to include or upload additional CSS or JavaScript files into that theme in order to customize its design.

But you must pay attention to downloading these files correctly and follow the standard method followed by WordPress, in order to ensure that there are no compatibility problems that affect the site’s performance and to ensure that it works correctly.

In today’s article you will learn how to add your CSS and Javascript files the right way by putting them in a queue. This list enables WordPress to find these files and any dependencies it needs (such as the jQuery library) and learns how to take advantage of WordPress hooks to compile and import your layouts and scripts from one place.

What is the correct way to add CSS and JavaScript in a WordPress theme?

The basic style.css file is required for any WordPress theme, but as a theme developer you may need to write pieces of code and include them in files, whether CSS files or JavaScript files, to modify this template, or use ready-made files and add them to the template to expand its functionality and design it in your own way.

There are several ways to include CSS or JavaScript code in your WordPress site, and in fact the method that most template developers resort to is to upload these files into the site header (within the template file header.php) as follows:

Most developers also resort to loading JavaScript files in the site footer – before the body closing tag – instead of loading them in the header in order to speed up the template and reduce the loading time of site pages (within the template file footer.php) as follows

Note that we used the get_template_directory_uri() function in the previous code to get a relative URL, which returns us the current directory or folder address of the current template activated on the website.
We also used the function get_stylesheet_directory_uri() for the same purpose, as it also returns the directory address of the current template format file.

But you must pay attention because if you have a primary parent template and a child child template, in this case the get_template_directory_uri function always returns you the address of the parent template directory, while the get_stylesheet_directory_uri function returns you the address of the parent template or child template formats file directory depending on the place or position from which it is called. .

In fact, this method of calling files within WordPress themes is not the method recommended by WordPress developers   and the WordPress Codex , which are the official sites for the WordPress developer community.

The recommended correct way to add JavaScript and CSS files to your theme is by placing them in the queue provided by WordPress within the template functions file functions.php (this process is called Enqueue ), as we will explain in detail in the following paragraphs.

Read more: What is a functions.php file in WordPress? What is its importance? How do you edit it?

Note:
WordPress includes a set of JavaScript files as part of its core architecture, including the popular JavaScript library jQuery. So before you add your own external JavaScript files, make sure you can take advantage of these built-in codes to accomplish what you want.

Steps to add CSS and JavaScript files to a WordPress template through the queue

You need to upload the layout files and JavaScript files into the template’s functions.php file in an Enqueue queue to add them to the HTML code of the page when it is created.

This is done through the ready-made functions that WordPress provides for this matter, which are:

• wp_enqueue_style(): function used to insert CSS files into the queue.
• wp_enqueue_script(): function used to insert JavaScript files into the queue.

The general form of writing the wp_enqueue_style function is as follows:

As you can see from the code above, this function includes five parameters (the first two are mandatory and the rest are optional). Below is the meaning of each parameter:

1. $handle is a string that represents a distinguished name or identifier for the requested format.
2. $src A text string representing the path to the desired format file.
3. $deps is an optional parameter used if the layout file depends on other files or libraries. In this case, you must pass these layouts in an array, and the format file will not be loaded unless its layouts are loaded first.
4. $ver is an optional parameter that represents the version number of the format.
5. $ media is an optional parameter through which you can specify the type of media in which you want to download the format file (display on all media, display on large screens, display on mobile devices…)

For example, if you want to upload a style file named mystyle.css that is located in a folder named CSS in a folder for your template, you must call the function as follows:

While the general form of the wp_enqueue_script function is as follows:

This function also includes five parameters, the first two are mandatory and the rest are optional. The meaning of each parameter is as follows:

1. $handle is a string representing the unique name of the script.
2. $src A text string representing the path to the requested JavaScript file.
3. $ deps is an optional parameter used if the JavaScript file depends on other files or libraries. In this case, you must pass these arguments in the form of an array, and then this script will not be loaded unless its arguments are loaded first.
4. $ver is an optional parameter representing the version number.
5. $ in_footer is an optional parameter that represents a logical value. If its value is true (which is the default value for the parameter if you do not pass any value to it), then the script will be called in the footer of your HTML code. If its value is false, the script will be loaded in the header. HTML.

For example, if you want to load a JavaScript file called myscript.js into your template, and this file depends on the jquery library, in this case you can place it in a folder called js in your template folder and pass the parameters to the wp_enqueue_script function as follows:

The importance of integrating all formatting codes and scripts into one function

It is better from a programming perspective – according to the recommendations of the WordPress developer community – to combine all the formatting code or JavaScript files in one place, call them from within a single function definition, and then call this function.

To do this, we can define a function, let it be add_theme_scripts , and call in it all the formatting files and JavaScript files required to make the template. Then we will link this function to the wp_enqueue_scripts action hook , which is considered a suitable linking tool to include all the formatting and scripts that are applied to the front end of the site, as shown in the following code.

Note 1: Although the hook name includes scripts, it is used to insert both JavaScript and CSS files.

Note 2: If you need to include files in the backend of the site (i.e. in the admin pages) and not in the frontend pages of the site, then you can use the admin_enqueue_scrips action hook to call the add_theme_scripts function as follows:

If you want to use it in the login screen, in this case use the login_enqueue_scripts action hook to call the function as follows:

Read more:
Explanation of WordPress Hooks and their importance for theme and plugin developers

Explaining adding JavaScript code to your WordPress site in the easiest way .

Finally, it should be noted that if the template or add-on that you are developing contains a programming script that only needs to implement a specific thing on one page only, then in this case you only need to download the programming code on that page only, and there is no need to upload it to all the pages of the site that you are developing. It is not used there. Here you can rely on Conditional Tags in WordPress to do this task easily.

Conclusion:

In this article, we learned about the recommended best practices for dealing with CSS format files and external JavaScript files that need to be added to a WordPress template and used in the site interface, by relying on the wp_enqueue_scripts hook in WordPress, which handles the process of managing these files and uploading them and loading the scripts that depend on them. It is on the front end of the site.

Of course, there are a few other different ways that JavaScript and CSS can be included in a WordPress theme. However, this method is considered one of the best methods recommended by the WordPress Developer Guide, so we recommend adopting it when developing WordPress templates – or even developing WordPress plugins – because it ensures that your template or plugin works in the correct way.

Have you added JavaScript or CSS to your site before and why? Have you ever tried using this method? Share your experience with us in the comments below the article.