Different CSS for each page

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.

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!

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.

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

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?

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!