v1.20 won’t load child theme CSS

  • Resolved Henrique Vianna

    (@hvianna)


    8 years, 3 months ago

    I just updated to Baskerville 1.20 and my previously working child theme now loads the parent CSS twice and won’t load the child theme style.css.

    It looks like Baskerville now loads the style.css from the template_directory instead of the stylesheet_directory. Is that an intended change of behavior?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Gary Allman

    (@gsallman)

    8 years, 3 months ago

    What Henrique said.

    This update has totally trashed my Child theme … I thought I might be able to get around the problem by using the new WordPress Customize options, but they are ignored too. 🙁

    Restoring a previous version of the Theme from my back-up.

    Gary Allman

    (@gsallman)

    8 years, 3 months ago

    I tried just replacing the functions.php file with the previous version (it was the only top-level file that appeared to have changed in the update) – I Don’t recommend this, as doing so took my site down with a 500 error. Now I’m working on trying to get my site back up … I’m not a very happy bunny at the moment.

    Theme Author Anders Norén

    (@anlino)

    8 years, 3 months ago

    Hi @hvianna and @gsallman,

    Sorry that the 1.20 update has been causing issues for you. Pre 1.20 versions of the theme incorrectly used get_stylesheet_uri() to enqueue the theme’s stylesheet. get_stylesheet_uri() returns the path for the current theme, whether it is a parent theme or a child theme. That means that if a child theme of Baskerville was active, Baskerville would load the child theme CSS instead of its own CSS file.

    Version 1.20 of Baskerville fixes this bug by replacing it with get_template_directory(), which returns the directory of the current theme rather than the active one – meaning that Baskerville now always loads its own CSS file when a child theme is active.

    My guess would be that the functions.php files in your Baskerville child themes enqueue Baskervilles stylesheet instead of the child themes own, since Baskerville was (again, incorrectly) loading the child themes CSS file when a child theme is active. Now that the bug has been fixed, Baskervilles CSS file is loaded twice – once by the theme itself, and once by your child theme.

    If you open the functions.php file in your child theme and search for either “wp_enqueue_scripts” or “wp_print_styles”, you’ll find a function that looks for something like get_template_directory_uri() . '/style.css'. If you replace that exact string with get_stylesheet_uri() and save, your sites should load both themes stylesheets correctly.

    — Anders

    • This reply was modified 8 years, 3 months ago by Anders Norén.
    Gary Allman

    (@gsallman)

    8 years, 3 months ago

    Anders – thanks for such a quick response!

    However, I’m not sure that I follow this. Unless I’ve misunderstood how parent/child themes should interact, when creating a Child Theme, the first thing you are expected to do is load the parent stylesheet (but only if you want to). That is, when you are using a Child theme, the parent theme should not “forcibly” load its own style sheet.

    I load the parent style sheet as the first thing in my child’s css file. Not via functions.php

    My CSS File includes the line:

    @import url( "../baskerville/style.css");

    At the start, which I believe is the recommended way of doing it.

    My functions.php file is very sparse, I’ll show it here to highlight a bug I uncovered in Baskerville. Baskerville’s original functions.php file didn’t check to see if a function has already been loaded — I think you might have fixed that in the update? As it would have caused my child theme to crash with a php error if you didn’t. Anyway here’s my functions.php file:

    <?php

