How to Properly Including JavaScripts and Styles in WordPress theme

If you need to add some CSS style or Javascript file to your WordPress theme, the bad way is to put them directly in your header or footer that plugins can’t access theme.

The best standard way to add files to your theme is using “wp_enqueue_style()” and “wp_enqueue_script()” functions.

Copy following code and paste it into your functions.php of your theme:

// The proper way to enqueue scripts and styles.
function enqueue_js_css_to_theme_code_paste() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    // wp_enqueue_style with more options
    wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');
    wp_enqueue_script( 'page-scroll', get_template_directory_uri() . '/js/scroll.js' );
    // wp_enqueue_script with more options
    wp_enqueue_script( 'my-slider', get_template_directory_uri() . '/js/slider.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_js_css_to_theme_code_paste' );

WordPress enqueue functions with options:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);