instructions category image Set Specific Stylesheets for Pages

Posted on October 26, 2009 and last modified on October 28th, 2009.

In the functions.php file there is a small bit of code which looks something like the following:

// ALLOW THE USE OF ONE OR MORE STYLE SHEETS
// http://justintadlock.com/archives/2009/07/27/contextually-changing-your-themes-stylesheet
// -----------------------------------------------------------------------------
add_filter( 'stylesheet_uri', 'my_stylesheet', 10, 2 );

function my_stylesheet( $stylesheet_uri, $stylesheet_dir_uri ) {

	if ( is_page( 'aboutpage' ) )
		$stylesheet_uri = $stylesheet_dir_uri . '/style-about.css';
	elseif ( is_page( 'archivespage' ) )
		$stylesheet_uri = $stylesheet_dir_uri . '/style-archives.css';

	return $stylesheet_uri;
}

This allows you to set different styles on any of the pages. To do this, all you need to do is change the page names set above, i.e. ‘aboutpage’ and ‘archivespage’ to the names of your pages that you wish to change the style. You can have as many changes as you like and you only need to save the style sheets with the same name, again using the example above, i.e. ‘style-about.css’ and ‘style-archives.css

Difficulty Level: Easy

Related Posts:

My Tweets Page
Peel-Back Corner
Page/Post Option – Left, Right or No Sidebar
Customised Front Page
Set Individual Styles for Specific Posts

About the author

James has added 29 posts to this site so far...

Founder and co-admin at FreshlyPressed, James also runs and maintains many, many other sites including JamesICT which is very much focussed on WordPress and all of its little idiosyncrasies. He now lives in Brighton, England with his fiancée and writes novels in his spare time. His latest work, 'Procrastination Expectancies' is due out later this year - or maybe the year after that! [more...]

Other posts by James

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>