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 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

    ??

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

  5. syrinx32123
    Member
    Posted 1 year ago #

  6. syrinx32123
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

    Should the Codex recommendation change from @import to enqueue?

  13. paulwpxp
    Font hero
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

    How come?

  15. paulwpxp
    Font hero
    Posted 1 year 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 1 year ago #

    @andrew nevins

    Should the Codex recommendation change from @import to enqueue?

    Yes I think it should be

  17. Andrew
    Forum Moderator
    Posted 1 year 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 1 year 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 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year ago #

    All major search engines recommend against the use of @import

    On what grounds?

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  23. esmi
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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 1 year 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 5 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.

Topic Closed

This topic has been closed to new replies.

About this Topic