How to Include CSS and JavaScript Files in Your WordPress Site

WordPress allows you to easily include your own CSS and JavaScript files without the need for an additional plugin.

To do this, you only need to add a few lines of code to the functions.php file in your theme (or child theme).

Including CSS Files

To include your CSS files, you can simply use the action hook "wp_enqueue_scripts".

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

add_action('wp_enqueue_scripts', 'addCustomStyles');

Including CSS Files on Specific Pages

You can also define conditions, for example, on which page the CSS file should be included.

function addCustomStyles(){
    global $post;

    if(null == $post){
        return;
    } 
    
    // Load the CSS file only for the page with ID 500.
    if($post->ID == 500){
         wp_enqueue_style('{CSS-handle}',get_stylesheet_directory_uri().'/{custom-css}.css');
    }
}

add_action('wp_enqueue_scripts', 'addCustomStyles');

Registering CSS Files and Including Them on Multiple Pages

You can of course include your CSS files on multiple pages.

function registerCustomStyles(){
    // Register styles
    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;
    } 
    
    // Load the CSS file only for the page with ID 500.
    if($post->ID == 500){
        wp_enqueue_style('{CSS-handle-1}');
    }
    // Load the CSS file only for the page with ID 600.
    if($post->ID == 600){
        wp_enqueue_style('{CSS-handle-2}');
    } 
    // Load both CSS files for the page with ID 700
    if($post->ID == 700){
        wp_enqueue_style('{CSS-handle-1}');
        wp_enqueue_style('{CSS-handle-2}');
    }
}
add_action('wp_enqueue_scripts', 'addCustomStyles');

Including JavaScript Files

To include JavaScript files, you can use the WordPress hook 'wp_enqueue_scripts'.

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

add_action('wp_enqueue_scripts', 'addCustomScripts');

Including JavaScript Files Along with jQuery

You can also access jQuery in your JavaScript files. You just need to make a minimal adjustment to your script.

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

add_action('wp_enqueue_scripts', 'addCustomScripts');

You can find other scripts that you can load just as easily directly in the WordPress code reference (click here to access the WordPress Code Reference).

This way, you can also include multiple scripts at once.

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

add_action('wp_enqueue_scripts', 'addCustomScripts');

Including JavaScript Files in the Footer

You can also move your scripts to the footer of your page at any time. Here, you must ensure that the scripts are available only after the page has fully loaded.

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

add_action('wp_enqueue_scripts', 'addCustomScripts');

Including JavaScript Files on Specific Pages

JavaScript files do not always need to be loaded on all pages. This can easily be prevented and saves resources.

function addCustomScripts(){
    global $post;

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

    // Load the JavaScript on the page with ID 500
    if($post->ID == 500){
        wp_enqueue_script('JS-Handle',get_stylesheet_directory_uri().'/{custom-js}.js');
    }
}

add_action('wp_enqueue_scripts', 'addCustomScripts');

Providing JavaScript Files for Inclusion on Specific Pages

You can also register your JavaScript files and make them available to other scripts.

function registerCustomScript(){
    // Register script
    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;
    } 
    
    // Load the JS file only for the page with ID 500.
    if($post->ID == 500){
        wp_enqueue_script('{JS-handle-1}');
    }
    // Load the JS file only for the page with ID 600.
    if($post->ID == 600){
        wp_enqueue_script('{JS-handle-2}');
    } 
    // Load both JS files for the page with ID 700
    if($post->ID == 700){
        wp_enqueue_script('{JS-handle-1}');
        wp_enqueue_script('{JS-handle-2}');
    }
}
add_action('wp_enqueue_scripts', 'addCustomScript');

Conclusion

In this tutorial, you learned how to quickly and easily include individual JavaScript and CSS files. Additionally, we learned how to load CSS and JavaScript files only for specific pages to reduce resources and loading times.

Finally, we looked at how you can provide WordPress libraries like jQuery for your scripts.

Do you have questions or suggestions? Then feel free to leave us a comment.