Sometimes you want to call a separate css stylesheet, or more importantly, extra js libraries you might be using for special functionality in your theme. To do this, add the following bit of code to your functions.php file


/**
* Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
*/
add_action( 'wp_enqueue_scripts', 'stylesheets' );
add_action( 'wp_enqueue_scripts', 'scripts' );


/**
* Enqueue stylesheets
* In this case, I'm including a stylesheet for FlexSlider.
* When you view the source of your rendered site, you'll see the stylesheet with id='flexslider-css'
*/
function stylesheets() {
wp_register_style( 'flexslider-css', get_template_directory_uri() .'/flexslider.css' );
wp_enqueue_style( 'flexslider-css' );
}


/**
* Enqueue scripts
* ... and here I'm including the js for FlexSlider.
*/
function scripts() {
wp_register_script( 'flexslider-js', get_template_directory_uri() .'/jquery.flexslider.js' );
wp_enqueue_script( 'flexslider-js' );
}