Skip to main content
added 13 characters in body
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251
+ plugins/
|
+--+ my-ie-style/
   |    
   +--+ my-ie-style.php
   |
   +--+ css/
      |
      +--+ styleie.css

where the my-ie-style.php file is:

<?php
/**
 * Plugin Name: Demo - Enqueue AMy CustomIE Stylesheetstyle
 * Plugin URI:  http://wordpress.stackexchange.com/a/85496/26350
 * Description: Enqueue With IE conditional, depending on the main-style stylesheet
 * Author:      wpse
 * Version:     1.0.0
 */
add_action( 'wp_enqueue_scripts', function()
{
    // Register
    wp_register_style( 
       'my-ie-style',                                    // handle
       plugin_dir_url( __FILE__  ) . 'css/styleie.css',    // file
       [ 'main-style' ],                              // dependency    <-- ADJUST THIS!
       '1.0.0',                                       // version
       'all'                                          // media
    );

    // Enqueue
    wp_enqueue_style( 'my-ie-style' );
    
    // Add IE conditional
    wp_style_add_data( 
        'my-ie-style',     // handle
        'conditional',  // key ('conditional', 'rtl', 'suffix', 'after', 'alt', 'title')
        'IE'            // value
    );
} );
<link rel='stylesheet' 
      id='main-style-css'  
      href='http://example.tld/wp-content/themes/mytheme/style.css?ver=4.5.3' 
      type='text/css' 
      media='all' />

<!--[if IE]>
<link rel='stylesheet' 
      id='my-ie-style-css' 
      href='http://example.tld/wp-content/plugins/my-ie-style/css/styleie.css?ver=1.0.0' 
      type='text/css' 
      media='all' />
<![endif]-->

where our custom IE stylesheet loads after the main stylesheet.

+ plugins/
|
+--+ my-style/
   |    
   +--+ my-style.php
   |
   +--+ css/
      |
      +--+ style.css

where the my-style.php file is:

<?php
/**
 * Plugin Name: Demo - Enqueue A Custom Stylesheet
 * Plugin URI:  http://wordpress.stackexchange.com/a/85496/26350
 * Description: With IE conditional, depending on the main-style stylesheet
 * Author:      wpse
 * Version:     1.0.0
 */
add_action( 'wp_enqueue_scripts', function()
{
    // Register
    wp_register_style( 
       'my-style',                                    // handle
       plugin_dir_url( __FILE__  ) . 'css/style.css', // file
       [ 'main-style' ],                              // dependency
       '1.0.0',                                       // version
       'all'                                          // media
    );

    // Enqueue
    wp_enqueue_style( 'my-style' );
    
    // Add IE conditional
    wp_style_add_data( 
        'my-style',     // handle
        'conditional',  // key ('conditional', 'rtl', 'suffix', 'after', 'alt', 'title')
        'IE'            // value
    );
} );
<link rel='stylesheet' 
      id='main-style-css'  
      href='http://example.tld/wp-content/themes/mytheme/style.css?ver=4.5.3' 
      type='text/css' 
      media='all' />

<!--[if IE]>
<link rel='stylesheet' 
      id='my-style-css' 
      href='http://example.tld/wp-content/plugins/my-style/css/style.css?ver=1.0.0' 
      type='text/css' 
      media='all' />
<![endif]-->

where our custom stylesheet loads after the main stylesheet.

+ plugins/
|
+--+ my-ie-style/
   |    
   +--+ my-ie-style.php
   |
   +--+ css/
      |
      +--+ ie.css

where the my-ie-style.php file is:

<?php
/**
 * Plugin Name: Demo - My IE style
 * Plugin URI:  http://wordpress.stackexchange.com/a/85496/26350
 * Description: Enqueue With IE conditional, depending on the main-style stylesheet
 * Author:      wpse
 * Version:     1.0.0
 */
