How to load different CSS files depending on the page?

  • Resolved Sphinx.ita

    (@sphinxita)


    11 years, 10 months ago

    Hi everybody!

    I don’t know if it is the new 3.5 version or the new TwentyTwelve, but I’m trying to build a child theme out of it.

    Previously, I remember that in the 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, trying to study the TwentyTwelve theme, I don’t see anything like this in the header.php
    The call for the stylesheet is inside wp_head() instead.
    in this way I don’t know how to say “no don’t load the style.css but for this page load style_2.css”

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

  • Why don’t you just create different page templates and then style them accordingly in your main style sheet?

    Thread Starter Sphinx.ita

    (@sphinxita)

    hmm sorry dmd I don’t get it.

    I do create different page templates.
    but I can’t use the same main style sheet: if i want different background for template A to template B, how can I discern this “condition” on the css sheet?

    I could write a new css style sheet and load it after the main style sheet, alright. But it looks really not clean and not intelligent to load the 1st main css stylesheet if I don’t use it (lines and lines of code that are loaded for nothing..!)

    what did you mean by style them in one style sheet?

    thnx!

    I have the same question:)
    I want to create new templates and style them. Different pages with different styling share the same style.css file.

    @chepilot – it’s generally better to start your own thread rather than chiming in on someone else’s – it’s unlikely you have the identical situation (i.e. same theme, etc.). That said, if this helps you, fine. But if you need further help with your site, please start your own thread.

    @sphinx.ita – in most WP themes, each page has at least one unique class assigned to the body tag. For example, a sample twentytwelve home page body tag looks like this:

    <body class="home blog custom-background custom-background-white custom-font-enabled single-author">

    So in the CSS selectors, you use one of those classes which makes the CSS styles apply only to that page:

    body.home your selectors go here {
   styles go here - will only apply to home page;
}

    The other way is possible too, but loading more stylesheets does add load time to your site.

    Thread Starter Sphinx.ita

    (@sphinxita)

    Uff
    First thank you WPyogi and dmd before,

    but either I did explain myself bad, or .. ok probably I did explain myself bad if everybody didn’t understand what I meant.

    so I try again

    I do not want to load the main style STYLE.CSS for that template !!!
    with twentyeleven themes and formers, it was easy to choose WHICH stylesheet to load for a particular template, because the code that calls the style sheets is in the HEADER.PHP file.

    and I didn’t know where I could write the IF condition that I used to write in the header.php file previously.

    if is_page_template('my-very-own-template.php') load this stylesheet
else if is an other page template load an other stylesheet
else if is page or single or whatever else, load the main style.css stylesheet

    kinda of this.

    BUT i wrote “i didn’t know” because now I do.
    In functions.php file there is the enqueue function that does enqueue the stylesheet

    so I just make an if statement in my template functions.php file, and I dequeue the style.css file call , and enqueue my very own style sheet when i do want !!!

    have I been more clear now? ??

    anyway! solved!

    thank you and thanx for your replies anyway!!! ??

    I have the same problem with you Sphinx.ita, but can you tell me in details how did you make the if statements in your function.php file.

    My situation is:
    if is( template1.php){apply style_2.css}
    else {apply defoult style.css}

    Thanks in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to load different CSS files depending on the page?’ is closed to new replies.