Register JavaScript and CSS – WordPress Snippet Generator

This snippet tool is intended to speed up, simplify, and standardize the registration of CSS and JavaScript. Please scroll past the tool to learn more about how to correctly fill out the forms and implement the code.

  • General
  • Settings
  • Style.css
  • Scripts
  • CSS
  • Code

General

Item
Input

Function Settings

Item
Input

Style.css

Item
Input

Include Javascript File #1

Item
Input

Include Javascript File #2

Item
Input

Include Javascript File #3

Item
Input

Include Javascript File #4

Item
Input

Include Javascript File #5

Item
Input

Include CSS #1

Item
Input

Include CSS #2

Item
Input

Include CSS #3

Item
Input

Include CSS #4

Item
Input

Include CSS #5

Item
Input

Copy Code

Your customized code snippet is below. Be sure to fully read the instructions that follow before adding this code to your WordPress theme.

Register and Enqueue Scripts and Styles

Add this code to your functions.php file. Scroll down to learn more.

            

// Register and Enqueue Javascript
add_action( 'wp_enqueue_scripts', '{{themeSlug || 'your_theme_slug'}}_enqueue_script' );

function {{themeSlug || 'your_theme_slug'}}_enqueue_script() {

// Scripts Included in Head

        wp_register_script( '{{script1Handle}}', '{{script1Src}}', array ( '{{script1Deps}}' ), {{script1Ver}}, false );

        wp_enqueue_script( '{{script1Handle}}', '{{script1Src}}', array ( '{{script1Deps}}' ), {{script1Ver}}, false );

        wp_register_script( '{{script2Handle}}', '{{script2Src}}', array ( '{{script2Deps}}' ), {{script2Ver}}, false );

        wp_enqueue_script( '{{script2Handle}}', '{{script2Src}}', array ( '{{script2Deps}}' ), {{script2Ver}}, false );

        wp_register_script( '{{script3Handle}}', '{{script3Src}}', array ( '{{script3Deps}}' ), {{script3Ver}}, false );

        wp_enqueue_script( '{{script3Handle}}', '{{script3Src}}', array ( '{{script3Deps}}' ), {{script3Ver}}, false );

        wp_register_script( '{{script4Handle}}', '{{script4Src}}', array ( '{{script4Deps}}' ), {{script4Ver}}, false );

        wp_enqueue_script( '{{script4Handle}}', '{{script4Src}}', array ( '{{script4Deps}}' ), {{script4Ver}}, false );

        wp_register_script( '{{script5Handle}}', '{{script5Src}}', array ( '{{script5Deps}}' ), {{script5Ver}}, false );

        wp_enqueue_script( '{{script5Handle}}', '{{script5Src}}', array ( '{{script5Deps}}' ), {{script5Ver}}, false );


// Scripts Included in Footer


        wp_register_script( '{{script1Handle}}', '{{script1Src}}', array ( '{{script1Deps}}' ), {{script1Ver}}, true );

        wp_enqueue_script( '{{script1Handle}}', '{{script1Src}}', array ( '{{script1Deps}}' ), {{script1Ver}}, true );

        wp_register_script( '{{script2Handle}}', '{{script2Src}}', array ( '{{script2Deps}}' ), {{script2Ver}}, true );

        wp_enqueue_script( '{{script2Handle}}', '{{script2Src}}', array ( '{{script2Deps}}' ), {{script2Ver}}, true );

        wp_register_script( '{{script3Handle}}', '{{script3Src}}', array ( '{{script3Deps}}' ), {{script3Ver}}, true );

        wp_enqueue_script( '{{script3Handle}}', '{{script3Src}}', array ( '{{script3Deps}}' ), {{script3Ver}}, true );

        wp_register_script( '{{script4Handle}}', '{{script4Src}}', array ( '{{script4Deps}}' ), {{script4Ver}}, true );

        wp_enqueue_script( '{{script4Handle}}', '{{script4Src}}', array ( '{{script4Deps}}' ), {{script4Ver}}, true );

        wp_register_script( '{{script5Handle}}', '{{script5Src}}', array ( '{{script5Deps}}' ), {{script5Ver}}, true );

        wp_enqueue_script( '{{script5Handle}}', '{{script5Src}}', array ( '{{script5Deps}}' ), {{script5Ver}}, true );

	
}
     
            

