Child Theme and Parent Theme CSS Load Order Issues

  • Child Theme and Parent Theme CSS issues

    I’m trying to modify parts of the appearance of the Sylvia theme by creating a child theme. (I realize that Sylvia is old and unsupported, but my problem doesn’t really seem Sylvia-specific.)

    One of the styles I want to override is not in the parent’s style.css, but in a separate stylesheet /css/custom.css

    The parent enqueues all its stylesheets (and scripts) in a single function.


    function sylvia_scripts() {

    wp_enqueue_style( 'sylvia-style', get_stylesheet_uri() );

    // Load custom css defining responsivity, grids etc.
    wp_enqueue_style( 'sylvia-customcss', get_template_directory_uri() . '/css/custom.css' );
    // more loads ....
    }

    This document (https://developer.www.ads-software.com/themes/advanced-topics/child-themes/) states:

    If the parent theme loads its style using a function starting with get_stylesheet, such as get_stylesheet_directory() and get_stylesheet_directory_uri(), the child theme needs to load both parent and child stylesheets. Be sure to use the same handle name as the parent does for the parent styles.

    CASE 1:

    Following the example given in that document, I wrote:


    function sylvia_child_enqueue_styles() {

    $parenthandle='sylvia-style';
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
    array(),
    $theme->parent()->get('Version') );
    wp_enqueue_style( 'sylvia-child-style', get_stylesheet_uri(), array($parenthandle), $theme->get('Version'));

    }
    add_action( 'wp_enqueue_scripts', 'sylvia_child_enqueue_styles');

    This loaded all the correct stylesheets, but in the following order:


    <link rel='stylesheet' id='sylvia-style-css' type='text/css' media='all' />
    <link rel='stylesheet' id='sylvia-child-style-css' type='text/css' media='all' />
    <link rel='stylesheet' id='sylvia-customcss-css' type='text/css' media='all' />

    so that my style did not override the style in css/custom.css

    CASE 2

    I tried changing the function priority of my enqueue_styles function so that it would execute after the parent theme's function.


    add_action( 'wp_enqueue_scripts', 'sylvia_child_enqueue_styles', 99);

    Now, the stylesheets are loaded in the following order. Note the path for "sylvia-style": it's being loaded from the child directory:


    <link rel='stylesheet' id='sylvia-style-css' type='text/css' media='all' />
    <link rel='stylesheet' id='sylvia-customcss-css' type='text/css' media='all' />
    <link rel='stylesheet' id='sylvia-child-style-css' type='text/css' media='all' />

    So now, much of the site is unstyled because the parent style.css isn't being loaded.

    CASE 3

    It seemed like get_template_directory_uri() must be returning the child directory, but that can't be right. So I thought that the code in sylvia_scripts (wp_enqueue_style( 'sylvia-style', get_stylesheet_uri() );) would be enqueueing the child style sheet with the parent handle so that the call in my function wouldn't override that. So I tried dequeuing the "sylvia-style" stylesheet before enqueueing it in my function by adding the line " wp_dequeue_style($parenthandle); "

    Now, the stylesheets load in this order:


    <link rel='stylesheet' id='sylvia-customcss-css' type='text/css' media='all' />
    <link rel='stylesheet' id='sylvia-style-css' type='text/css' media='all' />
    <link rel='stylesheet' id='sylvia-child-style-css' type='text/css' media='all' />

    and the parent stylesheet is still loading from the child theme's directory.

    I'm sorry this is so long; I've been searching a lot to find something similar. I don't understand why get_template_directory_uri() seems to be returning the child theme's directory. Or, if it's not, why the parent css is still being loaded from the child directory.

    Since the parent theme is old and no longer being supported, I'm willing to modify the source files...but I was hoping to do this "correctly".

    Thanks for any help.

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

  • Gosh, I’m impressed at your persistence. I would have simply modified the parent theme, since it’s unsupported.

    As I tried to explain in that page, the order of the style sheets is affected by multiple things: order of execution (priority parameter and child/parent code), the WP function used (child/parent), and whether the same handle is used (second call with same handle is ignored).

    In Case 2, when you tried having the child (which is loaded first) use a higher priority parameter (so it runs later), you let the parent load as normal, and your child calls with the same handle were ignored. Since it uses get_stylesheet(), WP looks in the child folder first and that is loaded (but the parent code did it). The child ran later and the same handle was ignored.

    Your Case 3 is almost the same, but you by dequeuing one that the parent requested, you just rearranged the order, instead of changing the definition of the handle. (You would need to deregister it instead of just dequeue it.)

    I think what you actually want is back in Case 1, and all you need to change is the dependency parameter. Your child style is actually dependent on the ‘sylvia-customcss’ sheet, not the ‘silvia-style’ sheet.

    I know it’s complicated. This is why we recommend you ask theme questions at your theme’s support forum, since each theme can do it differently. If you have any recommendations for how to explain it better, let me know, and I’ll get it in there.

    Thread Starter krisjensen

    (@krisjensen)

    Thank you so much.

    I’d actually figured out to use the dependency parameter to fix the issue (a post on Stack Overflow triggered the idea) so I’m glad to know that was the “right” way to do it.

    As far as explaining it better, the problem for me was the parent-theme loading multiple stylesheets. I didn’t know when those stylesheets were being enqueued, so I used trial and error to figure it out.

    Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Child Theme and Parent Theme CSS Load Order Issues’ is closed to new replies.