WordPress is an awesome platform and if you understand it correctly it becomes very easy to operate. In this context I am simplifying one more task for you which will enhance your wordpress understanding. The tough task of adding Internet Explorer specific css into wordpress is can be easily done.

What I have found that there are many ways one can add ie specific CSS by adding ie headers into the head section. But how can we do that with IE 10. Because IE 10 don’t support conditional comments at all. So how can we do it?

Can we use jQuery? Yes, we can.

Can we identify the version of IE with jQuery? Yes, We can.

Can we add a class into the body tag with jquery? Yes, We can.

Now, the million $$ question is – How can we? 

How to Add IE specific CSS (conditional comments) for IE 10:


I will be using a child theme to accomplish this.  Below is the structure of child theme.

Wordpress child theme structure

style.css is child theme’s default stylesheet (inheriting the stylesheet of parent theme) and after working with jQuery we will be able to override the css elements for IE 10 (Rest of the IE version will be covered in a while, first IE10).

Ok, jQuery now:

First we should patch our custom jquery.js file within wordpress, so that we can write our custom jquery.

For patching our custom jquery file we will use functions.php file. Open that and write this down in it. (Hope you know how to play with functions.php file, if not, please try googling it ).

//Adding custom jQuery to the child theme.
add_action('wp_enqueue_scripts','my_custom_script');
function my_custom_script(){
	wp_enqueue_script( 'custom_jquery', get_stylesheet_directory_uri().'/jquery.js',array( 'jquery' ));
}

This code will patch our jquery.js file within wordpress so that we can write and run our own jquery. Did you notice

array( 'jquery' ) 

within the code. This ensures that before calling our file call jquery library, so that own functions can use the library. Is it not nice 🙂

Ok our jquery.js file is patched successfully now and now we can write own code in it.

jQuery(document).ready(function($){

	if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    	document.body.classList.add("ie10");
	}

});

This little jquery code does a little awesome thing. It is saying that if you open site within IE10 then a class name will be added to the body tag. In this case it will be “ie10”. Can you guess why?

Yes, now we can use this class to override the css elements and you can write IE10 specific code into style.css like this.

.ie10 .entry-content p{
	color:red;
}

The above code will work only for IE10. Easy right !

You can play with navigator.userAgent and have a look how it works to detect different browsers.

One more method but for less than IE10 version

Open your functions.php file and paste this code.

add_action('wp_print_styles','ie_stylesheet');
function ie_stylesheet(){
	wp_enqueue_style( 'custom_ie', get_stylesheet_directory_uri().'/stylesheet/style.css' , array(), '1.0.0' );
}

add_filter('style_loader_tag','conditional_tag_around_custom_ie',10,2);
function conditional_tag_around_custom_ie($tag, $handle){
	if($handle == 'custom_ie'){
		$tag = '<!--[if IE]>' . "\n" . $tag . '<![endif]-->' . "\n";
	}
	return $tag;
}

The first part of this code is adding a stylesheet to the wordpress and second part is adding the condition (only if IE).

So this code will get functional only when it’s an IE and not other browser. But remember this method is not valid for IE10. Only IE9 and older works on this method.

What if I like to add it for IE9 only and not other. Read this

Once you are done with above you can now write your custom css for IE at

get_stylesheet_directory_uri().'/stylesheet/style.css

Happy Coding!