Should not load CSS after child theme

  • Resolved bwooster47

    (@bwooster47)


    10 years, 11 months ago

    Found the bug – CSS declarations in my child theme would not work in smaller screens.
    Turns out the Catch-Kathmandu theme forces its responsive.css theme to load after the child theme style.css!
    This means the child theme will never work – it will always get overridden.

    Any chance of fixing this? One fix could be to have responsive.css loaded by using a @import command at the bottom of catch-kathmandu/styles.css
    Do the same for any other internal CSS files.
    Inserting any theme shipped files after the end-user child-themes is quite problematic.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Catch Themes

    (@catchthemes)

    @bwooster47: It’s because there is option to enable and disable Responsive design in Theme Options panel. Further, it’s very risky giving in responsive css to edit.

    If you want to replace the parent theme responsive.css then you can use wp_dequeue_style. You can create functions.php file in your child theme and add the following code.

    <?php
/**
 * Catch Kathmandu Child functions and definitions
 */

/**
 * Enqueue scripts and styles
 */
function catchkathmandu_child_scripts() {

	wp_dequeue_style( 'catchkathmandu-responsive' );

}
add_action( 'wp_enqueue_scripts', 'catchkathmandu_child_scripts', 20 );

    Thread Starter bwooster47

    (@bwooster47)

    Aha, thanks. The WordPress codex for creating child themes is totally wrong! Themes should be allowed to load CSS in functions.php, so only right way to create a child theme requires using the method you described above! (I don’t want to dequeue responsive – I just want my CSS to come after responsive.css so modified the above method a bit to do that.)

    A suggestion: your admin page has “Custom CSS”.
    If you can also provide a “Custom CSS file URL” field, then users could create a override style file which you can add just before <body ...> using

    <link rel='stylesheet' id='custom-css'  href="..." type='text/css' media='all' />

    This would be great because it would then allow child theme to override all CSS files from themes as well as plugins!

    I can of course use @import in your Custom CSS field, but @import can be slow and it is better to avoid using @imports.

    Theme Author Catch Themes

    (@catchthemes)

    @bwooster47: Ok so you just want custom.css file to overwrite then you can remove the previous code I have given and add the following code in your child theme functions.php file.

    <?php
/**
 * Catch Kathmandu Child functions and definitions
 */

/**
 * Enqueue scripts and styles
 */
function catchkathmandu_child_scripts() {

	wp_enqueue_style( 'catchkathmandu-custom', get_stylesheet_directory_uri() . '/custom.css' );

}
add_action( 'wp_enqueue_scripts', 'catchkathmandu_child_scripts', 20 );

    Then you just create custom.css file in your child theme and add your custom css.

    @bwooster47 and Theme Author: I am currently using the “Catchkathmandu” theme and trying to apply a Child Theme to it…. after reading everything about child themes I would have probably chosen a different Parent Theme that doesn’t use a separate style sheet for the responsiveness. But that isn’t to say that I don’t like the theme. I’m just trying to figure out how to make the over rides.

    I’m still struggling with the responsive.css file taking over any changes that I make in the Child css file.

    @bwooster47… you had mentioned that

    The WordPress codex for creating child themes is totally wrong! Themes should be allowed to load CSS in functions.php, so only right way to create a child theme requires using the method you described above! (I don’t want to dequeue responsive – I just want my CSS to come after responsive.css so modified the above method a bit to do that.)

    I’ve been trying to figure this out…

    <?php
/**
 * Catch Kathmandu Child functions and definitions
 */

/**
 * Enqueue scripts and styles
 */

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}
?>

<?php

function catchkathmandu_child_scripts() {

    wp_enqueue_style( 'catchkathmandu-responsive', get_stylesheet_directory_uri() . 'css/responsive.css'  );
	wp_enqueue_style( 'catchkathmandu-custom', get_stylesheet_directory_uri() . '/custom.css' );

}
add_action( 'wp_enqueue_scripts', 'catchkathmandu_child_scripts', 20 );

?>

    Please Help.. thanks

    Ok… so I tried one other thing but then quickly realized that it was going to be a problem.

    I Disabled the Responsive Theme option in the admin section and them copied the CSS from the responsive.css file and added it to the bottom of the child style.css file. This was working fine until I got to a certain page width where the “Mobile” menu is activated.

    Is there a way i can reactivate the mobile menu option from the child theme?

    OK again…. I think that I have it now! ?? By re-enabling the responsive option in the admin and then adding this code to the child function.php file… copying all the css from the responsive.css in the parent theme and adding it to the bottom of the child style.css file I can them have control over the responsiveness of the theme and still have the menu and other original responsive functions.

    any other thoughts would be very welcome… Thanks 

    <?php
/**
 * Catch Kathmandu Child functions and definitions
 */

/**
 * Enqueue scripts and styles
 */

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}
?>

<?php
function catchkathmandu_child_scripts() {

    wp_dequeue_style( 'catchkathmandu-responsive', get_template_directory_uri() . '/css/responsive.css' );
	wp_enqueue_style( 'catchkathmandu-custom', get_stylesheet_directory_uri() . '/custom.css' );

}
add_action( 'wp_enqueue_scripts', 'catchkathmandu_child_scripts', 20 );
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Should not load CSS after child theme’ is closed to new replies.