We all know the fact that every theme comes with its own CSS style sheet and that CSS gives a design to all the pages, posts, comments etc of the blog. If we want to customize it we can easily do it by “Theme Editor” in wordpress. But what if we want a totally different CSS for a particular page or category. Well this can be done with a little bit of tweaking with code in Header.php file. And here is how to do it .
Before we begin I assume that you have both CSS files i.e Theme Default CSS (lets call it style.css) and your desired CSS for a particular page or category (lets call it style2.css)
Different CSS For a Particular Page
Suppose your page title is “My Page” and you want to have a different CSS for this page. Login to your wordpress dashboard and go to Theme Editor and click on “header.php”, then locate where you theme’s default CSS is declared. Replace it with the following code :-
<?php if ( is_page(‘My Page’) ) { ?>
<link rel=”stylesheet” href=”URL of style2.css” type=”text/css” media=”screen” />
<?php } else { ?>
<link rel=”stylesheet” href=”URL of style.css” type=”text/css” media=”screen” />
<?php } ?>
In the ‘If’ statement you can use Page-slug and Page-ID also.
If in case you want to use different CSS for multiple pages then use following code:-
<?php if( is_page(‘My Page’) ) { ?>
<link rel=”stylesheet” href=”URL of style2.css” type=”text/css” media=”screen” />
<?php } elseif ( is_page(‘My Page1′) ) { ?>
<link rel=”stylesheet” href=”URL of style3.css” type=”text/css” media=”screen” />
<?php } elseif (is_page(‘My Page2′) ) { ?>
<link rel=”stylesheet” href=”URL of style4.css” type=”text/css” media=”screen” />
<?php } else { ?>
<link rel=”stylesheet” href=”URL of style.css” type=”text/css” media=”screen,projection” />
<?php } ?>
Different CSS For Categories
For having different CSS for the categories use the following code :-
<?php if( is_category( 1 ) ) { ?><link rel=”stylesheet” href=”URL of style1.css” type=”text/css” media=”screen” /><?php } elseif ( is_category (2) ) { ?><link rel=”stylesheet” href=”URL of style2.css” type=”text/css” media=”screen” /><?php } elseif ( is_category (3) ) { ?><link rel=”stylesheet” href=”URL of style2.css” type=”text/css” media=”screen” /><?php } else { ?><link rel=”stylesheet” href=”URL of style.css” type=”text/css” media=”screen,projection” /><?php } ?>
Here 1,2&3 represents Category ID’s and style1.css, style2.css & style3.css represents their different CSS repectively.
Do share your views with us
