Welcome to WebmasterWorld Guest from 54.144.77.26

Forum Moderators: rogerd & travelin cat

Message Too Old, No Replies

wordpress multi css

multiple style sheets in wordpress

     

roclimb

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

5+ Year Member



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?

Thanks

lorax

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

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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?

roclimb

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

5+ Year Member



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.

rocknbil

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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 . . .

<?php
// 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.

lorax

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

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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?

netmeg

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

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

boplicity

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

5+ Year Member



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.

roclimb

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

5+ Year Member



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.

milanmk

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

5+ Year Member



Yes you can call different header with following code:

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

roclimb

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

5+ Year Member



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?

milanmk

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

5+ Year Member



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

rocknbil

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

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<?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.

roclimb

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

5+ Year Member



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
cheers