How To Add JavaScripts And Stylesheets In WordPress

Adding JavaScript and stylesheet to WordPress is a basic to the theme and plugin development. However, a beginner or casual tweaker tends to add JavaScripts and Stylesheets in WordPress using an incorrect way.

This is very inefficient and will result in more problems in the future. In this article, we will learn the right way to add JavaScripts and Stylesheets in WordPress. You might interest in reading how to create a WordPress site-custom plugin.

Overview

One of the most common mistakes made by developers is by adding the scripts and stylesheets using the wp_head function. Please take a look at the code below.

Although the above code works in the most case, yet it is not the best practice and may lead to more conflicts. For example, if your plugin load jQuery manually while other plugins load it properly will cause in jQuery loaded twice.

Under those circumstances, if it loads on every page, will result in unnecessary server resource consumption. This will crucially affect WordPress speed and performance especially for the website with medium or heavy traffic. You may also want to read best useful tips for your WordPress.

For this matter, WordPress has introduced the enqueue system. This is to ensure that whole system works properly without interrupting one another. By using the enqueue system, you can set where and when to load it as well as state its dependencies.

Add JavaScripts And Stylesheets In WordPress

There are 2 ways of adding JavaScripts and stylesheets depending on your need. You can add whether external or inline style JavaScripts and stylesheets which both will be covered in further reading.

Add External JavaScripts

Before we start adding JavaScript in WordPress, let's take a glance at these functions. These functions support five parameters.

Show/hide parameters explanation.

  • $handle – A required name of the script and must be unique. It will be used to enqueue the script.
  • $src – The location of the script. It is required whether full URL or relative path to the WordPress directory.
  • $deps – A dependency of your script. If your script depends on another script, for example, jQuery, WordPress will load it first automatically before your script. Default value: array().
  • $ver – An optional parameter for specifying script version number as a query string in the URL. Very useful for the website with a caching system for cache busting purposes. Default value: false. Possible choice:
    • integer: Any integer for example 1.0 or 1.0.1 etc.
    • false: The version number will be set equal to current WordPress version.
    • null: No version number will be added.
  • $in_footer – An optional parameter whether to enqueue the script before </body> instead of in the <head>. Default value: false.
    • true: Script will load before the </body> tag.
    • false: Script will load within <head>.

To add JavaScripts in WordPress, we need to add the following snippet to the functions.php of your active theme or a site-custom plugin.

In the snippet below, we provide all the parameters in wp_register_script(), then we will call our script using wp_enqueue_script(). And to start loading this script on our website, we will use wp_enqueue_scripts hook. Please note that wp_enqueue_script() is a WordPress function while wp_enqueue_scripts is a WordPress hook.

Add External Stylesheets

In like manner, you can also add stylesheets to your WordPress with a little modification to the code. Please take a look at our functions for the stylesheet below. Notice that, wp_register_style and wp_enqueue_style is replacing wp_register_script and wp_enqueue_script. Moreover, instead of $in_footer, it is replaced by $media.

Show/hide parameters explanation.

  • $handle – A required name of the stylesheet and must be unique. It will be used to enqueue the stylesheet.
  • $src – The location of the stylesheet. It is required whether full URL or relative path to the WordPress directory.
  • $deps – A dependency of your stylesheet. If your stylesheet has another stylesheet it depends on, WordPress will load it first before this stylesheet. Default value: array().
  • $ver – An optional parameter for specifying stylesheet version number as a query string in the URL. Very useful for the website with a caching system for cache busting purposes. Default value: false. Possible choice:
    • integer: Any integer for example 1.0 or 1.0.1 etc.
    • false: The version number will be set equal to current WordPress version.
    • null: No version number will be added.
  • $media – An optional parameter to determine which media is suitable for this stylesheet. Default value: all.
    • all: Your stylesheet is suitable for all devices.
    • screen: Your stylesheet is primarily for computer screens.
    • handheld: Your stylesheet is limited only for handheld devices which is typically small screen.
    • print: Your stylesheet is for paged material, for documents viewed on screen in print preview mode or printing purpose.

Now, let's add a stylesheet to WordPress by adding the following snippet. Please note that our WordPress hook still remains the same although we are adding the stylesheet. Apart from that, in this snippet, we are using stylesheet which is located in our plugin folder. Therefore, if it's different from yours, instead of plugins_url('mystylesheet.css', __FILE__), you might need to change it to the correct path.

Add Inline JavaScripts

Beside the method above, you can also add your JavaScript code using an inline style. However, please keep in mind that you can only add code using this method if the script is already in the queue. Let's take a look at this function which supports three parameters.

Show/hide parameters explanation.

  • $handle – A required name of the script already in the queue that you want to add the inline script to.
  • $data – A required string containing the JavaScript code you want to add.
  • $position – An optional parameter whether to add the inline script before the handle or after. Default value: after.

Now, let's add an inline code using this function. To add an inline JavaScript will require a handle of the script is already in the queue. Remember that we have enqueued a JavaScript file earlier? Yes, we will use the same handle for this function.

Add Inline Stylesheets

In the same way, you can also add an inline style to your WordPress if the stylesheet is already in the queue. Please take a look at the below function which only needs two parameters.

Show/hide parameters explanation.

  • $handle – A required name of the stylesheet already in the queue that you want to add the inline script to.
  • $data – A required string containing the style you want to add.

Unlike adding the inline script previously, you can only add an inline style after the enqueued stylesheet. This is very useful if you want to override any selector in the current theme or plugin stylesheet. To start adding an inline style, let's save the following snippet into your functions.php or site-custom plugin.

Additional Notes

Use WordPress Conditional Tags

It is best practice to use WordPress conditional tags especially if you want to use your script or stylesheet only in a certain area. This not only will help reduce stress on your server and but also more efficient.

For example, please take a look at below snippet which will load your script only on single posts and custom post type. You may also be interested in reading the introduction to WordPress conditional tags.

Use The Right Hook

In the snippets above, we use wp_enqueue_scripts hook which can only be used on the frontend. In order to add JavaScripts and stylesheets in WordPress on the back office or login page will require a different hook. Please take a look at the 8th and 15th line of the following snippet.

Use The Version Number

If your website uses a caching system, it is best to add the version number to your scripts and stylesheets. This is because you can simply increment a number of the version without having to clear your cache each time you make any changes.

Conclusion

I hope this article will give you an idea of how to properly add JavaScripts and stylesheets in WordPress. If you would like to share any tips or encounter any issue regarding this topic, please share it in the comment section.

  • If you think your friends would find this useful, please share it with them. It will allow us help more people.
  • To get more of our latest update, please subcribe to our newsletter.
  • You can also print this article for reference.
This article has been printed from https://www.jebatonline.com/articles/how-to-add-javascripts-and-stylesheets-in-wordpress/

You may also like...

1 Response

  1. Kenny Frawkin says:

    Priceless info. Thx.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.