CSS3 PIE is a fantastic tool to achieve support for CSS3 styles in versions of Internet Explorer, such as IE& and IE8. If you have been trying to include PIE with your WordPress project you might have had some problems with the way PIE is loaded. Below is an effective solution that works for plugins and themes without having to move “PIE.htc” into the root directory of a site and also without needing to dynamically insert the path to PIE using php in your CSS.
In our css, instead of using
[css]
behavior: url(PIE.htc);
[/css]
we use:
[css]
behavior: url(/?pie=true);
[/css]
If your website is located at http://yourwebsite.com/, the browser will look for the PIE file here http://yourwebsite.com/?pie=true, no matter what page you are on. What we need to do is make sure it retrieves the file based on that url. To do that we are going to add a Query variable for PIE and include a template redirect that checks to see if PIE is being called.
[php]
function css_pie ( $vars ) {
$vars[] = ‘pie’;
return $vars;
}
add_filter( ‘query_vars’ , ‘css_pie’); //WordPress will now interpret the PIE variable in the url
function load_pie() {
if ( get_query_var( ‘pie’ ) == “true” ) {
header( ‘Content-type: text/x-component’ );
wp_redirect( get_bloginfo(‘template_url’).’/inc/PIE.htc’ ); // adjust the url to where PIE.htc is located, in this example we are fetching in the themes includes directory
// Stop WordPress entirely since we just want PIE.htc
exit;
}
}
add_action( ‘template_redirect’, ‘load_pie’ );
[/php]
All you have to do is add the above functions in your functions.php or in your plugin file and adjust the path accordingly. If you are running into rendering issues in IE check with the other known issues documented on the CSS3 PIE site.
Updated 8 March 2012:
Changed example to use wp_redirect instead of an include statement.