Setting up separate responsive.css for a child theme

  • Resolved LarsMigrant

    (@larsmigrant)


    7 years, 1 month ago

    Hi all.

    I’m setting up a website at purremedia.no. It has a child theme of the AccessPress Parallax theme. The child is named APP_PM.

    The parent theme comes with its own responsive stylesheet, located at accesspress-parallax/css/responsive.css. I want to set up my child theme with its own responsive.css-file, which overrides that of the parent.

    To begin with, I’ve made a duplicate of the parents responsive.css file at APP_PM/css/responsive.css, which should replace the parent’s responsive.css, or at least have priority over it.

    Putting the stylesheet there isn’t enough however. I understand that I’ll need to do some sort of PHP coding in my child theme’s functions.php to get this working. I’ve searched around the web and found some solutions with suggested code included. Tried modifying these to fit my theme, but I’m almost completely clueless about PHP so I couldn’t get it working.

    Could someone help me out with the necessary bits of code?

    PS: I believe these topics discuss the same issue, and have without success tried modifying and using the suggested code for my purpose:
    https://wordpress.org/support/topic/child-theme-problem-responsive-css/
    https://themenectar.ticksy.com/ticket/167594
    https://catchthemes.com/support-forum/topic/responsive-css-not-active-in-child-theme/

Viewing 6 replies - 1 through 6 (of 6 total)
  • HudsonValleyWebDesign

    (@jaycbrf)

    7 years, 1 month ago

    an easy way is to just put this at the top or bottom of your stylesheet:

    @import url(‘/css/responsive.css’);

    or the right way:

    // enqueue styles for child theme
function example_enqueue_styles() {
	
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
	
	// enqueue child styles
	wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');
    Moderator bcworkz

    (@bcworkz)

    7 years, 1 month ago

    You don’t need to replicate the parent’s file content. Just add what ever overriding CSS you want. HVWD’s “right way” example has a couple flaws in this particular case. One is the file name will not be style.css in this case, but /css/responsive.css. Thus the tag names should likely be something more like responsive-child and responsive-style (maybe, see below)

    The other is a very common error that’s been perpetuated ever since the “right way” was changed to use wp_enqueue_style(). The Codex example uses ‘parent-theme’ in it’s example, but everyone should be using the actual tag used by their parent theme. I’ve edited the relevant Codex page in hopes of explaining this better. After the jump scroll down to the line starting with “where parent-style is the same $handle used…”

    Thread Starter LarsMigrant

    (@larsmigrant)

    7 years, 1 month ago

    Thank you both! Tried both variants, got both working, stuck with the final one since it seems semi-official 🙂

    Thread Starter LarsMigrant

    (@larsmigrant)

    7 years, 1 month ago

    Hm, follow-up, seems like I didn’t get everything quite right. As bcworkz suggested, copying all of responsive.css into my child theme wasn’t necessary, so I decided to just have the child theme’s responsive.css contain the actual changes I needed.

    Doing so, however, I discovered that the responsive.css file of the parent seems to take priority. After looking closer with Firebug, I think I may have found the issue. Some function somewhere in WordPress appends a version number to the stylesheets, and appears to prioritize the newer sheet. I made this screenshot to demonstrate:

    CSS version issue

    In the parent theme, .menu-toggle gives the hamburger menu an orange color (#e3633b). In my child theme’s responsive.css, I added an identical .menu-toggle class with a green color (#50b200). The browser, however, ignores this. Note how Firebug lists it with a version number of 1.0 (responsive.css?ver=1.0). It does the same for everything I put in the child theme’s responsive.css file. Code from the parent theme’s responsive.css file, on the other hand, gets a version number of 4.7.3, which is equal to my current WordPress install.

    Would I be right in assuming that the browser prioritizes what it perceives to be the more up-to-date stylesheet? If so, how do I make WordPress append the “correct” version number to my child theme’s responsive.css?

    I noticed that there was something about versions in the PHP I added to functions.php earlier. Perhaps the answer’s there somewhere? Here’s the exact PHP I ended up adding to my child theme’s functions.php:

    function my_theme_enqueue_styles() {

    $parent_style = 'accesspress-parallax-responsive-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '//css/responsive.css' );
    wp_enqueue_style( 'APP_PM-style',
        get_stylesheet_directory_uri() . '/css/responsive.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    • This reply was modified 7 years, 1 month ago by LarsMigrant.
    Moderator bcworkz

    (@bcworkz)

    7 years, 1 month ago

    The version number shouldn’t affect the load order, since each file is a completely different, valid file. What is supposed to affect load order is the dependencies argument: array( $parent_style ). There may be a bug in the WP dependency management algorithm. While we should file a Trac ticket and wait for a fix to be committed, that does not solve the immediate problem.

    Try hooking ‘wp_enqueue_scripts’ with a large priority argument number, for example:
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 1000 );

    Thread Starter LarsMigrant

    (@larsmigrant)

    7 years, 1 month ago

    That did the trick, great, thank you 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Setting up separate responsive.css for a child theme’ is closed to new replies.