// Change the length of excerpts
function custom_excerpt_length( $length ) {
	return 40;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

// Add more-link text to excerpt
function new_excerpt_more( $more ) {
	return ' ';  // '... <a class="more-link" href="'. get_permalink( get_the_ID() ) . '">' . __('Continue Reading', 'baskerville') . ' &rarr;</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

/**
 * @author Gary Allman
 */
if ( ! isset( $content_width ) )
    $content_width = 1400;

function jetpackme_more_related_posts( $options ) {
    $options['size'] = 6;
    return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );
?>

    Baskerville is an excellent theme, thank you for making it available to us. Here’s a link to the site I’m using it on. http://www.breakfastinamerica.me/gary-allman-personal-website/

    Theme Author Anders Norén

    (@anlino)

    8 years, 3 months ago

    @gsallman No worries! The @include method is pretty common, but it is encouraged to use the WordPress enqueue/register functions instead. It’s better for performance, and registering all of the stylesheets in PHP gives both plugins and themes better control over the order in which styles are loaded.

    Whether parent themes should or should not load their CSS when a child theme is active is a matter of taste to a certain degree. The reason for why I land on the loading side is that it’s easier for beginners if the child theme already has the parent theme CSS in place when they make their changes, so they don’t need to worry about why the parent theme CSS disappeared all of a sudden. With that solution, advanced child theme users can still deregister (and re-register in a different dependency order, if they want to) the parent theme CSS using wp_dequeue_style().

    There are no pluggable functions in Baskerville right now, unfortunately, but I hope to fix that in a future update. The excerpt functions you include above got proper theme specific prefixes in 1.20 (baskerville_custom_excerpt_length() and baskerville_new_excerpt_more()), so that’s why you don’t get an error message about the functions already existing. In the meantime, all functions included through add_action() or add_filter() in the Baskerville functions.php file can be removed in a child theme through remove_action() and remove_filter().

    Thanks, I’m glad you like it!

    • This reply was modified 8 years, 3 months ago by Anders Norén.
    Thread Starter Henrique Vianna

    (@hvianna)

    8 years, 3 months ago

    Hello @anlino,

    Thanks for your prompt reply!

    Now we just need to make sure the styles are loaded in the proper order, since the child’s functions.php runs before the parent’s.

    I realized you’re using the 'wp_print_styles' hook to enqueue the styles, instead of the more usual 'wp_enqueue_scripts' so I had to arrange for that in my previous function/action hook.

    Here’s what worked for me:

    
/**
 * Load styles
 **/

function baskerville_child_enqueue_styles() {
	wp_enqueue_style( 'baskerville-child', get_stylesheet_directory_uri() . '/style.css' );
}

add_action( 'wp_print_styles', 'baskerville_child_enqueue_styles', PHP_INT_MAX );
    awijasa

    (@awijasa)

    8 years, 3 months ago

    Hello @anlino,

    I am a fan of your themes: Baskerville, Wilson, and Hamilton!

    From the WordPress Developer Reference, I found that the wp_enqueue_scripts hook should be used instead of wp_print_styles:
    1. https://developer.wordpress.org/reference/hooks/wp_print_styles/
    2. https://make.wordpress.org/core/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/

    I modified baskerville on my WordPress sites to use the wp_enqueue_scripts hook. It’s working fine so far.

    One problem I noticed due to the use of wp_print_styles: upstreamplugin.com dequeues other styles and scripts using the wp_enqueue_script hook. Since Baskerville’s style.css is loaded on wp_print_styles, it was not dequeued and interfered with Upstream’s stylesheet.

    Thanks,

    @awijasa

    Theme Author Anders Norén

    (@anlino)

    8 years, 3 months ago

    @hvianna Glad it resolved itself!

    @awijasa Yes, if I built Baskerville today, I would use the more appropriate wp_enqueue_scripts hook. I didn’t want to break compatibility with child themes using remove_filter() to hit the wp_print_styles filter, so I left it in there. Irony being, of course, that I broke compatibility by switching to get_template_directory_uri() when including the stylesheet instead.

    awijasa

    (@awijasa)

    8 years, 3 months ago

    Hello @anlino,

    Got it! I understand why you are using wp_print_styles now. To keep my modifications out of the Baskerville theme, I managed to dequeue Baskerville_style using the wp_print_styles hook on my child theme.

    The dequeue is needed to keep Upstream’s look & feel whenever it is being used.

    Thanks,

    @awijasa

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

The topic ‘v1.20 won’t load child theme CSS’ is closed to new replies.