WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I want to make a separate responsive.css file in my child theme but having trouble making the media queries override the styles in the child theme's default style.css.

I've tried putting <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/responsive.css" type="text/css" media="screen"/> after the <?php wp_head(); ?> code, which works, but I've read that this is not good practice.

I do not really want to add the media queries to the end of style.css as it's already large and getting quite confusing!

share|improve this question
up vote 1 down vote accepted

You can enqueue your own stylesheet by adding this to your child theme's functions.php file:

function wpa_custom_css(){
        get_stylesheet_directory_uri() . '/responsive.css'
add_action( 'wp_enqueue_scripts', 'wpa_custom_css', 999 );

This will load the file responsive.css located in your child theme directory. The priority is set very low (999) so it is more likely to appear after other styles which may be enqueued on the same action.

share|improve this answer
Thanks very much Milo that worked perfectly! – user1794295 Sep 26 '13 at 8:38

The 3rd parameter accepted by wp_enqueue_script is $dependencies... aka what stylesheets must be loaded prior.

function wpa_115637(){
        get_stylesheet_directory_uri() . '/responsive.css',
        'main_style' // use the handle that you used when you enqueued the main stylesheet 
add_action( 'wp_enqueue_scripts', 'wpa_115637' );
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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