How can I edit my enqueue script function to include Internet Explorer and page template stylesheets?

Question

In my Wordpress theme I've been using an enqueue script function that adds my jQuery scripts and my stylesheets to my site. Because I have a separate page template as well as my standard page.php , I've been using the 'if' and 'else' commands as written in the code below, to differentiate between the two stylesheets.

<?php

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

function mywebsite_scripts() {

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

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

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

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

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

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

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

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

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

    else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() ); } }

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

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

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

When I began attempting to make my theme compatible with earlier versions of Internet Explorer, I followed this tutorial: https://gist.github.com/wpscholar/4947518

This code works when I add it to my functions folder, but doesn't allow for the javascript enqueues or extra page template stylesheets that I need.

<?php

function enqueue_my_styles()
{

    global $wp_styles;

    // LOAD THE MAIN STYLESHEET 
    wp_enqueue_style('mywebsite_scripts_style', get_stylesheet_uri());

    wp_enqueue_style('mywebsite_scripts_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array(
    'mywebsite_scripts_style'
    ));
    $wp_styles->add_data('mywebsite_scripts_style_ie8', 'conditional', 'IE 8');

    wp_enqueue_style('mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array(
    'mywebsite_scripts_style'
    ));
    $wp_styles->add_data('mywebsite_scripts_style_ie9', 'conditional', 'IE 9');

}

add_action('wp_enqueue_scripts', 'enqueue_my_styles');

I've tried to combine the two codes and ended up with the code below. Although it hasn't given me any PHP errors, it doesn't load the I.E stylesheets, and simply seems to revert back to the very first code above. Can anyone help me by pointing out what I've done wrong? What I wanted to achieve by combining these codes is the ability to add stylesheets for multiple page templates, and also have the I.E dependent stylesheets that inherit the styles from my style.css and only overwrite the necessary CSS rules to work on older browsers. I also need my Javascript to work too.

I hope all this is possible, any help would be much appreciated as I've tried my best to make it work and I'm not sure where I'm going wrong.

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

function mywebsite_scripts_scripts() {

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

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

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

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

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

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

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

    wp_enqueue_style( 'mywebsite_scripts-full-page_ie', get_stylesheet_directory_uri() . '/css/full-page-ie8.css', 
    array( 'mywebsite_scripts-full-page' ) ); $wp_styles->add_data( 'mywebsite_scripts-full-page_ie', 'conditional', 'IE 8' ); 

} 

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

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

    else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() ); 

    wp_enqueue_style( 'mywebsite_scripts_style_ie8’, get_stylesheet_directory_uri() . '/css/ie8.css', 
    array( 'mywebsite_scripts_style' ) ); $wp_styles->add_data( 'mywebsite_scripts_style_ie8’, 'conditional', 'IE 8' ); 

} }

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

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

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

*** UPDATE

<?php

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

function mywebsite_scripts_scripts() {

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

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

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

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

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


if (is_page_template('page-templates/full-page.php')) 

    { wp_enqueue_style( 'mywebsite_scripts-full-page' , 
    get_template_directory_uri() . '/css/full-page.css'); 

}


else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );

    wp_enqueue_style( 'mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', 
    array( 'mywebsite_scripts_style' ) );

    wp_style_add_data( 'mywebsite_scripts-style_ie9', 'conditional', 'IE 9' );

} }

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

*** UPDATE

Ok I've managed to get this to work, but only with the first method using global styles. I'm still not sure why the updated version isn't working.

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

