child stylesheet not overriding
-
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
-
Hi Raincheck,
can you please provide the url to your site so we can help diagnose what’s going on?Cheers!
spencesure 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.cssPlease advise if you’ve properly activated the child theme?
Cheers!
spenceThat’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.
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 tagEverything else is there but it’s still pointing to the parent stylesheet in code view, have I followed your instruction wrong perhaps.
cheers,
RaincheckWhere 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;
or2) 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.
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,
RaincheckOops, 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?
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,
RaincheckIt 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?
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
- The topic ‘child stylesheet not overriding’ is closed to new replies.