After more troubleshooting, problem seems to be solved by enqueuing parent stylesheet responsive.css in addition to parent stylesheet styles.css in child’s functions.php file like this:
wp_enqueue_style( 'parent-wp_fanzone_responsive', get_template_directory_uri() .'/css/responsive.css', array(), false ,'screen' );
Used this helpful section from Child Themes article in WordPress Codex.
Not sure if this an outcome of using Underscores but it wasn’t obvious this needed to be done.
Wondering if other styleshhets the theme references need to be enqueued the same way?
Disregard my previous post. Issue seemed fixed, but upon revisiting the site today, problem continues.
Sorry for confusion.
Something is awry with stylesheet loading.
At the very least, though the child stylesheet appears in <head> its styles don’t appear to be loading:
<link rel='stylesheet' id='parent-style-css' href='http://windycitygreek.com/wp-content/themes/wp-fanzone/style.css?ver=4.2.2' type='text/css' media='all' />
<link rel='stylesheet' id='wp_fanzone_slider-css' href='http://windycitygreek.com/wp-content/themes/wp-fanzone/css/slider.css?ver=4.2.2' type='text/css' media='screen' />
<link rel='stylesheet' id='wp_fanzone_responsive-css' href='http://windycitygreek.com/wp-content/themes/wp-fanzone/css/responsive.css?ver=4.2.2' type='text/css' media='screen' />
...
...
<link rel='stylesheet' id='wp-fanzone-style-css' href='http://windycitygreek.com/wp-content/themes/wp-fanzone-child/style.css?ver=4.2.2' type='text/css' media='all' />
This likely isn’t the cause of the original problem, but a likely a symptom of (faulty) child theme creation.
Troubleshooting out loud.
Can you post a link to your site with the child theme active?
Site is under development but have just made it available for troubleshooters =):
http://is.gd/5ScalM
Menu anchors retain parent theme color on hover and menu/submenu anchors shouldn’t be underlined on hover.
Note this is the content of child theme functions.php:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
Tried removing the child stylesheet enqueuing since it occurs in parent functions.php but it didn’t seem to help.
Thanks in advance!
Your theme is coded a little strangely and there’s some weird cascading for the menu links between the main style.css and responsive.css. If you use the code given in the Codex article with this theme, the stylesheets get loaded in the wrong order and that’s why your menu links have the wrong color on hover. Instead, try this code instead:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
function theme_enqueue_styles() {
wp_dequeue_style( 'wp-fanzone-style' );
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
Thanks verrrry much, that did the trick!
Couple of questions, to avoid this problem in the future:
– why did you need to set priority on add_action()?
– in what order should parent and child themes load stylesheets, and how did this theme load them?
Thanks again!
I had to set priority in the child theme’s functions.php so that the stylesheets would be loaded in the proper order. Normally, when you use a child theme, WordPress loads the child theme’s functions.php first and then the parent theme’s functions.php. The default priority is 10, and lower priority functions are executed first, so by setting the child theme’s function priority to 11, it forces WordPress to load the child theme’s function after the parent theme’s equivalent function.
What happens with your theme is that the colors (including the colors for the visited and hover states) for your <a> tags are defined in responsive.css, which is loaded first, and then your theme’s main stylesheet overrides responsive.css just for the menu links, making them white (including the visited and hover states). This works because your theme loads responsive.css first and the main stylesheet is loaded afterwards.
But when you make a child theme using the code from the Codex, the main stylesheets for both the parent theme and the child theme are loaded first (remember that WordPress loads the child theme’s functions.php first), and then responsive.css is loaded. This causes the inheritance chain to break and the hover color for the <a> tag as defined in responsive.css “leaks” through.
(It’s okay if you don’t fully understand the last paragraph, because to tell the truth, I don’t fully understand it either, at least not to the point where I can completely explain why it works the way it does. If there’s a takeaway lesson here, it’s that you should always define the hover and visited states for <a> tags.)
Hope the theme creator modifies the way the stylesheets are loaded or the way they work so problems like these can be avoided in the future.
Thanks very much for your help. Greatly appreciated!
