Adding style sheet to specific page

Question

I have set a page as a homepage for my site. There are specific style sheets just for the homepage that I don't need to use globally. I'm still new to WordPress so this is so confusing to me.

I have read http://codex.wordpress.org/Function_Reference/wp_enqueue_style but I still don't understand how to incorporate it in my page. Can someone please help me?

Answer 1

Utilize the wordpress conditional tags to selectively enqueue / load your stylesheets. This is best practice so you can call any dependancies as well.

I've provided an example of this in practice. Often we only want to include styles for the front page and then style accordingly to your sub page:

<?php 
// Is this the front page or home page  ?
if (is_front_page() && is_home() )  {
// if so then lets enqueue this!
// for reference the function uses the following parameters:
// wp_enqueue_style( $handle, $src, $deps, $ver, $media ) ?
  wp_enqueue_style( 'mystyle', TEMPLATEPATH . 'foo.css', array('my-dependency-styles', 'reset-style'), '1.0.1', 'only screen and print' ); 
} else {  
  wp_enqueue_style( 'mystyle', TEMPLATEPATH . 'sub-page.css', array('my-dependency-styles', 'reset-style'), '1.0.1', 'only screen and print' ); ?>
  }

Answer 2

Use an action hook to attach that enqueue to a specific page with conditional logic, similar to Chris' approach, just wrapped inside a function.

add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles_or_scripts' );

function enqueue_custom_styles_or_scripts() {

    // If it's not the front page, stop executing code, ie. return
    if( !is_front_page() )
        return;

    // Else we reach here and perform the enqueue
    wp_enqueue_style( 'your-style-handle', get_stylesheet_directory_uri() . '/yourfile.css' );

}

Note, despite the action name, it is also appropriate for styles to, i wish the devs would either rename that or add a style one alongside it, the naming would suggest it's for scripts only(but that's really not the case).

You can add the code to the top of your theme's functions.php file after the opening PHP tag(<?php) on a new line.