homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / WordPress
Forum Library, Charter, Moderators: lorax & rogerd

WordPress Forum

wordpress multi css
multiple style sheets in wordpress

 4:18 pm on Mar 22, 2012 (gmt 0)

I'm new to Wordpress and from what I unerstand I can add multiple css sheets to different pages if I put a conditional statement into the header.php area?
If I have 5 different style sheets here for 5 different unique pages wont this slow my pages down having to access 5 css sheets fom the header.php?

Is there a better way to get multi css sheets to work with different pages?




 7:39 pm on Mar 22, 2012 (gmt 0)

If you modify your header.php file to use if/then/else logic then the processing is done on the server and is pretty quick. The comparison can be done based on page names/id numbers. The disadvantage is that you'll be making HTTP calls for each different CSS file unless you cache them.

A good question to ask is do you really need a different style sheet for the different pages?


 10:40 pm on Mar 22, 2012 (gmt 0)

Actually I need different style sheets. Its a really large site with a specific need for them.

So my next idea is: can I put the style sheets into different header files, then call diffrent header files for a few different pages.

For example:
header1.php--has one style sheet
header2.php--has another style sheet.

then just call different headers for the pages I need them for?

thanks for the help.


 11:49 pm on Mar 22, 2012 (gmt 0)

Most people just use one header.
<?php if (is_page('about')) { ?>
<link rel="stylesheet" type="text/css" href="style-two.css">
<?php } else { ?>
<link rel="stylesheet" type="text/css" href="style-one.css">
<?php } ?>

Or . . you can use is_category or other WP functions . . . or . . .

// at the head of document . . .
$this_style = (is_page('about'))?'style-two.css':'style-one.css';

<link rel="stylesheet" type="text/css" href="<?php echo $this_style; ?>">

Or . . . using your last choice, create separate templates for the two site versions . . . there's lots of ways to go about it.


 11:38 am on Mar 23, 2012 (gmt 0)

Don't use different header files if you can avoid it. If the pages are really that different have you thought about creating different templates and just assigning the pages to those templates?


 1:50 pm on Mar 23, 2012 (gmt 0)

Yea, I would make custom page templates in this case.


 4:11 pm on Mar 23, 2012 (gmt 0)

A good template will set a specific class or id for each page in the body tag. That way, you can use one CSS file, and then style the page according to that class or id. For example, you can do something like:

#home .post { width: 100px; float: left; }

This way, you can make significant layout/style changes without messing with the templates at all.


 4:37 pm on Mar 23, 2012 (gmt 0)

Thanks for the help,
these ideas are great. i think I am leaning towards making custom page templates. My only question is this: When I make a custom page template its still going to call <?php get_header(); ?>. So essentially I will be still calling the style.css stheet from that header. So can I do something like <?php get_header.2()
or something like that to get a different header with different css in it.


 5:09 am on Mar 24, 2012 (gmt 0)

Yes you can call different header with following code:

<?php get_header('custom'); ?> and it will load header-custom.php file.


 6:17 pm on Mar 27, 2012 (gmt 0)

Thanks everyone for all the help: I tried this and it mostly works but I am not accessing the 2nd stylesheet for some reason.

I called the custom header from a page like this

<?php get_header('header_state'); ?>

It works fine and places the header on the page and I called the css file in this custom header like this:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>//localhost:8888/cnb_press/wp-content/themes/cnb-zip1/state_style.css" media="screen" />

but my page is still accessing the index.php style.css for some reason. I am on a MAMP and not live.

Any ideas why I am not getting this right?


 3:50 am on Mar 28, 2012 (gmt 0)

Check your function.php file and any other plugin who might be adding style dynamically.


 3:28 pm on Mar 28, 2012 (gmt 0)

<?php bloginfo('template_url'); ?>//localhost:8888/cnb_press/wp-content/themes/cnb-zip1/state_style.css" media="screen" />

If you echo out template_url, I think you'll find it already contains //localhost:8888/cnb_press/wp-content/themes/cnb-zip1/. (And then, only if you're testing locally, otherwise it will be an http(s) URI.) So try

<?php bloginfo('template_url'); ?>/state_style.css" media="screen" />

May or may not need the slash.


 4:10 pm on Mar 29, 2012 (gmt 0)

Thanks I did a rendition of the examples you mentioned and included template path and it works fine now. I now have a separate page with a separate header and css attached.

thanks for the help

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / WordPress
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved