• Theme: Teletype
    Issue: Child theme loading theme stylesheets BEFORE bootstrap stylesheet

    Using the recomended code:

    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
     
        $parent_style = 'teletype-css'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
     
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }

    The “parent” stylesheet (and child) jumped from being the 7th or so in the page source to being right before the “bootstrap.min.css” stylesheet (bootstrap.min.cs being the 2nd stylesheet)

    After some digging and finding and add_action priority would move it, but caused double loading of the child theme stylesheet, I found wp_register_style() and arrived at the following code.

    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
    
        $parent_style = 'teletype-css';
     
        wp_register_style( $parent_style, get_template_directory_uri() . '/style.css', array('bootstrap-css') );
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-css',
            get_stylesheet_directory_uri() . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }

    I’ve never used this before, so I am asking “Am I doing this right?” and of course, is this in fact the best way to do this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • You should just need to add the bootstrap styleseet alias to your dependency list along with the parent stylesheet. That won’t do anything for the parent style, but will “force” your child themes stylesheet to be loaded after the two dependancy files.

    Moderator bcworkz

    (@bcworkz)

    That’s OK, but unnecessary. You need to specify ‘bootstrap-css’ as a dependency somewhere so the enqueued file is loaded after bootstrap CSS. This can be done in wp_enqueue_style() just as well as in wp_register_style().

    Also, when you register, you subsequently enqueue with just wp_enqueue_style( $parent_style );. No need to re-specify the path.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sanity Check: Making Child Themes Behave’ is closed to new replies.