Priority loading file css in child theme

Question

I'm trying to add other file css to child theme. I have a style.css file in child theme, but it's loaded by default, so I hadn't to add it in head. Now I want to add other css file for responsive design, but I can't set the priority. They are loaded first in head, so they are overwritten by other files. Here it's the code I have add in function.php, to load media-1100.css in head:

wp_enqueue_style( 'media-1100', get_stylesheet_directory_uri() . '/css/media-1100.css');

So I want media-1100.css file has to be loaded last in head. I have read that I have to use add_action in function.php to give priority, but it doesn't work, my code is wrong. Can you help me? Thanks

Answer 1

I assume it needs to be loaded last because it depends on other stylesheets files. In that case, the recommended way to do this in Wordpress is to use the "dependencies" parameter in wp_enqueue_style.

Set up the dependencies

wp_enqueue_style accepts an array of the handles for the stylesheets that your stylesheet depends on, e.g.

$dependencies = array('child-style', 'another-style');
wp_enqueue_style( 'media-1100', get_stylesheet_directory_uri() . '/css/media-1100.css', $dependencies);

Finding the handles

The handle is first parameter passed into wp_enqueue_style- for example in your question, the handle is media-1100.

If you didn't set them up yourself, you can still find the handles for all stylesheets if you view the source for the page - the handle is the stylesheet id but with the -css removed. For example, in the following, the id is "twentyfifteen-style-css" so the handle is twentyfifteen-style:

<link rel='stylesheet' id='twentyfifteen-style-css'  href='http://www.example.com/assets/themes/twentyfifteen/style.css' type='text/css' media='all' />

For more details see the Wordpress Developer Resources