Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted November 27, 2014 5:49pm by

Enqueueing IE conditional stylesheets in WordPress the right way

Can someone who's in the know help me to review my code please?

I am basically trying to get a stylesheet to load up when it detects the user is on any version of IE. I tried it using the code below but couldn't get it to work. I'm not too sure where I'm going wrong. Any ideas?

Oh and I used this as a resource so far: https://gist.github.com/wpscholar/4947518

function theme_styles() {

    global $wp_styles;

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'glyphicons_css', get_template_directory_uri() . '/css/glyphicons.css' );
    wp_enqueue_style( 'glyphiconssocial_css', get_template_directory_uri() . '/css/social.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

        /**
     * Load our IE-only stylesheet for all versions of IE:
     * <!--[if IE]> ... <![endif]-->
     * 
     * NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before 
     * calling the wp_enqueue_style() function.  If you are trying to load a stylesheet for all browsers 
     * EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to 
     * properly handle non-IE conditional comments.
     */
    wp_enqueue_style( 'main_css-ie', get_template_directory_uri() . "/css/iegtw.css", array( 'main_css' )  );
    $wp_styles->add_data( 'main_css-ie', 'conditional', 'IE' );


}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

6 Answers

December 1, 2014 2:54pm

The code looks okay to me. Two ideas:

Test the code in an older version of IE
Try adding a version to the conditional code or something more specific than just IE and see if that helps

November 27, 2014 11:05pm

Is this for a child theme by chance? You will need to swap out get_template_directory_uri with get_stylesheet_directory_uri

November 28, 2014 9:40am

Hey Zac,

No it's not for a child theme. I tried out your suggestion anyway...no luck!

I must have something else in this line wrong...

    wp_enqueue_style( 'main_css-ie', get_stylesheet_directory_uri() . "/css/iegtw.css", array( 'main_css' )  );
    $wp_styles->add_data( 'main_css-ie', 'conditional', 'IE' );

November 28, 2014 5:07pm

No, get_stylesheet_directory_uri is only for child themes so that won't make a difference.

What happens when you change the conditional statement to other values, does that work? It may be just the IE alone causing the problem, but I doubt that's it.

November 28, 2014 5:58pm

I've tried to change it, as far as I can tell the code is correct. I'm out of ideas. Do you see anything wrong with it?

function theme_styles() {

    global $wp_styles;

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'glyphicons_css', get_template_directory_uri() . '/css/glyphicons.css' );
    wp_enqueue_style( 'glyphiconssocial_css', get_template_directory_uri() . '/css/social.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

        /**
     * Load our IE-only stylesheet for all versions of IE:
     * <!--[if IE]> ... <![endif]-->
     * 
     * NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before 
     * calling the wp_enqueue_style() function.  If you are trying to load a stylesheet for all browsers 
     * EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to 
     * properly handle non-IE conditional comments.
     */
    wp_enqueue_style( 'ie_css', get_template_directory_uri() . '/css/ie.css', array( 'main_css' )  );
    $wp_styles->add_data( 'ie_css', 'conditional', 'IE' );


}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

I am still developing locally on an apache server. Could this be the cause? I am also assuming that I would just code the IE stylesheet as normal too?

November 28, 2014 6:26pm

I don't know if this is relevant but when I use the developer tools in IE 11 and try to select the issue (which is that several glyphicons are out of position and a different size) the first selector to appear is "inline styles". I have specified specific properties and selectors (naturally) to style the page and icons used, but a lot appear to be entirely crossed out, line the "inline styles" selector is overriding them somehow.

November 29, 2014 3:53pm

One quick thing is enqueue the file normally, without the conditions. Does it load then?

November 30, 2014 3:07pm

I took the conditional away, and the css I applied to the IE specific stylesheet worked, but it worked in all browsers. This leads me to believe my problem is with the conditional statement, what would be wrong? Does the array look fine too?

This is my entire functions file:

<?php

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

function theme_styles() {

    global $wp_styles;

    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'glyphicons_css', get_template_directory_uri() . '/css/glyphicons.css' );
    wp_enqueue_style( 'glyphiconssocial_css', get_template_directory_uri() . '/css/social.css' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

        /**
     * Load our IE-only stylesheet for all versions of IE:
     * <!--[if IE]> ... <![endif]-->
     * 
     * NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before 
     * calling the wp_enqueue_style() function.  If you are trying to load a stylesheet for all browsers 
     * EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to 
     * properly handle non-IE conditional comments.
     */
    wp_enqueue_style( 'ie_css', get_template_directory_uri() . '/ie.css', array( 'bootstrap_css', 'main_css' )  );
    $wp_styles->add_data( 'ie_css', 'conditional', 'IE' );


}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

function theme_js() {

    global $wp_scripts;

    wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );
    wp_enqueue_script( 'modernizr', get_template_directory_uri() . '/js//modernizr.js', array(), '', true );

}
add_action( 'wp_enqueue_scripts', 'theme_js' );

//add_filter( 'show_admin_bar', '__return_false' );

add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );

function register_theme_menus() {
    //register_nav_menus(
    //  array(
    //      'header-menu'   => __( 'Header Menu' )
    //  )
    //);

    register_nav_menus( 
        array(
            'primary' => __( 'Primary Menu', 'gtw-uber-bootstrap' ),
        )
    );

}
add_action( 'init', 'register_theme_menus' );

function create_widget( $name, $id, $description ) {

    register_sidebar(array(
        'name' => __( $name ),   
        'id' => $id, 
        'description' => __( $description ),
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

}

create_widget( 'Front Page Left', 'front-left', 'Displays on the left of the homepage' );
create_widget( 'Front Page Center', 'front-center', 'Displays in the center of the homepage' );
create_widget( 'Front Page Right', 'front-right', 'Displays on the right of the homepage' );


create_widget( 'Page Sidebar', 'page', 'Displays on the side of pages with a sidebar' );
create_widget( 'Blog Sidebar', 'blog', 'Displays on the side of pages in the blog section' );
create_widget( 'Contact Sidebar', 'contact', 'Displays on the side of contact pages with a sidebar' );
create_widget( 'Business Page Sidebar', 'business-storage', 'Displays on the side of business-storage pages with a sidebar' );
create_widget( 'Document Page Sidebar', 'document-storage', 'Displays on the side of document-storage pages with a sidebar' );
create_widget( 'Personal Page Sidebar', 'personal-storage', 'Displays on the side of personal-storage pages with a sidebar' );
create_widget( 'Student Page Sidebar', 'student-storage', 'Displays on the side of student-storage pages with a sidebar' );


?>

December 2, 2014 6:08pm

Thanks for sticking with me Zac, with your help I think the issue might actually be a CSS one. I have quickly uploaded my work in progress project to www.darrenhealy.com, if you view it in chrome+firefix vs IE you will see the issue I have with the icons. Maybe this will help better.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Darren Healy

Darren Healy

Enqueueing IE conditional stylesheets in WordPress the right way

6 Answers

Zac Gordon

Zac Gordon

Zac Gordon

Zac Gordon

Darren Healy

Darren Healy

Zac Gordon

Zac Gordon

Darren Healy

Darren Healy

Darren Healy

Darren Healy

Zac Gordon

Zac Gordon

Darren Healy

Darren Healy

Darren Healy

Darren Healy