When creating a child theme to the new WordPress parent theme called TwentyTwelve, I needed to override CSS file created for Internet Explorer 7 and 8. The file is located in /css folder of parent Twenty Twelve theme and loading from parent’s functions.php
At first I’ve put a copy of parent theme’s ie.css in /css folder of my child theme. I thought it will override parent’s file. But not. The path remains the same. So I found that this file is loading from functions.php of TwentyTwelve. Therefore it must be removed from the code. Here’s how to remove.
In the child theme’s functions.php (create one if absent yet) add the following code:
// remove ie css from twentytwelve theme
function mytheme_dequeue_styles() {
wp_dequeue_style( 'twentytwelve-ie' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_styles', 11 );
//add new from child theme
wp_enqueue_style( 'mytheme-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
$wp_styles->add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );Here we are removing old ie.css of parent’s theme. Then I’m adding my child theme css file from /css folder. Notice change in path made with get_stylesheet_directory_uri() instead of get_template_directory_uri() of parent theme functions. Now the path is right and it works as needed, overriding TwentyTwelve css, we can edit it.
Nice thx!
I suggest to import the ie.css from the parent theme by putting this in top of the child themes ie.css file.
@import url(“../twentytwelve/css/ie.css”);
This way future updates to the parent ie.css file will always be used without having to add them manually to the child ie.css, also you will have a more easily read ie.css file in your child theme as you wont have to copy everything from the parent file.
yes, right, thanks 🙂
Tried it, the right path is:
@import url("../../twentytwelve/css/ie.css");Thank you again for such a great idea 🙂
If I use the functions.php method, do I need to copy the full ie.css to the child?
I tried the import url method and can’t get it to work for some reason. Any idea why?
Also if I’m running Windows XP, is there any way I can get something like firebug to work in IE8 so I can see what’s going on?
Thanks!
yes, in both methods you should use functions, just instead of copying 2012 theme file, just import it into your css file with @import method, as suggested above.
Hi
Thanks for this, very useful.
Do I create a copy of the functions.php and add that code or just create a new functions.php with the extra code in it?
Functions file in child theme is just adding functions to parent theme functions.php, so you create a new empty file and add what’s needed there. So, empty file will also be called functions.php but will reside in your child theme 🙂
Thank you this helped me 🙂 worked perfectly!
This idea makes a lot of sense to me, and I found this very helpful. However, I also found something else. I have `WP_DEBUG` enabled but when I add this function for my website I find that it is causing the following message in my debug log:
PHP Notice: wp_enqueue_style was called incorrectly. Scripts and styles should not be registered or enqueued until the
wp_enqueue_scripts,admin_enqueue_scripts, orinithooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in /wp-includes/functions.php on line 2944When I look up wp-includes/functions.php, line 2944, and that is the WordPress function triggered when there is a PHP error:
function _doing_it_wrong( $function, $message, $version )I tried Googling this error, and most users seem to have it in relation to plugins. A user on wordpress.org suggested that these are “warnings” and not actually problems, but I wanted to see if anybody else had this experience.
Thank you again for the solution; I look forward to implementing it.
I hade to change this:
wp_enqueue_style( 'mytheme-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
$wp_styles->add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
to
function mytheme_enqueue_styles() {
global $wp_styles;
wp_enqueue_style( 'mytheme-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
$wp_styles->add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles', 11 );
Because otherwise it affected the order in which theme and plugin css was loaded.
Thanks a million, this is exactly what I was looking for and it works perfectly (with the additions from other commenters).
Thank you. I tried to implement the changes (I had to make a new functions.php file as I hadn’t done that before). I know NOTHING about php so have avoided making any changes to it. Here is what I put in the file:
// remove ie css from twentytwelve theme
function bf2012_dequeue_styles() {
wp_dequeue_style( ‘twentytwelve-ie’ );
}
add_action( ‘wp_enqueue_scripts’, ‘bf2012_dequeue_styles’, 11 );
//add new from child theme
wp_enqueue_style( ‘2012-ie’, get_stylesheet_directory_uri() . ‘/css/ie.css’, array( ‘twentytwelve-style’ ), ‘1.0’ );
$wp_styles->add_data( ‘2012-ie’, ‘conditional’, ‘lt IE 9’ );
?>
but it didn’t work. I am not sure which of the words above I am supposed to change to customise it to my template. My template name is bf2012.
Anyone able to help?
Thank you!
Thanks, this is just what I needed. I;’m pretty good with HTML, CSS and PHP, but I’m new to WordPress customization. I’ve been burning the midnight oil learning it.
For some reason, the first part totally breaks my site and prevents it from loading. I just get a blank white page.
// remove ie css from twentytwelve theme
function mytheme_dequeue_styles() {
   wp_dequeue_style( 'twentytwelve-ie' );
 }
So I can load the child theme ie.css in addition, but can’t unload the main twentytwelve one.
Any idea why this might happen?
yeah it worked for me..!
Thanks Iggy for a REALLY useful article, and thanks Adrian for your improvements to the code :-).
In case anyone else (like me) was a bit confused about what’s the final version of the code that you should use for your functions.php file, here it is:
add_data( 'XXX-ie', 'conditional', 'lt IE 9' );}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles', 11 );
?>
Important Notes:
1) In the above code, the ONLY thing you need to change is the 2 x instances of “XXX”, which you change to the name of your child theme – e.g. “twentytwelvechildtheme” (or similar).
2) DON’T make the mistake (as I did) of thinking that you need to change the instances of “mytheme” to the name of your child theme – just LEAVE these as they are without changing them.
3) Don’t change anything else – e.g. with the numbers “1.0” and “11” don’t think “should these numbers be different for my child theme” – just leave them!
Hope the above helps,
Steve
UPDATE: For some reason, the code in my post above didn’t appear properly – it should be as follows …
add_data( ‘XXX-ie’, ‘conditional’, ‘lt IE 9’ );
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_enqueue_styles’, 11 );
?>
UPDATE: Here is the code in a different format:
[INSERT LINE SHOWN IN NOTE 1 BELOW]function mytheme_dequeue_styles() {
wp_dequeue_style( 'twentytwelve-ie' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_styles', 11 );
function mytheme_enqueue_styles() {
global $wp_styles;
wp_enqueue_style( 'XXX-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
$wp_styles->add_data( 'XXX-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles', 11 );
[INSERT LINE SHOWN IN NOTE 2 BELOW]
NOTE 1: insert the following line but without the “*”s:
Thanks!
It works great. I use it to the test site.
Without this trick, I would keep reading about the ie style for wp. I thought, at first, that the style (ie.css) is just put it in the folder ‘css’ then place it under the child-theme. It didn’t do anything until I read your article.
Best,
Hi colleagues, its wonderful post concerning teachingand fully explained,
keep it up all the time.
file. This is done so that a parent theme can make pluggable functions. But, it’s a pain for many people because they’re trying to remove filters and actions added by the parent theme.
thank you very much for sharing this i was looking exactly for this:
How to override ie6 on a wordpress child them
thanks a lot
Thank you for this!
Its working, but I notice that my childtheme’s style.css file is also being used in IE. How can I avoid this? I thought that the theme would use the ie.css file for IE, and style.css for any other browser.
My mistake. I had copied some styles from style.css to ie.css, hoping to change them there. I forgot to remove the media queries that I copied over.
Thx for the great tip. With your code and the comment from Adrian, works well.
Thanks Iggy for sharing the solution which is easy to follow, and great suggestion by Gremalash to import the parent’s ie.css to include future theme updates.
Very useful, thanks!
Thanks. You saved my day!