Adding CSS to WordPress Theme Via functions.php File

One of the incorrect way theme developers add their CSS to their theme is via the bloginfo(‘stylesheet_url’); tag in the header.php. This is a bad idea.  A better way to do this is via the functions.php file, much in the same way you properly link to JavaScript files a WordPress theme.

Here is the code for how to do this:

// Load the theme stylesheets

function theme_styles()  

{ 

// Example of loading a jQuery slideshow plugin just on the homepage

wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );

// Load all of the styles that need to appear on all pages

wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'custom', get_template_directory_uri() . '/css/custom.css' );

// Conditionally load the FlexSlider CSS on the homepage

if(is_page('home')) {

wp_enqueue_style('flexslider');

}

}

add_action('wp_enqueue_scripts', 'theme_styles');