Support » Themes and Templates » Child Theme: how to call on parent theme w/ out using "@import"

  • I’ve been reading a lot about site performance and load times. Every major search engine says DO NOT USE the “@Import” rule.

    But every tutorial I read on child themes says to call on the parent theme using @import. Is there some other way to call on the parent theme?

    Thanks in advance for your help!

Viewing 15 replies - 1 through 15 (of 27 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    How big is your CSS file you’re trying to import?

    Every major search engine says DO NOT USE the “@Import” rule.

    ??

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    And Yahoo: http://developer.yahoo.com/performance/rules.html

    [Please don’t bump here – these forums are entirely volunteer, so help may not always be available as fast as you’d like. If you need more help, you could consider hiring someone – http://jobs.wordpress.net/ ]

    I got rid of @import by copying my entire style.css into my Child Theme, renaming it and removing that line. I did that because I have heard some things work better that way, and because it makes no sense to me to read two files to get a final result that can come from just one…and especially if the final result is significantly different than the original. However, one theme I tried did not seem to work well that way, so I do not know whether that can be done with every theme.

    @leejosepho

    hmm, that sounds like a good idea. But the problem with that method is when the Parent theme is updated, you won’t know what CSS to update/change in your child theme.

    Make a backup copy of the original style.css before doing the update, then compare it to the new file and see whether any of the changes are relevant to what you are actually running.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    @leejosepho, That sounds like such a bother and I think you don’t resolve the issue that Google is addressing.

    An easier way would be to copy your theme’s header.php file in your Child Theme and then place in a <link> tag that retrieves the parent’s stylesheet. That’s what Google recommends instead of using the @import line too.

    Chip Bennett

    (@chipbennett)

    Theme Review Admin

    An easier way would be to copy your theme’s header.php file in your Child Theme and then place in a <link> tag that retrieves the parent’s stylesheet. That’s what Google recommends instead of using the @import line too.

    And the correct way to do that in WordPress is to enqueue the parent Theme’s style sheet.

    In the child Theme’s functions.php, add the following:

    function syrinx32123_enqueue_parent_style() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'syrinx32123_enqueue_parent_style' );

    Now, if you do that, you’ll want to enqueue the child Theme’s stylesheet after the parent Theme’s; so add this:

    function syrinx32123_enqueue_child_style() {
        wp_enqueue_style( 'child-style', get_stylesheet_uri() );
    }
    add_action( 'wp_enqueue_scripts', 'syrinx32123_enqueue_child_style', 11 );

    (And don’t hard-code a <link> in the child-Theme header for either stylesheet.)

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Should the Codex recommendation change from @import to enqueue?

    I think Chip’s code could have been a bit shorter because you can state the dependent on wp_enqueue_style() in the 3rd parameter.

    Regarding the @import blocking parallel loading, I myself don’t believe that to be true on browsers today.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    I myself don’t believe that to be true on browsers today

    How come?

    Nothing solid it’s just a feeling. 🙂

    Why would a browser limit itself from parallel loading when it sees @import ?

    syrinx32123

    (@syrinx32123)

    @andrew nevins

    Should the Codex recommendation change from @import to enqueue?

    Yes I think it should be

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘Child Theme: how to call on parent theme w/ out using "@import"’ is closed to new replies.