function mywebsite_scripts_scripts() {


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

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

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

    wp_enqueue_script(
    'mywebsite_scripts-upanddown',
    get_template_directory_uri() . '/js/upanddown.js' );

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


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

global $wp_styles;

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

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


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

else { wp_enqueue_style( 'mywebsite_scripts_style', get_stylesheet_uri() );

wp_enqueue_style( 'mywebsite_scripts_style_ie8', get_stylesheet_directory_uri() . '/css/ie8.css', array( 'mywebsite_scripts_style' ) ); 
$wp_styles->add_data( 'mywebsite_scripts_style_ie8', 'conditional', 'IE 8' ); 

wp_enqueue_style( 'mywebsite_scripts_style_ie9', get_stylesheet_directory_uri() . '/css/ie9.css', array( 'mywebsite_scripts_style' ) ); 
$wp_styles->add_data( 'mywebsite_scripts_style_ie9', 'conditional', 'IE 9' ); 

} }

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

add_action( 'wp_enqueue_scripts', 'mywebsite_scripts_scripts' );

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

score 1 · Answer 1 · edited Apr 13 '17 at 12:37

1

FOR IE CONDITIONAL STYLE SHEETS

After you enqueue your scripts, You can use the following:

wp_style_add_data( 'ie-theme', 'conditional', 'IE' );

So for the example above, lets say you have a script that gets enqueued like the following.

wp_enqueue_style( 'ie-theme', get_stylesheet_directory_uri() . "/css/ie.css"  );

You would add the above after you enqueue ie-theme making the full declaration appear:

wp_enqueue_style( 'ie-theme', get_stylesheet_directory_uri() . "/css/ie.css"  );
wp_style_add_data( 'ie-theme', 'conditional', 'IE' );

It would appear that you read the top part of the gist but did not go any lower. As of a recent version of WordPress, there has been an update where you should use wp_style_add_data() function for this instead of the $wp_styles->add_data(); example

FOR TEMPLATE SPECIFIC STYLESHEETS

To enqueue stylesheets for a single template, you would wrap that wp_enqueue_style method in a check

if ( is_page( 'landing-page-template-one' ) ) {
  /** Call landing-page-template-one enqueue */
}

See This Stack Exchange question for reference

edited Apr 13 '17 at 12:37

Community

1
1

answered Apr 18 '16 at 21:16

bretterer

5,693
5
32
53

Hi bretterer, thanks for answering so quick. Yes it seems I did miss the second half of the gist, I must have assumed that the content below the part I read was just other people's comments! I'm a little confused by the first part of your answer – `wp_style_add_data( 'ie-theme', 'conditional', 'IE' );` – I could be wrong but it doesn't seem to enqueue my I.E stylesheet. What I wanted to do is use my ie8.css or ie9.css to inherit the styles of my style.css but overwrite any of the rules I add over the top. – Jack Averill Apr 18 '16 at 21:38
I use examples, not actual code in most of my answers. The answer I provided shows you the functions you will need, but does not fill in the details. `wp_style_add_data()` method is the method to use for your theme. You will still have to enqueue it using `wp_enqueue_style()` Look at the third block and change `ie-theme` to a reference you want to use and change `/css/ie.css` to be the stylesheet you want – bretterer Apr 18 '16 at 21:40
Oh okay, my mistake. I think I get what you mean now, but since making some changes I'm having an issue with other modern browsers picking up the ie9.css styles. I've added an update to my question above with the code I'm using now. Can you see what I might be doing wrong? Apologies if I've completely misunderstood, I'm new to learning PHP. – Jack Averill Apr 18 '16 at 22:10
I've just noticed that Internet explorer is no longer picking up the IE stylesheet, so modern browsers are picking it up instead for some reason. – Jack Averill Apr 18 '16 at 22:12
1

This may be of help. http://stackoverflow.com/questions/19502040/if-ie-conditionals-not-working IE 10+ do not use conditionals. – bretterer Apr 18 '16 at 22:13
I see what you mean, but the thing is that in the updated code above I tried to set IE 9 as a conditional. This worked when I tried it with the code from the gist I posted, but now that I've tried it with `if` and `else` statements to include page templates, it's not working. Have I written the new code above correctly according to the way you meant in your answer? – Jack Averill Apr 18 '16 at 22:34

How can I edit my enqueue script function to include Internet Explorer and page template stylesheets?

1 Answers1