How to Include CSS and JS on WordPress

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' );
Source:
https://developer.wordpress.org/themes/basics/including-css-javascript/#enqueuing-scripts-and-styles