add_action( 'wp_enqueue_scripts', function()
{
    // Register
    wp_register_style( 
       'my-ie-style',                                 // handle
       plugin_dir_url( __FILE__  ) . 'css/ie.css',    // file
       [ 'main-style' ],                              // dependency    <-- ADJUST THIS!
       '1.0.0',                                       // version
       'all'                                          // media
    );

    // Enqueue
    wp_enqueue_style( 'my-ie-style' );
    
    // Add IE conditional
    wp_style_add_data( 
        'my-ie-style',  // handle
        'conditional',  // key ('conditional', 'rtl', 'suffix', 'after', 'alt', 'title')
        'IE'            // value
    );
} );
<link rel='stylesheet' 
      id='main-style-css'  
      href='http://example.tld/wp-content/themes/mytheme/style.css?ver=4.5.3' 
      type='text/css' 
      media='all' />

<!--[if IE]>
<link rel='stylesheet' 
      id='my-ie-style-css' 
      href='http://example.tld/wp-content/plugins/my-ie-style/css/ie.css?ver=1.0.0' 
      type='text/css' 
      media='all' />
<![endif]-->

where our custom IE stylesheet loads after the main stylesheet.

added 1311 characters in body
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251

Specifically, I'd like to create a plugin to echo the following in the header immediately after the default stylesheet

OneThe preferred way is to doenqueue it is using, with the default/main stylesheet as the wp_head actiondependency.

Here's a demo plugin, with the structure:

function wpse85495_header()+ {plugins/
?>|
<!+--[if+ IE]>my-style/
  <link rel="stylesheet"| href="<?php bloginfo('stylesheet_directory'); ?>/ie 
   +--+ my-style.css"php
 type="text/css" /> |
<![endif]   +-->
<?php+ css/
}      |
add_action('wp_head','wpse85495_header');      +--+ style.css

but I thinkwhere the prefered way is using wp_enqueue_style()my-style.php in a conditional way as described herefile is:

http://core.trac.wordpress.org/ticket/10618#comment:6

function<?php
/**
 wpa85495_enqueue_style* Plugin Name: Demo - Enqueue A Custom Stylesheet
 * Plugin URI:  http://wordpress.stackexchange.com/a/85496/26350
 * Description: With IE conditional, depending on the main-style stylesheet
 * Author:      wpse
 * Version:     1.0.0
 */
add_action( 'wp_enqueue_scripts', function() 
{
    wp_enqueue_style// Register
    wp_register_style( 
       'my-style', WP_PLUGIN_URL . '                                 /my-plugin/ handle
       plugin_dir_url( __FILE__  ) . 'css/style.css', false// file
       [ 'main-style' ],                              // dependency
       '1.0.0',                                       // version
       'all'                                          // media
    ); 

    global// $wp_styles;Enqueue
    $wp_styleswp_enqueue_style( 'my->add_datastyle' );
    
    // Add IE conditional
    wp_style_add_data( 
        'my-style',     // handle
        'conditional',  // key ('conditional', 'rtl', 'suffix', 'after', 'alt', 'title')
        'IE'            // value
    );
} );

This will generate the following within the <head> tag:

<link rel='stylesheet' 
add_action( 'wp_enqueue_scripts', 'wpa85495_enqueue_style' );   id='main-style-css'  
      href='http://example.tld/wp-content/themes/mytheme/style.css?ver=4.5.3' 
      type='text/css' 
      media='all' />

<!--[if IE]>
<link rel='stylesheet' 
      id='my-style-css' 
      href='http://example.tld/wp-content/plugins/my-style/css/style.css?ver=1.0.0' 
      type='text/css' 
      media='all' />
<![endif]-->

where our custom stylesheet loads after the main stylesheet.

Hopefully you can adjust it to your needs.

One way to do it is using the wp_head action:

function wpse85495_header() {
?>
<!--[if IE]>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
<![endif]-->
<?php
}
add_action('wp_head','wpse85495_header');

but I think the prefered way is using wp_enqueue_style() in a conditional way as described here:

http://core.trac.wordpress.org/ticket/10618#comment:6

function wpa85495_enqueue_style(){
    wp_enqueue_style('my-style', WP_PLUGIN_URL . '/my-plugin/style.css', false );
    global $wp_styles;
    $wp_styles->add_data( 'my-style', 'conditional', 'IE' );
}

add_action( 'wp_enqueue_scripts', 'wpa85495_enqueue_style' );

Specifically, I'd like to create a plugin to echo the following in the header immediately after the default stylesheet

The preferred way is to enqueue it, with the default/main stylesheet as the dependency.

Here's a demo plugin, with the structure:

+ plugins/
|
+--+ my-style/
   |    
   +--+ my-style.php
   |
   +--+ css/
      |
      +--+ style.css

where the my-style.php file is:

<?php
/**
 * Plugin Name: Demo - Enqueue A Custom Stylesheet
 * Plugin URI:  http://wordpress.stackexchange.com/a/85496/26350
 * Description: With IE conditional, depending on the main-style stylesheet
 * Author:      wpse
 * Version:     1.0.0
 */
add_action( 'wp_enqueue_scripts', function() 
{
    // Register
    wp_register_style( 
       'my-style',                                    // handle
       plugin_dir_url( __FILE__  ) . 'css/style.css', // file
       [ 'main-style' ],                              // dependency
       '1.0.0',                                       // version
       'all'                                          // media
    ); 

    // Enqueue
    wp_enqueue_style( 'my-style' );
    
    // Add IE conditional
    wp_style_add_data( 
        'my-style',     // handle
        'conditional',  // key ('conditional', 'rtl', 'suffix', 'after', 'alt', 'title')
        'IE'            // value
    );
} );

This will generate the following within the <head> tag:

<link rel='stylesheet' 
      id='main-style-css'  
      href='http://example.tld/wp-content/themes/mytheme/style.css?ver=4.5.3' 
      type='text/css' 
      media='all' />

<!--[if IE]>
<link rel='stylesheet' 
      id='my-style-css' 
      href='http://example.tld/wp-content/plugins/my-style/css/style.css?ver=1.0.0' 
      type='text/css' 
      media='all' />
<![endif]-->

where our custom stylesheet loads after the main stylesheet.

Hopefully you can adjust it to your needs.

added example from linked trac page
Source Link
Milo
  • 78.9k
  • 4
  • 127
  • 168

One way to do it is using the wp_head action:

function wpse85495_header() {
?>
<!--[if IE]>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
<![endif]-->
<?php
}
add_action('wp_head','wpse85495_header');

but I think the prefered way is using wp_enqueue_style() in a conditional way as described here:

http://core.trac.wordpress.org/ticket/10618#comment:6

function wpa85495_enqueue_style(){
    wp_enqueue_style('my-style', WP_PLUGIN_URL . '/my-plugin/style.css', false );
    global $wp_styles;
    $wp_styles->add_data( 'my-style', 'conditional', 'IE' );
}

add_action( 'wp_enqueue_scripts', 'wpa85495_enqueue_style' );

One way to do it is using the wp_head action:

function wpse85495_header() {
?>
<!--[if IE]>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
<![endif]-->
<?php
}
add_action('wp_head','wpse85495_header');

but I think the prefered way is using wp_enqueue_style() in a conditional way as described here:

http://core.trac.wordpress.org/ticket/10618#comment:6

One way to do it is using the wp_head action:

function wpse85495_header() {
?>
<!--[if IE]>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
<![endif]-->
<?php
}
add_action('wp_head','wpse85495_header');

but I think the prefered way is using wp_enqueue_style() in a conditional way as described here:

http://core.trac.wordpress.org/ticket/10618#comment:6

function wpa85495_enqueue_style(){
    wp_enqueue_style('my-style', WP_PLUGIN_URL . '/my-plugin/style.css', false );
    global $wp_styles;
    $wp_styles->add_data( 'my-style', 'conditional', 'IE' );
}

add_action( 'wp_enqueue_scripts', 'wpa85495_enqueue_style' );
added 13 characters in body
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251
Loading
Source Link
birgire
  • 67.8k
  • 7
  • 119
  • 251
Loading