4

I have a bunch of code that I tend to put into the header.php of every site I do which are specific to Internet Explorer.

I was wondering if there was a way to insert code into a 'standard' header.php.

Yes, I can simply modify the header. But the idea is to make this a plugin which is generic.

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

<!--[if IE]>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
<![endif]-->
Improve this question

2 Answers 2

Reset to default
2

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-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
    );
} );

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-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.

Hopefully you can adjust it to your needs.

Improve this answer
3
  • Fabulous! I -knew- there had to be a way that worked within the WP core. Big Cheers! Opens up a number of other possibilities.
    – jchwebdev
    Commented Feb 12, 2013 at 20:36
  • Erm, where do i add that first part?
    – greenleader
    Commented Jul 10, 2016 at 12:39
  • Please check the updated the answer @greenleader
    – birgire
    Commented Jul 11, 2016 at 21:56
0

You want wp_enqueue_style(). It's considered best practice and all around more elegant than hooking into the wp_head.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style

Improve this answer
1
  • 1
    What would one do about the IE checking using wp_enqueue_style?
    – brasofilo
    Commented Feb 12, 2013 at 3:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.