Proper Way to Enqueue CSS for Front Page - template_redirect in functions.php?

Question

I want to load some specific css to change color of body element of front/home page of WP. Within my themes function file, the following code seems to work, but can someone please tell me if it is "proper"?

//Adding and Encuing styles for Front Page
add_action( 'template_redirect', 'front_page_design' );

function front_page_design(){
    if ( is_front_page() || is_home()) {
        add_action('wp_enqueue_scripts', 'enqueue_index_styles');
        function enqueue_index_styles() {
        wp_register_style( 'home_page_style', get_stylesheet_directory_uri() . '/index-style.css' );
        wp_enqueue_style( 'home_page_style' );
        }
    }
}

I had come across a blog by Mark Jaquith saying that template_include is for including, which is what I'm doing, right?

Answer 1

Nope. Use the wp_enqueue_scripts hook directly for enqueing all styles and scripts. There's no need to hook into template_include for that. template_include is specifically for modifying templates.

//Adding and Encuing styles for Front Page
add_action( 'wp_enqueue_scripts', 'front_page_design' );

function front_page_design(){
    if ( is_front_page() || is_home()) {
        wp_enqueue_style( 'home_page_style', get_stylesheet_directory_uri() . '/index-style.css', array('handle_of_main_style') );
    }
}

Where 'name_of_main_style' must be changed to match the handle of the stylesheet you want to load 'home_page_style` after.

Answer 2

When enqueueing scripts and styles, you should be using the wp_enqueue_scripts action hook to hook your scripts and styles to

wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles.

The use of template_redirect and template_includes is totally wrong.

It is always good practice that if you load your own scripts and styles, to load them last to ensure that your scripts and styles does not get overridden by others. To do that, you must set your $priority parameter in add_action very low (very high number). I just always make this 999

You should either do this

function front_page_design(){
if ( is_front_page() || is_home()) {
    wp_register_style( 'home_page_style', get_stylesheet_directory_uri() . '/index-style.css' );
    wp_enqueue_style( 'home_page_style' );
    }
}
add_action('wp_enqueue_scripts', 'front_page_design', 999);

or this

function front_page_design(){
    wp_register_style( 'home_page_style', get_stylesheet_directory_uri() . '/index-style.css' );
    if ( is_front_page() || is_home()) {
        wp_enqueue_style( 'home_page_style' );
    }
}
add_action('wp_enqueue_scripts', 'front_page_design', 999);