Every page with a different CSS

  • Resolved iwi4a

    (@iwi4a)


    11 years, 4 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 10 replies - 1 through 10 (of 10 total)
  • WPyogi

    (@wpyogi)

    11 years, 4 months ago

    I’d suggest asking on the forum for your theme here:

    https://ww.wp.xz.cn/support/theme/storefront#postform

    Thread Starter iwi4a

    (@iwi4a)

    11 years, 4 months ago

    Okay I will take it there, so should I delete it from here?

    junaidrehman

    (@junaidrehman)

    11 years, 4 months ago

    in child theme you have to not copy content of parent functions.php file. just create functions.php file your theme file and then use your new coding there.

    junaidrehman

    (@junaidrehman)

    11 years, 4 months ago

    also dont use is_template_part() you can use like is_front_page() or is_page()

    Thread Starter iwi4a

    (@iwi4a)

    11 years, 4 months ago

    I apologize that my post is not in the right category and I appriciate the answer from @junaidrehman, but I have one more question

    So, I have blank(empty) file functions.php in my child theme. my code looks like:

    function theme_styles()
{
	wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'custom', get_template_directory_uri() . '/custom.css' );
	if(is_page('home')) {
		wp_enqueue_style('custom');
	}
}
add_action('wp_enqueue_scripts', 'theme_styles');

    So when I have this, nothing happens. It just comes on the screen. Btw my level is begginer and I am trying to understand and learn. Thank you in advance!

    junaidrehman

    (@junaidrehman)

    11 years, 4 months ago

    you can use like this
    function theme_styles()
    {
    wp_enqueue_style( ‘main’, get_template_directory_uri() . ‘/style.css’ );
    if(is_home()) {
    wp_enqueue_style( ‘custom’, get_template_directory_uri() . ‘/custom.css’ );
    }

    }
    add_action(‘wp_enqueue_scripts’, ‘theme_styles’);

    for more info about is_page() check below
    is_page( 42 );
    // When Page 42 (ID) is being displayed.

    is_page( ‘Contact’ );
    // When the Page with a post_title of “Contact” is being displayed.

    is_page( ‘about-me’ );
    // When the Page with a post_name (slug) of “about-me” is being displayed.

    junaidrehman

    (@junaidrehman)

    11 years, 4 months ago

    sorry use this below code
    function theme_styles()
    {
    wp_enqueue_style( ‘main’, get_stylesheet_directory_uri() . ‘/style.css’ );
    if(is_home()) {
    wp_enqueue_style( ‘custom’, get_stylesheet_directory_uri() . ‘/custom.css’ );
    }

    }
    add_action(‘wp_enqueue_scripts’, ‘theme_styles’);

    junaidrehman

    (@junaidrehman)

    11 years, 4 months ago

    function theme_styles()
{
wp_enqueue_style( 'main', get_stylesheet_directory_uri() . '/style.css' );
if(is_home()) {
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css' );
}

}
add_action('wp_enqueue_scripts', 'theme_styles');
    Thread Starter iwi4a

    (@iwi4a)

    11 years, 4 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( 'custom', get_stylesheet_directory_uri() . '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?
    Is the styleTwo.css (custom) going to import the original style.css from the parent theme?

    I really appriciate your help!
    Thank you in advance!

    Thread Starter iwi4a

    (@iwi4a)

    11 years, 4 months ago

    Thank you very much for your help, but I had to add a couple more things to 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 10 replies - 1 through 10 (of 10 total)

The topic ‘Every page with a different CSS’ is closed to new replies.