How to add CSS and JavaScript Files to WordPress.

It’s easy to add CSS and JavaScript files to WordPress, even without a plugin.

You only have to expand the functions.php within your theme folder (or child-theme folder).

How to add CSS Files to WordPress? #

WordPress offers an action hook called “wp_enqueue_scripts” to add CSS files to your WordPress Website.

function addCustomStyles(){
    wp_enqueue_style('{CSS-handle}',get_stylesheet_directory_uri().'/{custom-css}.css');
}

add_action('wp_enqueue_scripts', 'addCustomStyles');

How to add CSS Files to specific WordPress Pages? #

You are also able to expand the code above to add specific files only to a given WordPress page.

function addCustomStyles(){
    global $post;

    if(null == $post){
        return;
    } 
    

    if($post->ID == 500){
         wp_enqueue_style('{CSS-handle}',get_stylesheet_directory_uri().'/{custom-css}.css');
    }
}

add_action('wp_enqueue_scripts', 'addCustomStyles');

How to register CSS Files on WordPress and add them on multiple sites? #

The following code allows you to register your CSS Files and use them on specific pages.

function registerCustomStyles(){

    wp_register_style('{CSS-handle-1}',get_stylesheet_directory_uri().'/{custom-css}.css');
    wp_register_style('{CSS-handle-2}',get_stylesheet_directory_uri().'/{custom-css-2}.css');
}

add_action('init', 'registerCustomStyles');

function addCustomStyles(){
    global $post;

    if(null == $post){
        return;
    } 
    

    if($post->ID == 500){
        wp_enqueue_style('{CSS-handle-1}');
    }

    if($post->ID == 600){
        wp_enqueue_style('{CSS-handle-2}');
    } 

    if($post->ID == 700){
        wp_enqueue_style('{CSS-handle-1}');
        wp_enqueue_style('{CSS-handle-2}');
    }
}
add_action('wp_enqueue_scripts', 'addCustomStyles');

How to add JavaScript Files to WordPress? #

WordPress offers an action hook called “wp_enqueue_scripts” to add JavaScript Files to WordPress.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js');
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

How to add JavaScript Files including jQuery on your WordPress Website? #

WordPress makes it easy to add JavaScript files to WordPress, which requires jQuery to work. You only have to expand the calling script with an additional parameter.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

There are many more scripts that you can easily add similar to jQuery. Have a look at the WordPress code reference for a list of all available libraries. (click here to open the WordPress Code Reference Website.).

It’s also possible to add multiple libraries at once, as you can see below.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js', array('jquery', 'jquery-form'));
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Add JavaScript Files to the Footer #

It’s also possible to add your scripts to the footer of your website. This is recommended to ensure a faster loading time to ensure better Core Web Vitals scores.

function addCustomScripts(){
    wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js', array(), null, true);
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

How to add JavaScript Files to specific WordPress pages? #

You can add JavaScript Files to specific pages only. You only have to expand the code above, as you can see below. This will save resources, ensure better loading times and also provide higher Core Web Vital scores.

function addCustomScripts(){
    global $post;

    if(null != $post){
       return;
    }

    if($post->ID == 500){
        wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js');
    }
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

How to register JavaScript Files on WordPress. #

It’s also possible to register JavaScript Files. This will provide easy access for additional scripts.

function registerCustomScript(){
    wp_register_script('{JS-handle-1}',get_stylesheet_directory_uri().'/{custom-js}.js');
    wp_register_script('{CSS-handle-2}',get_stylesheet_directory_uri().'/{custom-js-2}.js', array('jquery'));
}

add_action('init', 'registerCustomScript');

function addCustomScript(){
    global $post;

    if(null == $post){
        return;
    } 
    
    if($post->ID == 500){
        wp_enqueue_script('{JS-handle-1}');
    }

    if($post->ID == 600){
        wp_enqueue_script('{JS-handle-2}');
    } 

    if($post->ID == 700){
        wp_enqueue_script('{JS-handle-1}');
        wp_enqueue_script('{JS-handle-2}');
    }
}
add_action('wp_enqueue_scripts', 'addCustomScript');

Summary #

In this tutorial, we have learned how to add JavaScript and CSS files easily to WordPress. We even went a step further and learned how to add these files only on specific pages to improve loading times and Core Web Vital scores on your website.

At the end, we took a look at how to register your JavaScript files on WordPress. This offers the possibility to provide feature scripts to use your JavaScript files if necessary.

We hope you enjoyed this little tutorial. If you have any questions, feel free to use the comment section below.