Wordpress Topics

How to Include CSS and JS on WordPress

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.

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' );