Different CSS for each page

Resolved iwi4a
(@iwi4a)

9 years, 2 months ago

WP 4.1
Theme: StoreFront 1.2.4 By WooThemes

Hello guys,

I am trying to have different css file for every page, to make them different. I want to have 1 file for home page, another for contact me page aaaand so on… I know in some theme’s header.php file I could find the call for the style.css file, and I could have change it in something like

if (is_page_template(..) )

and in this way , I could have loaded a different CSS stylesheet for different templates or pages.
whereas now, in my template I don’t see anything like this in the header.php
The call for the stylesheet is inside wp_head() instead. I want to controll what css to use for every certain page.

I read that I need to write something in the function.php, but when I copy function.php to my child theme then an error occurs. I am really stuck on that for the whole day, plase help!

Viewing 6 replies - 1 through 6 (of 6 total)

WooThemes
(@woothemes)

9 years, 2 months ago
Hi,

If you’re just including a few different css styles for each page then you should probably enqueue an additional style sheet _on top_ of the default theme style sheet.

So to do that, create a functions.php file in your child theme and in that enqueue the styles using wp_enqueue_style inside a function hooked into wp_enqueue_scripts.

You can add your conditional logic to that function. So to add a custom stylesheet to your contact page you’d do something like;
```
add_action( 'wp_enqueue_scripts, 'jk_page_css' );
function jk_page_css() {
	if ( is_page( 'Contact' ) {
		wp_enqueue_style( 'contact-css', 'path-to-contact.css' );
	}
}
```
Hope that helps.
Thread Starter iwi4a
(@iwi4a)

9 years, 2 months ago

You are awesome, thank you for trying to help me but I am missing something. I tried but the page still has the look of the original CSS 🙁 It could be with me and linking the custom css, its called styleTwo.css and its in the same folder as the function.php so I have done it like:
wp_enqueue_style( 'contact-css', 'styleTwo.css' );
Is this right? I dont see another reason for not working.
At the moment my custom css is empty, is this a factor?

Thank you in advance!

James Koster
(@jameskoster)

9 years, 2 months ago

You need to include the directory path.

So something like:

wp_enqueue_style( 'contact-css', get_stylesheet_uri() . '/css/styleTwo.css' );

This will be loaded in addition to the main theme stylesheet so yeah, it will look the same until you add some styles.

Thread Starter iwi4a
(@iwi4a)

9 years, 2 months ago

Hi @jameskoster
Thats great but the file is in the same folder as the function.php. So that mean its going to look like `
wp_enqueue_style( ‘contact-css’, get_stylesheet_uri() . ‘styleTwo.css’ );`
Right?
The css is empty, but even if I add something it still doesn’t work 🙁
Also, while its empty is it not supposed to make the page look unstructured and all white?

I believe I am really close but somehow I am missing something 🙁

James Koster
(@jameskoster)

9 years, 2 months ago

Hi,

wp_enqueue_style( 'contact-css', get_stylesheet_uri() . 'styleTwo.css' );

Should work, yes. You might want to change ‘contact-css’ to something more appropriate though 🙂

> The css is empty, but even if I add something it still doesn’t work 🙁

View the source of your page and search for ‘styleTwo.css’ to see if it’s being enqueued correctly.

> Also, while its empty is it not supposed to make the page look unstructured and all white?

No, because the default Storefront css is still loaded. You could remove that, and the WooCommerce css etc, but I really wouldn’t recommend it. What kind of changes are you making per page that require the entire stylesheet to be disabled?
Thread Starter iwi4a
(@iwi4a)

9 years, 2 months ago
Thank you very much for your help, but I had to add a couple more things to make it work and I will explain below:
My function.php in my childtheme looks like:
```
<?php
function jk_page_css() {

	if ( is_page( 54 )){
	wp_enqueue_style( 'stylee', get_template_directory_uri() . '../../childtheme/styleTwo.css' );
/*the search for the file starts from the "storefront/inc" folder */
}

add_action( 'wp_enqueue_scripts', 'jk_page_css' );
?>
```
and then nothing changes. The code is been executed first and then overriden from the main style.css, so the styleTwo.css can be used only for commands which are not mentioned in style.css UNLESS we use !important in our styleTwo.css like:
```
.site-header {
  padding-top: 1em !important;
 }
```
this worked for me, probably temporary because I will try to find a way to load it after the style.css so I can stop using !important for no reason.

Thank you again!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Different CSS for each page’ is closed to new replies.

Tags