Child theme based on Quark not responsible

  • Resolved qvarting

    (@qvarting)


    9 years, 9 months ago

    Hey,

    I have seen some threads about this but none of them is really solved.
    I have done some testing and I think I have found the issue.

    Recently wordpress changed the best practice to include parent theme style.css.

    From https://codex.www.ads-software.com/Child_Themes:
    The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to use wp_enqueue_script() in your child theme’s functions.php.

    The code is:

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

}

    But if you set it up that way some of the content loose the responsive behaviour. Example: https://oller.angst.nu/dev/hoa/

    If you use the old method and include the parent style with @import it works.

    It would be great if you could have a look at this so we can set it up according to best practice.

    Best regards

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    Thanks for the reminder. Yep, that is the better way to do it and I’ll try to remember to make that change when I do the next update.

    As it is at the moment though, there’s no issue with child themes not being responsive. From memory there’s only been one other issue raised and the problem was that the site was loading a plugin which added bootstrap which overwrote some of the grid styles.

    If you have a look at the Demo site you’ll see that it’s using a child theme with the latest version of Quark and WordPress, and is still responsive.

    Theme Author Anthony Hortin

    (@ahortin)

    I was thinking about your question again yesterday and realised that what I wrote above isn’t really relevant, so just ignore that reply. If you want to add the parent theme stylesheet the proper way, by enqueuing it, then simply add this to your child theme functions.php.

    /**
 * Enqueue the parent theme's styles
 */
function child_scripts_styles() {
	wp_enqueue_style( 'quarkparentstyle', get_template_directory_uri() . '/style.css', array( 'gridsystem' ), '1.3' );
}
add_action( 'wp_enqueue_scripts', 'child_scripts_styles' );

    You’ll notice that I’m also adding a dependency so that the grid stylesheet loads before the parent stylesheet.

    I’ve just updated my Demo site so that it enqueues the stylesheet properly and as you can see, the responsiveness is still working as it should.

    When enqueuing the stylesheet as above, don’t forget to also remove the import statement from your child css stylesheet, if it’s currently there.

    Thread Starter qvarting

    (@qvarting)

    Yea, that was a better answer.
    Thanks a lot, I appreciate it.

    Cheers!

    Theme Author Anthony Hortin

    (@ahortin)

    I just thought I’d let you know that I just released a new version of quark. If you’re creating a child theme, you no longer need to use either @import or enqueue the parent stylesheet yourself. Quark will automagically do it for you.

    I’ve also added some dependencies on the stylesheets so that they load in the correct order.

    So basically, if you’re enqueuing the stylesheet yourself, you can now remove that function from your child theme.

    Thread Starter qvarting

    (@qvarting)

    Cool nice, I will upgrade and try it out. ??

    Cheers

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Child theme based on Quark not responsible’ is closed to new replies.