How do I make header.php use different css for different pages?

1 Views

I register styles in function.php with 

function my_scripts() {
    wp_deregister_style( 'header' );
    wp_register_style( 'header', get_template_directory_uri() . '/css/header.css' );
    wp_enqueue_style( 'header' );
}
add_action( 'wp_enqueue_scripts', 'my_style_sheets' );

I’d like to use different header style sheet for the same header.php file used on another page. How do I do that?

Read More

In general, how do I use styles differentiated by template instead of using a global setting like the one above?

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Create a primary stylesheet and enqueue as normal. Then, make a series of conditional statements using WP core functions – is_home(), is_404(), is_page_template('template.php') and so on. In each of those conditionals, enqueue the stylesheet you want that overwrites your core stylesheet, using your primary (style.css) stylesheet as a dependency.

    Untested code, but should work:

    function my_styles() {
    wp_deregister_style( 'header' );
    wp_register_style( 'style', get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style( 'style' );
    if (is_home()) { wp_enqueue_style('homestyle', get_template_directory_uri(). '/css/homestyle.css', 'style'); }
}
add_action('wp_print_styles', 'my_styles');