Okay
  Public Ticket #1116758
Style loading priority
Closed

Comments

  •  2
    Noor started the conversation

    Hi.

    Started using Glaciar as a child theme. Downloaded your supplied zip file for that.

    Next I changed the colors of the theme under Customize. One noticeable bug: the featured color doesn't get applied to some parts of the theme.

    Upon closer inspection, it seems that WooCommerce's styles are loaded after the theme's which override the color. In other pages, the feature color isn't applied at all.

    May I suggest you double check that the child theme (and by extension, the main theme) work nicely when changing colors? A simple way: make the theme's colors different from all other colors provided by 3rd party plugins, at least for the sake of debugging.

    Thanks.

    Noor

    PS: same thing with Flickity styles, it loaded after the theme's (and child theme's).

  •  143
    Nico replied

    Hi Noor Dawod,

    Thank you for you input, I will check all this that you are saying to see what is wrong.

  •  2
    Noor replied

    Thanks Nico.

    Meanwhile, I've fixed the problem in functions.php.

    Final version which works:

    <?php
    function child_glaciar_theme_enqueue_styles() {
        // Load dependent styles first before loading our parent and child styles.
        wp_enqueue_style(
            'parent-style',
            get_template_directory_uri() . '/style.css',
            array('bootstrap', 'photoswipe', 'photoswipe-skin', 'flickity')
        );
    }
    add_action('wp_enqueue_scripts', 'child_glaciar_theme_enqueue_styles');

    As you see, there's no need to add the child theme's styles -- it's loaded automatically.

    By the way, I'm an experienced developer so I might send you some suggested changes, if you're open for that.

    Greetings,

    Noor

  •  143
    Nico replied

    Yes, of course, all feedback is welcome.

    Thanks!

  •  2
    Noor replied

    Thanks Nico :)

    But I think you still have a bug.

    I have now downloaded both updated ZIP files for main theme (from ThemeForest) and child theme (from https://cl.ly/1D1E1F3b2i2L/glaciar-child.zip).

    I opened glaciar-child/functions.php and although the right dependency is inserted, you have an additional line which is NOT needed: 

    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );

    You should remove the above line because it causes the child theme's styles to be loaded twice -- at least it shows twice in the HTML.

    Why?

    Because you already load that file in the main theme, in this file: glaciar/inc/scripts/stylesheets.php

    So it's always loaded...

  •  2
    Noor replied

    Meanwhile, I found out that even more styles are still loaded after the child theme's. So the final version for functions.php is:

    function child_glaciar_theme_enqueue_styles() {
      // Load dependent styles first before loading our parent and child styles.
      wp_enqueue_style(
        'parent-style',
        get_template_directory_uri() . '/style.css',
        array(
          'bootstrap', 'photoswipe', 'photoswipe-skin', 'flickity',
          'ultimate-style-min', 'js_composer_front', 'bsf-Defaults', 'jetpack_css',
          'glaciar_google-font', 'glaciar_google-font-headings'
        )
      );
    }
    add_action('wp_enqueue_scripts', 'child_glaciar_theme_enqueue_styles');

    Please adjust :)

  •  143
    Nico replied

    Great I will take a more in depth look at this.

    Thanks!

  •  2
    Noor replied

    Thanks.

  •  2
    Noor replied

    What do you think?

  •  143
    Nico replied

    I think the final version should be this one:

    function child_glaciar_theme_enqueue_styles() {
        //First we load Bootstrap from parent, then parent styles and then child styles
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(
          'bootstrap', 'photoswipe', 'photoswipe-skin', 'flickity'
        ) );
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
    }
    add_action( 'wp_enqueue_scripts', 'child_glaciar_theme_enqueue_styles' );
    

    The rest are styling from plugins and should not load before the theme stylesheet.

  •  2
    Noor replied

    Sure thing :)

    But you still need to remove the child-style because you load it somewhere else, like I pointed before. If not, it will be loaded twice in HTML.

  •  2
    Noor replied

    Mind me asking, but how do you close open tickets which are fixed?

  •  143
    Nico replied

    They will close after one week of inactivity.