Breadcrumb Home Icon Junior to Expert > Wordpress > How to Include CSS and JS on WordPress

How to Include CSS and JS on WordPress

04/04/2023
Wordpress Enqueue Script & CSS

wp_enqueue_script(), wp_enqueue_style() and wp_enqueue_block_style() functions are added to custom-written CSS and JS files in WordPress through the functions.php file.

Stylesheets wp_enqueue_style() (CSS Files)

The wp_enqueue_style() function is used to include style files in the theme.

Use the following code in functions.php to include style.css, the main style file of WordPress, into pages.

wp_enqueue_style( 'style', get_stylesheet_uri() );

Except for style.css, the following basic structure is used to add custom CSS files to pages.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
  • $handle: The name of the CSS file to be added.
  • $src: Specifies the location where the style file is located.
  • $deps: Indicates whether the style file is linked to another style file. If this is set, this style file will not be loaded on the page before the dependent style file.
  • $ver: Specifies the version number of the style file.
  • $media: Specifies which media type the style file will be loaded on, such as “all”, “screen”, “print”, or “handheld”. (The selection is reflected in the media="" attribute of the <link> tag.)

For example, the following code is used in functions.php to load the footer.css style file in the “css-files” file in the root directory of the theme. (Here, the value “false” is set when the footer.css style file does not have another style file on which it depends.)

wp_enqueue_style( 'footer', get_template_directory_uri() . '/css-files/footer.css', false, '1.1', 'all');

Scripts wp_enqueue_script() (JS Files)

The wp_enqueue_script() function is used in functions.php to include script files in the theme. The wp_enqueue_script() function has a similar syxtax to wp_enqueue_script().

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
  • $handle: The name of the script file to be added.
  • $src: Indicates the location of the script file.
  • $deps: Specifies another script it depends on, for example JQuery.
  • $ver: Specifies the version of the script file.

  • $in_footer: It is used as a boolean (true/false) parameter. Indicates that the script file should be positioned in the footer field instead of the header field. It is used to avoid delay in loading the DOM.
    Note: If the script file does not have to run at the first load of the page, using the script file at the bottom of the page prevents the delay of the page during the first load.

For example, the following function is used in functions.php to add a file named “script-file.js” to the pages in a folder named “js” in the root directory. (array( 'jquery' ) indicates that “script-file.js” will be loaded after “jquery” scripts.)

wp_enqueue_script( 'script-file', get_template_directory_uri() . '/js/script-file.js', array( 'jquery' ), 1.1, true);

Adding CSS and Script Files Under One Function

The following code structure is used in functions.php to include script and css codes under a single function. Invoked using the wp_enqueue_scripts add_action construct.

function add_theme_scripts() {
   wp_enqueue_style( 'style', get_stylesheet_uri() );
   wp_enqueue_style( 'footer', get_template_directory_uri() . '/css-files/footer.css', false, '1.1', 'all');
   wp_enqueue_script( 'script-file', get_template_directory_uri() . '/js/script-file.js', array( 'jquery' ), 1.1, true);
}
add_action ( 'wp_enqueue_scripts', 'add_theme_scripts' );

Source:
https://developer.wordpress.org/themes/basics/including-css-javascript/#enqueuing-scripts-and-styles

Last Shared