WordPress.org

Ready to get started?Download WordPress

Forums

Child Theme: how to call on parent theme w/ out using "@import" (28 posts)

  1. syrinx32123
    Member
    Posted 11 months ago #

    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!

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

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

  3. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

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

    ??

  4. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

  5. syrinx32123
    Member
    Posted 11 months ago #

  6. syrinx32123
    Member
    Posted 11 months ago #

    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/ ]

  7. leejosepho
    Member
    Posted 11 months ago #

    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.

  8. syrinx32123
    Member
    Posted 11 months ago #

    @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.

  9. leejosepho
    Member
    Posted 11 months ago #

    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.

  10. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    @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.

  11. Chip Bennett
    Theme Review Admin
    Posted 11 months ago #

    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.)

  12. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    Should the Codex recommendation change from @import to enqueue?

  13. paulwpxp
    Font hero
    Posted 11 months ago #

    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.

  14. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

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

    How come?

  15. paulwpxp
    Font hero
    Posted 11 months ago #

    Nothing solid it's just a feeling. :)

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

  16. syrinx32123
    Member
    Posted 11 months ago #

    @andrew nevins

    Should the Codex recommendation change from @import to enqueue?

    Yes I think it should be

  17. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    It's a fair point and I don't see any argument against it.
    @syrinx32123 Can you create a thread on the Requests and Feedback forum regarding this please?

  18. Chip Bennett
    Theme Review Admin
    Posted 11 months ago #

    Should the Codex recommendation change from @import to enqueue?

    No. There is absolutely nothing wrong with using @import, and it is, by far, the more user-friendly approach.

  19. Chip Bennett
    Theme Review Admin
    Posted 11 months ago #

    It's a fair point and I don't see any argument against it.
    @syrinx32123 Can you create a thread on the Requests and Feedback forum regarding this please?

    There is no need to make such a change. There is nothing wrong with using @import.

    If you have a site that legitimately needs to performance improvement between the two methods, then you're big enough that you probably already have a paid developer on staff, who doesn't need to be told how to enqueue stylesheets. Otherwise: you're not going to notice the difference.

    Using @import is the easiest and most user-friendly approach, and should remain as the default/recommended implementation.

  20. syrinx32123
    Member
    Posted 11 months ago #

    There is no need to make such a change. There is nothing wrong with using @import.

    Why not start with the most efficient method from the get-go? All major search engines recommend against the use of @import, so WP's codex should reflect this.

  21. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    All major search engines recommend against the use of @import

    On what grounds?

  22. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    Google says the browser is unable to load stylesheets in parallel when @import is used.

  23. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    The extra load is minimal. If it bothers people that much, they can always create a custom header.php file and load their parent & child theme's stylesheet that way.

  24. Chip Bennett
    Theme Review Admin
    Posted 11 months ago #

    The extra load is minimal.

    Bingo. The law of diminishing returns applies here. There are usually far greater opportunities for page-speed improvement.

    If it bothers people that much, they can always create a custom header.php file and load their parent & child theme's stylesheet that way.

    And if it's *that* much of a problem, just copy/paste the parent style.css declarations directly into the child style.css file.

  25. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 11 months ago #

    I think you addressed it well Chip, that using other methods of loading the parent theme's CSS would not be user-friendly.

  26. icing
    Member
    Posted 10 months ago #

    If you have a site that legitimately needs to performance improvement between the two methods, then you're big enough that you probably already have a paid developer on staff, who doesn't need to be told how to enqueue stylesheets. Otherwise: you're not going to notice the difference.

    Why not have it the other way round? Have the most efficient method by default. And if somebody wants to use the "most easiest and user-friendly approach" of @import they can tell their paid developer to do it.

    This resistance for better standards by a few people seems a way to distinguish themselves from the average user.

  27. alchymyth
    The Sweeper & Moderator
    Posted 10 months ago #

    Have the most efficient method by default.

    that is why the theme developer guidelines (for theme to be added to the WordPress themes direcory) require the enqueuing sof stylesheets;

    Styles
    1.The main stylesheet (style.css) must be enqueued during the wp_enqueue_scripts action.

    http://developer.wordpress.com/themes/

  28. kimbanyc
    Member
    Posted 2 months ago #

    so for a new theme such as twenty fourteen, do we enqueue the child theme in the child theme header.php? I am slightly lost and clearly late to this.

    Fearlessly modifying two themes, like I know what I am doing. Thanks in advance for the help.

Reply

You must log in to post.

About this Topic