0

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?

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.

  • Ninja-fast! Should be working but am recovering from the soccer match. – helgatheviking Jun 26 '14 at 19:10
  • Yes! I had been trying to use if ( is_front_page() || is_home()) before add_action, which of course didn't work because $wp_query object has been set up with the current page yet. But it DOES work within a function! However - doing it the above way, most of my css is being overridden by the parent template template css unless I add !important. – MikeiLL Jun 26 '14 at 19:39
  • You can add a $dependecy argument to wp_enqueue_style() so that it is always enqueued after your parent stylesheet. See edit. – helgatheviking Jun 26 '14 at 19:42
  • Struggling a little to FIND the handle of the css file I want to override... – MikeiLL Jun 26 '14 at 19:56
  • 1
    @helgatheviking the $dependency actually needs to be an array as per codex.wordpress.org/Function_Reference/wp_enqueue_style. Would you update answer to reflect wp_enqueue_style( 'home_page_style', get_stylesheet_directory_uri() . '/index-style.css', array('name_of_main_style') ); before I accept? – MikeiLL Jun 27 '14 at 18:04
0

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);
  • The function enqueue_index_styles doesn't exist in your examples?? – helgatheviking Jun 26 '14 at 19:10
  • I think if ( is_front_page() || is_home()) returns false within functions.php unless it is within a function. And I think in the above examples enqueue_index_styles would be replaced with front_page_design - or the opposite. – MikeiLL Jun 26 '14 at 19:32
  • @helgatheviking Copy and paste error. That is what happens if you try to answer one more question, and you should actually have been in bed. :-) Thanks for pointing that out – Pieter Goosen Jun 27 '14 at 4:15
  • @MikeiLL silly copy and paste error. I've updated my answer. Check if it works now – Pieter Goosen Jun 27 '14 at 4:15
  • Figured as much. Have done it myself. :) – helgatheviking Jun 27 '14 at 14:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.