• Resolved raincheck123

    (@raincheck123)


    Hello,
    Can you tell me how to get the child stylsheet to override the parent I have tried just about everything but it is calling the parent stylsheet first, any help would be great.
    regards,
    raincheck123

Viewing 15 replies - 1 through 15 (of 18 total)
  • Hi Raincheck,
    can you please provide the url to your site so we can help diagnose what’s going on?

    Cheers!
    spence

    Thread Starter raincheck123

    (@raincheck123)

    sure it https://macrodynamics.biz
    thanks for the quick reply.

    Hi Raincheck,
    thanks!

    I don’t see that your child theme is active. I only see the parent theme active on the site.
    This is the url of the active theme css, which I believe is the parent:
    https://macrodynamics.biz/wp-content/themes/mountain-creek/style.css

    Please advise if you’ve properly activated the child theme?

    Cheers!
    spence

    Thread Starter raincheck123

    (@raincheck123)

    That’s strange thing I have activated the child theme, the style.css in the child theme folder starts like this:
    /*
    Theme Name: Mountain Creek Child
    Theme URI: https://macrodynamics.biz/mountain-creek-child/
    Description: Mountain Creek Child Theme
    Author: Angelo Monaghan
    Author URI: https://macrodynamics.biz
    Template: mountain-creek
    Version: 1.0
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: mountain-creek-child
    */

    @import url(“../mountain-creek/style.css”);

    /* =Theme customization starts here
    ————————————————————– */
    I have activated it in the themes section in wordpress
    however on the right hand side of the editor section in wordpress it says Mountain Creek Child (This child theme inherits templates from a parent theme, Mountain Creek) the only other files I have in the child theme folder are header.php and footer.php which I plan to customize later, do I need to change something in the header so it calls the child style sheet first?

    Yes you are probably correct, your theme isn’t loading your stylesheet. If you do not already have a file called functions.php in your child theme, create one, and try adding this code:

    <?php //Opening PHP tag
    
    function mountain_creek_child_add_css() {
        	wp_enqueue_style( 'main_style_overrides', get_template_directory_uri() . '/style.css', array('main_style') );
    }
    add_action( 'wp_enqueue_scripts', 'mountain_creek_child_add_css' );
    
    ?> // Closing PHP tag

    This code should inject your stylesheet into the head of your html.

    Note: if there already is a functions.php in your child, you will probably not need to add the opening and closing PHP tags.

    Thread Starter raincheck123

    (@raincheck123)

    Hi Andrew,
    I have just tried that, I created a functions.php file in my child theme folder and popped your code in but now I get this at the top of my screen: <?php //Opening PHP tag function mountain_creek_child_add_css() { wp_enqueue_style( ‘main_style_overrides’, get_template_directory_uri() . ‘/style.css’, array(‘main_style’) ); } add_action( ‘wp_enqueue_scripts’, ‘mountain_creek_child_add_css’ ); ?> // Closing PHP tag

    Everything else is there but it’s still pointing to the parent stylesheet in code view, have I followed your instruction wrong perhaps.
    cheers,
    Raincheck

    Where are you seeing this when you say its at the top of your screen? On the front end of the website? or in the admin somewhere?

    That code should definitely not be visible anywhere but in the files, so I’m not really sure whats going on. Can you perhaps explain how your theme files are organized? Perhaps you have files in the wrong place, or named incorrectly.

    If your child is properly referencing the parent theme, then the style.css will always override the parent.

    I suspect the following possibilities:

    1) Your child theme style.css is not using the exact name of the parent in the template reference;
    or

    2) Do you have a caching plugin installed such as QuickCache, SuperCache or W3TC?

    They may be showing only the original parent, from before you activated the child.

    Just for kicks, I decided to try & create a child theme of Mountain Creek myself, and I experienced the same thing, the parent theme’s style.css file is being linked in and not the child theme’s style.css file.

    After digging around in the theme’s function.php file, this is the problem:

    function mountaincreek_css() {
       wp_enqueue_style( 'main_style', get_template_directory_uri() . '/style.css' );
       wp_enqueue_style( 'responsive_style', get_template_directory_uri() . '/responsive.css' );
    }

    Instead of calling get_stylesheet_directory_uri(), it’s calling get_template_directory_uri(). This is incorrect. get_template_directory_uri() will return the directory of the parent theme. get_stylesheet_directory_uri() will return the directory where the stylesheet is found, which means the child theme directory if one is being used.

    This can be fixed by using this in your child theme’s function.php file (leave off the closing php tag):

    <?php
    /**
     * Mountain Creek child theme functions and definitions
     */
    
    function mountain_creek_child_styles() {
        wp_register_style( 'main_style', get_stylesheet_directory_uri() . '/style.css');
    
        wp_enqueue_style( 'main_style');
    }
    add_action( 'wp_enqueue_scripts', 'mountain_creek_child_styles' );

    This should replace the link to the parent theme’s style.css since you are registering the same handle.

    Thread Starter raincheck123

    (@raincheck123)

    Hi again,
    Thank you for trying that, unfortunately that didn’t work this end, it just moved my sidebar to the bottom of the page and the parent stylsheet is still been referenced, so still at a loss really.

    cheers,
    Raincheck

    Oops, did you call the file function.php or functions.php? I mentioned function.php in my post above, but it should be functions.php. Can you post the contents of your child functions.php file?

    Thread Starter raincheck123

    (@raincheck123)

    Hi,
    yes it is functions.php and not function.php in my child theme folder and completely empty before putting the code in there with no spaces at the top so all that’s in there is your script from the top like this:
    <?php
    /**
    * Mountain Creek child theme functions and definitions
    */

    function mountain_creek_child_styles() {
    wp_register_style( 'main_style', get_stylesheet_directory_uri() . '/style.css');

    wp_enqueue_style( 'main_style');
    }
    add_action( 'wp_enqueue_scripts', 'mountain_creek_child_styles' );

    would this be right? and no closing tag.
    cheers,
    Raincheck

    It looks right. And I even copied your code into my own child functions.php file and it still works (i.e., I get the child styles.css file being linked in). You can view the source on my sandbox site. Not sure what the problem might be at this point.

    If you go to the themes editor, you can examine your functions.php file and it looks as it should?

    Thread Starter raincheck123

    (@raincheck123)

    Yes my functions.php is showing up in themes editor as it should, I tried putting the code directly in there rather than using fileZilla but still no joy and it just moves the sidebar down the template and inside the content area, emptying the cache and refreshing didn’t change anything and was still calling the parent stylesheet, my style.css in the child theme has no custom styling in it yet so nothing to bother it there, seems to work for you fine so the code is all good, i’m grateful for all your help on this.
    cheers,
    Rancheck

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘child stylesheet not overriding’ is closed to new replies.