About enqueueing styles and scripts in WordPress.
function my_assets() {
wp_enqueue_style( 'theme-style', get_stylesheet_uri(), array( 'reset' ) );
wp_enqueue_style( 'reset', get_stylesheet_directory_uri() . '/reset.css' ) );
wp_enqueue_script( 'owl-carousel', get_stylesheet_directory_uri().'/owl.carousel.js', array( 'jquery' ) );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri().'/website-scripts.js', array( 'owl-carousel', 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_assets' );
We used two functions: wp_enqueue_script() and wp_enqueue_style(). They both take five parameters, sharing the first four:
- wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );
- wp_enqueue_style( $handle, $source, $dependencies, $version, $media );
handle: This is the name of your script or style. It is best to use only lowercase letters and dashes here, and make sure to use a unique name.
source: The URL of your script or style. Make sure to use functions like get_template_directory_uri() or plugins_uri().
dependencies: An array of handles to assets which your script or style depends on. These will be loaded before your enqueued script. version: A version number which will be appended to the query. This ensures that the user receives the correct version, regardless of caching.
in_footer: This parameter is only available for scripts. If set to true the script is loaded through wp_footer() at the bottom of your page.
media: This parameter is for styles, it allows you to specify the type of media the style should be displayed for. For example: screen, print, handheld, etc.