// Register and Enqueue CSS
add_action( 'wp_enqueue_scripts', '{{themeSlug || 'your_theme_slug'}}_enqueue_style' );

function {{themeSlug || 'your_theme_slug'}}_enqueue_style() {


        wp_register_style( '{{css1Handle}}', '{{css1Src}}', array ( '{{css1Deps}}' ), {{css1Ver}}, '{{css1Media}}' );

        wp_enqueue_style( '{{css1Handle}}', '{{css1Src}}', array ( '{{css1Deps}}' ), {{css1Ver}}, {{css1Media}} );

        wp_register_style( '{{css2Handle}}', '{{css2Src}}', array ( '{{css2Deps}}' ), {{css2Ver}}, {{css2Media}} );

        wp_enqueue_style( '{{css2Handle}}', '{{css2Src}}', array ( '{{css2Deps}}' ), {{css2Ver}}, {{css2Media}} );

        wp_register_style( '{{css3Handle}}', '{{css3Src}}', array ( '{{css3Deps}}' ), {{css3Ver}}, {{css3Media}} );

        wp_enqueue_style( '{{css3Handle}}', '{{css3Src}}', array ( '{{css3Deps}}' ), {{css3Ver}}, {{css3Media}} );

        wp_register_style( '{{css4Handle}}', '{{css4Src}}', array ( '{{css4Deps}}' ), {{css4Ver}}, {{css4Media}} );

        wp_enqueue_style( '{{css4Handle}}', '{{css4Src}}', array ( '{{css4Deps}}' ), {{css4Ver}}, {{css4Media}} );

        wp_register_style( '{{css5Handle}}', '{{css5Src}}', array ( '{{css5Deps}}' ), {{css5Ver}}, {{css5Media}} );

        wp_enqueue_style( '{{css5Handle}}', '{{css5Src}}', array ( '{{css5Deps}}' ), {{css5Ver}}, {{css5Media}} );

        

        if ( is_child_theme() ) {
        
                // Load parent stylesheet first if this is a child theme.
                wp_enqueue_style( '{{textDomain || 'your-text-domain'}}-parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
                
        }


        // Load active theme stylesheet.
        wp_enqueue_style( '{{textDomain || 'your-text-domain'}}-theme-stylesheet', get_stylesheet_uri(), false );

}


    

This snippet generator is designed to provide theme developers and webmasters the code they need to register and/or enqueue JavaScript and CSS files through the functions.php file when creating a new WordPress theme or modifying an existing theme.

Introduction to the Tool

This tool may seem a little overwhelming at first glance, but it’s actually quite simple. You’ll find that in just a few minutes you’ll be able to produce a correctly coded snippet that will allow you to integrate 3rd-party JavaScript or CSS files into your WordPress theme.

Why would you want to include 3rd-party files

Many instances will arise when you may want to register or enqueue a file that’s not natively bundled within the WordPress core package. Often this will arise when you’re looking to add a new feature or functionality to your website, or if you decide to adopt one of the many wonderful templating frameworks that have been developed over the last few years.

This tool is a great example. In order to build this snippet tool, I needed to add several new JavaScript files including Angular.js and a supporting library, as well as a jQuery-dependent JavaScript file called clipboard.js.

Angular allowed me to build fairly complex AJAX form functionality, like populating the code snippet box without having to submit the form for processing and retrieval. Clipboard.js provided support on many browsers for the automated copy-to-clipboard feature, also applied to the code snippet box.

Each of these files were ones that WordPress does not natively bundle and support, so I needed to pull them in from elsewhere. In this case, I was lucky enough to find them all hosted on stable public content delivery networks (CDNs):

https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js
https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js

Using the tool above, I am provided with some output that looks like the snippet below but is contained within a wrapper function:

wp_enqueue_script( 'angularjs', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js', array ( '' ), 1.5.7, true );
wp_enqueue_script( 'angular-route', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js', array ( '' ), 1.5.7, true );
wp_register_script( 'clipboard', 'https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', array ( 'jquery' ), 1.5.16, true );

These lines, when linked to the wp_enqueue_scripts hook, will output these files into the footer of my pubic-facing website, wrapped in all the necessary HTML script tags.

In my case, having these resources available on the public-facing website meant I was able to build the tool you’re working with today.

Hosting CSS and JavaScript Files

There are many ways to host the JavaScript and CSS files you’re needing to register or enqueue. Here is a quick overview of your options.

Public CDN: If the library you’re enqueueing is widely adopted you’ll very likely find that it’s been added to a public CDN. These are wonderful options when available because it allows you to harness the page-speed boosting power of browser caching.

For instance, in the example I wrote about above, I needed to include Angular.js, a popular script produced by the team over at Google. Because it is hosted on their powerful CDN, I was able to pull from (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js).

It’s very likely that many visitors to this website will have visited another website that also links to this same file, and therefore they will have a local copy of this script in their browser. Instead of downloading a new copy when they come to use this tool, their browser simply uses the file stored locally. This allows the tool load just that little bit faster.

Here are a few of the best public CDNs:

http://www.jsdelivr.com/
http://www.asp.net/ajaxlibrary/cdn.ashx
https://developers.google.com/speed/libraries/devguide
http://code.jquery.com/
http://www.bootstrapcdn.com/
http://osscdn.com/
https://cdnjs.com/

Private CDNs: Private CDNs are another great option for boosting delivery speeds. There are a number of fool-proof options like https://www.maxcdn.com/ and https://www.keycdn.com/. But if you’re more adventurous, I highly recommend using a few Amazon Web Services tools like S3 and Cloudfront to build your own. Once it’s up and running, there is almost no cost when using AWS, and you’ll find the delivery speeds are very respectable.

WordPress Media Library: While I hesitate to mention this one, it’s a totally viable option, but only when you’re working on a website for yourself or a client where the URL is going to remain consistent. In order to host your file this way, simply open your WordPress dashboard and navigate to Media > Add New. Then drag your file into the uploader interface and look for the “edit” link when the file is listed in the completed uploads section below. The “edit” link will open the file editor window, where you will find a field on the right side labeled “File URL.” Copy this URL and paste it into this snippet tool as the file source for your new enqueue.

Populating the tool

To use the snippet generator, enter the relevant information in the fields folowing these steps.

  1. Enter the theme slug and text domain in the General tab. The theme slug comes before any variables and functions to make them unique to your templating so there are no conflicts with other themes, plugins, or Core features. The text domain aids in determining which translatable strings are part of your template, and is a unique ID.
  2. Go to Settings and choose if you want to support scripts and/or styles.
  3. If you are using the tool to register/enqueue the style.css file, go to the style.css tab and choose if you want to allow main stylesheet and child theme support.
  4. Go to Scripts next, if you are registering/enqueuing Javascript files in addition to CSS.
    1. Register/Enqueue: In the Scripts tab, choose to register or enqueue the Javascript. It’s important to understand that if you are registering something, you are not outputting it to a public view, you are just making it available so you can call upon it later, whereas when you are enqueuing you are actually displaying it on the public-facing side of the website.
    2. Header/Footer: Choose where you want the script located. Whenever possible, it’s best to load scripts in the footer so that your HTML does not load after the scripts are fully loaded. Having many JavaScript files in the header of your website will substantially slow down your page load speed and is particularly trying on mobile devices.
    3. Handle: This is the unique ID we’re attaching to this script. See popular script handles that ship with WordPress so that you’re not choosing a handle that conflicts with a core asset.
    4. SRC: This is the full URL to the file.
    5. Dependencies: This is one or multiple script handles that the script you’re loading depends on – they will be loaded before your script so that your script can function properly. These are script handles separated by commas.
    6. Version Number: Script version number, if applicable.
  5. Repeat this process for as many scripts as you would like to include.
  6. Go to CSS and enter in the relevant information.
    1. Follow the steps outined in the scripts section above.
  7. The Code tab will output all the code you have entered into the snippet generator.

What do the columns in the tool mean?

To the right of the input area, you will see four columns: Req., Valid, Notes, and Strong.

  • Req. – Determines if this field is required or not. It will be red when required.
  • Valid – Tells you whether the field has valid charicher input.
  • Notes – Notifies you of any important notes about this field.
  • Codex – Links to the WordPress codex.

Understanding the Code Snippet Output

Here’s an example of the code snippet output from this tool:

// Register and Enqueue Javascript

add_action( 'wp_enqueue_scripts', 'your_theme_slug_enqueue_script' );
function your_theme_slug_enqueue_script() {

        // Scripts Included in Footer
        wp_register_script( 'my_script', 'https://www.example.com/my-script.js', array ( 'jquery' ), 1.1.1, true );

}
   
// Register and Enqueue CSS

add_action( 'wp_enqueue_scripts', 'your_theme_slug_enqueue_style' );
function your_theme_slug_enqueue_style() {

        wp_enqueue_style( 'my-style', 'https://www.example.com/my-style.js', array ( 'jquery' ), 1.1.1, all );

        if ( is_child_theme() ) {
                // Load parent stylesheet first if this is a child theme.
                wp_enqueue_style( 'your-text-domain-parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );    
        }

        // Load active theme stylesheet.
        wp_enqueue_style( 'your-text-domain-theme-stylesheet', get_stylesheet_uri(), false );
}

As you can see it can be broken down into two distinct sections.

(1) Scripts

The scripts section includes a wrapper function, which in our example code is called your_theme_slug_enqueue_script and is linked to the wp_enqueue_scripts hook. Within this wrapper function are the wp_register_script or wp_enqueue_script functions that direct WordPress to either register the script for later use or enqueue it for immediate output into the public-facing theme templating.

(2) CSS

The CSS section is very similar in format to the scripts section and uses wp_register_style and wp_enqueue_style in place of wp_register_script or wp_enqueue_script. Additionally, the snippet may include several additional lines of code that enqueue the main theme stylesheet style.css in the root of your theme’s folder and conditionally includes the style.css of the parent theme if the current theme is a child theme.

Where to put Code Snippet Output

The code produced by this tool should be added directly to your functions.php file. I strongly recommend that you do this via FTP rather than through the WP Core Theme Editor, as you’ll want to be able to quickly revert back if your functions.php file is improperly formatted. This is a common cause of the dreaded White Screen of Death.

Modification of the Snippets

Existing Wrapper Functions
You may find that your theme already has some of the elements produced by this generator, such as the wrapper functions and hook to fire off the registration or enqueueing of the contained resources. If this is the case, you may still use this tool but will need to isolate the registration functions or enqueue functions and paste those into your existing wrapper function in your theme’s functions.php file.

For example, if your scripts section snippet looks like this:

// Register and Enqueue Javascript

add_action( 'wp_enqueue_scripts', 'your_theme_slug_enqueue_script' );
function your_theme_slug_enqueue_script() {

        // Scripts Included in Footer
        wp_register_script( 'my_script', 'https://www.example.com/my-script.js', array ( 'jquery' ), 1.1.1, true );

}

But you already have a wrapper function in your functions.php file that uses the wp_enqueue_scripts hook, then you’ll want to isolate just this line:

wp_register_script( 'my_script', 'https://www.example.com/my-script.js', array ( 'jquery' ), 1.1.1, true );

Add this line into your existing wrapper function.

Conditional CSS
Sometimes you only want your CSS or Javascript file to be utilized by specific browsers. This is most often the case when dealing with older versions of Internet Explorer. In these cases, you can add a second line of code below any of your enqueue functions so that it looks like this:

// Register and Enqueue CSS

add_action( 'wp_enqueue_scripts', 'your_theme_slug_enqueue_style' );
function your_theme_slug_enqueue_style() {

        wp_enqueue_style( 'my-style', 'https://www.example.com/my-style.js', array ( 'jquery' ), 1.1.1, all );
        wp_style_add_data( 'my-style', 'conditional', 'lt IE 9' );

}

Notice that the wp_style_add_data function is linked to the wp_enqueue_style by way of the unique ID.

Conclusion

I hope this tool helps assist with your next dev project. Please use the comments section below for any questions you may have about use scenarios.


Written exclusively for

Nimbus Themes Publishing Logo

About the Author

Evan Scoboria is the co-founder, and developer at Shea Media LLC, the team behind Nimbus Themes, this magazine, and a bunch of very happy clients. He co-founded Shea Media with his wife Kendall in 2009. Evan enjoys hunting, fishing, code, cycling, and most of all WordPress!

Read all posts

Post a Comment

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