How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder? in WordPress

I’m having difficulty setting my WordPress theme up to be supported by early versions on Internet Explorer. The majority of the tutorials I’ve found online have instructed me to enqueue I.E specific stylesheets in my header, which didn’t work when I tried it, and I’m reluctant to do this anyway as I’ve read that it’s a job that should be done in the functions folder.

I already have my current stylesheets enqueued in the functions folder. I only have two â my main style.css and another one for a different page template with a transparent header. I have begun to create separate stylesheets for each of these page templates, to make some slight adaptions and remove all of the things that aren’t supported by Internet explorer 8 and below.

So my questions are the following:

1) Based on my code below, is there a way of making my theme detect if an early version of Internet Explorer is being used, and getting it to enqueue any I.E style sheets if this is the case? I’ve seen some tutorials that claim to be able to do this, but they looked completely different from the code below, and I wasn’t knowledgable enough to rewrite it.

2) I mentioned that I have two different page templates (including page.php) that I want to configure for Internet Explorer. These both have their own stylesheets as there are some significant differences between them. How can I get my functions folder to detect which stylesheet has already been enqueued for each page template, and then get it to detect whether Internet Explorer is being used and then enqueue the correct one to overwrite it? (I might be completely out on my logic here, but as far as I know, this is how the process would work)

3) If I’m overwriting my existing CSS for Internet Explorer, is it possible to only overwrite the necessary rules in my I.E stylesheets? By this I mean that rather than rewriting the whole thing, can I make it so that my theme looks to the original stylesheet first, and then reads the rules I’ve overwritten that weren’t compatible in the original stylesheet.

For example, if I have an object in my layout set to display:flex, I.E 8 obviously isn’t going to be able to deal with that, but the rest of the code might be fine. Therefore, if I were to set that object to display:inline-block in my I.E 8 stylesheet, would I need to write the rest of the code as well?

Here’s my code, please forgive the annotations â they’re really just for my benefit when I’m trying to see what’s what. I’ve included the javascript enqueues as well because for some reason, if I remove them it won’t accept my stylesheets either.

/* ENQUEUE SCRIPTS AND STYLESHEETS ----------- */
function lucieaverillphotography_scripts() {

    /* JAVASCRIPT ----------- */

    wp_enqueue_script(
        'lucieaverillphotography-menu-toggle',
        get_template_directory_uri().
        '/js/menu-toggle.js');

    wp_enqueue_script(
        'lucieaverillphotography-add-submenu',
        get_template_directory_uri().
        '/js/add-submenu.js');

    /* END JAVASCRIPT ----------- */

    /* PAGE TEMPLATE STYLESHEETS ----------- */

    if (is_page_template('page-templates/full-page.php')) {
        wp_enqueue_style('lucieaverillphotography-full-page',
            get_template_directory_uri().
            '/css/full-page.css');
    }

    /* END PAGE TEMPLATE STYLESHEETS ----------- */

    /* MAIN STYLESHEET ----------- */
    else {
        wp_enqueue_style('lucieaverillphotography_style', get_stylesheet_uri());
    }
}

/* END MAIN STYLESHEET ----------- */

add_action('wp_enqueue_scripts', 'lucieaverillphotography_scripts');

/* END ENQUEUE SCRIPTS AND STYLESHEETS ----------- */

My Header:

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                       <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                    </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

UPDATE: âââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ

David, based on your suggestions, I’ve tried wp_enqueue_style('/css/ie8.css', 'get_stylesheet_directory_uri()', array('style.css') );

and based on a tutorial I found online I also gave this version a shot wp_enqueue_style( 'lucieaverillphotography-ie', get_stylesheet_directory_uri() . "/css/ie8.css", array( 'lucieaverillphotography' ) ); $wp_styles->add_data( 'lucieaverillphotography-ie', 'conditional', 'IE 8' );

Was I anywhere near the mark with either of these? I tried it on CrossBrowserTesting.com and haven’t seen any difference, so it doesn’t look like my ie8.css file is being recognised.

Post Views: 1

1 comment

Anonymous says:

June 22, 2023 at 1:07 pm
1. You can make use of $_SERVER['HTTP_USER_AGENT']
& this page
http://www.useragentstring.com/pages/Internet%20Explorer/

& this page
http://www.phpliveregex.com/

to create regex to use with preg_match

e.g.

functions.php (best within a function hooked wp_enqueue_scripts, you don’t want to be running preg match unless rendering a page)
```
if(preg_match("/MSIE [23456789].0/",$_SERVER['HTTP_USER_AGENT']) ){
   wp_enqueue_style('whatever');
}
```
Arguably you can use modernizer instead of loading custom stylesheets. You can probably lose some of the numbers above to make the function slightly faster I doubt anyone who will visit your site has IE < 6
1. Obviously if you want to match specific versions of IE, remove numbers from the regex to suit
2. Yes you can, you enqueue your regular stylesheets first and set dependency argument in wp enqueue style
wp_enqueue_style('iecss', 'uri', array('normalcss handle') )

But a much easier way of handling this is to just modify your css rules
```
.class{
   display: inline-block;
   display: flex;
}
```
If display flex fails, inline block will be the display value applied (as long as not overruled by later style or higher specificity)

Comments are closed.

How can I enqueue Internet Explorer specific stylesheets in the WordPress functions folder?

1 comment

Social Network

Related posts

1 comment

Social Network