1

My parent style.css is loading first, followed by my child style.css then the numerous stylesheets from the parent theme load third and so on and so forth. The head currently looks like this:

<link rel="stylesheet" id="parent-style-css" href="http://localhost:8888/wp-content/themes/proland/style.css?ver=4.5.3" type="text/css" media="all">
<link rel="stylesheet" id="child-style-css" href="http://localhost:8888/wp-content/themes/proland-child/style.css?ver=4.5.3" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="http://localhost:8888/wp-content/themes/proland/css/lib/bootstrap.min.css?ver=1.0" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-touchspin-css" href="http://localhost:8888/wp-content/themes/proland/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css?ver=1.0" type="text/css" media="all">
//////// more stylesheets loaded here

The functions.php in the child theme currently looks like this:

<?php
  function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';

    wp_enqueue_style ( $parent_style, get_template_directory_uri() . '/css/style.css' );
    wp_enqueue_style ( 'child-style',
      get_stylesheet_directory_uri() . '/style.css',
      array ( $parent_style )
    );
  }
  add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 10000 );
?>

There are 2 style.css in the parent theme.

  • ./style.css (just with commented header information,) which is loaded first.
  • ./css/style.css (contains styling,) which is loaded 10th out of all the scripts.

The functions.php in the parent theme enqueue all the scripts like so

function proland_scripts() {

    wp_enqueue_style( 'bootstrap',                      get_template_directory_uri() . '/css/lib/bootstrap.min.css', false, '1.0');
    wp_enqueue_style( 'bootstrap-touchspin',            get_template_directory_uri() . '/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css', false, '1.0');
      // ETC.
      // ETC.
      // ETC.

}

function my_enqueue_styles() {

  /* If using a child theme, auto-load the parent theme style. */
  if ( is_child_theme() ) {
      wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
  }

  /* Always load active theme's style.css. */
  wp_enqueue_style( 'style', get_stylesheet_uri() );
}

Why is the child style.css loading second and not last after the numerous stylesheets that are enqueued in the parent theme functions.php file?

  • In the parent theme, what hook is used to call my_enqueue_styles? – Andy Macaulay-Brook Jul 20 '16 at 11:53
1

If the dependency array contains the IDs of all the other stylesheets, then yours should load last.

Try adding the other stylesheets to the array when you enqueue your stylesheet:

wp_enqueue_style ( 'child-style',
  get_stylesheet_directory_uri() . '/style.css',
  array ( $parent_style, 'bootstrap', 'bootstrap-touchspin' )
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.