How can I apply different stylesheets to different page templates?

Question

I'm creating a theme from the bootstrap framework into a wordpress site. I have linked the stylesheets via the functions.php using the wp_enqueue_scripts as follows:

function theme_styles() { wp_enqueue_style( 'my-style-blog', get_template_directory_uri() . '/css/my-style-blog.css' ); wp_enqueue_style( 'projects', get_template_directory_uri() . '/css/projects.css' ); wp_enqueue_style( 'main', get_template_directory_uri() . '/css/style.css' ); wp_enqueue_style( 'my-styles', get_template_directory_uri() . '/css/my-styles.css' ); }

but the links follow the typical css cascade.

How can I apply different stylesheets to different pages?

Ex. (1) front-page.php has it's own "front-page.css" styles. (2) page.php has it's own "page.css" style.

In other words I want the majority of the styles to be able to be used across the entire site, but some pages to display differently. For example in my homepage I have a large responsive image in the header I have included by css that I don't want to show on other pages. This is included by use of the

wp_enqueue_style( 'my-styles', get_template_directory_uri() . '/css/my-styles.css' );

}

Please advise

Answer 1 · 2014-01-25T01:56:57Z

January 25, 2014 1:56am

the way that I did it on bunnieblogs.com is I target the stylesheet for different pages. So like on my shop page I say ```if( is_page('shop')) { wp_enqueue_style('green', get_stylesheet_directory_uri() . 'green.css'); }

Hope that helps.
To target the page specifically you just need to call it by the name you put in the link below the title. So like for instance the above is bunnieblogs.com/shop/.  And if that doesn't make sense just check out http://codex.wordpress.org/Conditional_Tags

Welcome to the Treehouse Community

Looking to learn something new?

Isaac Russell

Isaac Russell

How can I apply different stylesheets to different page templates?

1 Answer

missgeekbunny

missgeekbunny