How to include css and js files

How To include CSS and JS files in a WordPress Theme

What is the best way to include CSS and JS files when developing for WordPress? Don’t worry, it’s easier than you think.


When creating a WordPress theme, it’s important to include CSS and JS files properly to ensure compatibility with other plugins and optimal site performance. Today I will show you the best way to includes these files in your WordPress theme.

Enqueuing Scripts and Styles

The proper way to add scripts and styles to your theme is to enqueue them in the functions.php file. Enqueuing scripts and styles means that WordPress creates a handle and path to find your file and any dependencies it may have (like jQuery) and then uses a hook that will insert your scripts and stylesheets.

To enqueue a script or style, you can use the wp_enqueue_script() or wp_enqueue_style() functions. The basic function for enqueuing a style is:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
  • $handle is simply the name of the stylesheet.
  • $src is where it is located. The rest of the parameters are optional.
  • $deps refers to whether or not this stylesheet is dependent on another stylesheet. If this is set, this stylesheet will not be loaded unless its dependent stylesheet is loaded first.
  • $ver sets the version number.
  • $media can specify which type of media to load this stylesheet in, such as ‘all’, ‘screen’, ‘print’ or ‘handheld.’

To enqueue your main stylesheet, you can use the following code:

wp_enqueue_style( 'style', get_stylesheet_uri() );

This will look for a stylesheet named “style” and load it. You can also enqueue additional stylesheets using the same function.

For scripts, you can use the wp_enqueue_script() function. The basic function for enqueuing a script is:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
  • $handle is the name for the script.
  • $src defines where the script is located.
  • $deps is an array that can handle any script that your new script depends on, such as jQuery.
  • $ver lets you list a version number.
  • $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather than in the header, so that it does not delay the loading of the DOM tree.

Combining Enqueue Functions

It’s best to combine all enqueued scripts and styles into a single function to include CSS and JS files. Then you call them using the wp_enqueue_scripts action. This function and action should be located somewhere below the initial setup:

function add_theme_scripts() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all' );
    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Default Scripts Included and Registered by WordPress

By default, WordPress includes many popular scripts commonly used by web developers, as well as the scripts used by WordPress itself. You can find a full list of included files in wp-includes/script-loader.php.

Including CSS for Block Styles

In addition to wp_enqueue_style(), you can use wp_enqueue_block_style() to enqueue styles for blocks. This method is useful for creating block themes, as it allows the theme to load only the CSS for the selected block when the block is used on the page. To enqueue block styles, you can use the following code:

wp_enqueue_block_style( $handle, $src, $deps, $ver, $media );

The handle is the name of the block, and the other parameters are the same as for wp_enqueue_style().

A last word about enqueuing files

Enqueuing scripts and styles is an essential part of creating a WordPress theme. When using the wp_enqueue_script() and wp_enqueue_style() functions, you can ensure that your theme is compatible with other plugins and that it loads efficiently. Additionally, using wp_enqueue_block_style() for block styles can help improve the performance of block themes.