How to add CSS and JavaScript Files to WordPress.

It’s easy to add CSS and Java­Script files to Word­Press, even wit­hout a plug­in.

You only have to expand the functions.php within your the­me fol­der (or child-the­­me fol­der).

How to add CSS Files to WordPress? #

Word­Press offers an action hook cal­led “wp_enqueue_scripts” to add CSS files to your Word­Press Web­site.

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 abo­ve to add spe­ci­fic files only to a given Word­Press 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 fol­lo­wing code allows you to regis­ter your CSS Files and use them on spe­ci­fic 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? #

Word­Press offers an action hook cal­led “wp_enqueue_scripts” to add Java­Script Files to Word­Press.

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?

Word­Press makes it easy to add Java­Script files to Word­Press, which requi­res jQuery to work. You only have to expand the cal­ling script with an addi­tio­nal para­me­ter.

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

add_action('wp_enqueue_scripts', 'addCustomScripts');

The­re are many more scripts that you can easi­ly add simi­lar to jQuery. Have a look at the Word­Press code refe­rence for a list of all available libra­ri­es. (click here to open the Word­Press Code Refe­rence Web­site.).

It’s also pos­si­ble to add mul­ti­ple libra­ri­es 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 pos­si­ble to add your scripts to the foo­ter of your web­site. This is recom­men­ded to ensu­re a fas­ter loa­ding time to ensu­re bet­ter 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 Java­Script Files to spe­ci­fic pages only. You only have to expand the code abo­ve, as you can see below. This will save resour­ces, ensu­re bet­ter loa­ding times and also pro­vi­de hig­her 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 pos­si­ble to regis­ter Java­Script Files. This will pro­vi­de easy access for addi­tio­nal 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 tuto­ri­al, we have lear­ned how to add Java­Script and CSS files easi­ly to Word­Press. We even went a step fur­ther and lear­ned how to add the­se files only on spe­ci­fic pages to impro­ve loa­ding times and Core Web Vital scores on your web­site.

At the end, we took a look at how to regis­ter your Java­Script files on Word­Press. This offers the pos­si­bi­li­ty to pro­vi­de fea­ture scripts to use your Java­Script files if neces­sa­ry.

We hope you enjoy­ed this litt­le tuto­ri­al. If you have any ques­ti­ons, feel free to use the com­ment sec­tion below.