Using CSS3 PIE in WordPress custom themes

Boy, was this a huge pain to figure out. I’m hoping I can save others some teeth-grinding here.

CSS3 PIE is a wonderful addon that makes IE 6-8 render many of the most-used CSS3 features, including:

  • rounded corners
  • box shadows
  • text shadows
  • linear gradients
  • border images
  • multiple background images

It is super-easy to use on an HTML/CSS site, you simply add the PIE.htc file to your site and call the behavior like this in CSS:

And if you can, add this to .htaccess (if you can’t do this for some reason, you can use PIE.php instead of PIE.htc in the CSS file):

Works like a charm.

But if you’re using WordPress…

We have a different story entirely. I was unable to get PIE working after several attempts, moving the PIE file, trying PIE.htc vs PIE.php, etc. What I’ll show you are the final edits that got it working for me. Note: I’m using a child theme of Theme Hybrid.

1) This is in my functions.php file:

So you see you’ll add all the CSS elements that need PIE treatment in IE, then the behavior line with a call to the PIE.htc file (I found that I had to use an absolute link, relative did not work for me on this WordPress site).

2) I added the AddType statement for .htc in my .htaccess file; if for some reason I hadn’t been able to do that, I’d call PIE.php instead.

3) I removed the filters in every CSS element I included in functions.php (I was using a gradient filter for the buttons, and that hides the PIE results).

4) All the CSS elements involved were given position: relative.

Getting PIE to work in WordPress is tricky. There are some posts on the PIE forums that helped, but the part about the filter eluded me and that was the final issue to solve. There are other suggestions there that are reported to work in WordPress, but they didn’t for me, maybe due to something about Theme Hybrid – I don’t know. I did have another Theme Hybrid user confirm that what I showed above worked for him, too.

Let me know if this helps you!

19 comments

  1. Thank you, just what I needed. Works great for all css elements and supported behaviors. I’m building a new theme and I needed to put PIE in theme directory (not in site root). I put absolute url in variable which I call for each css element. So here is my function:

    function my_render_ie_pie() {
    $piedir = WP_CONTENT_URL. “/themes/themename/library/js/PIE.htc”;
    ?>

    #searchform input#s {
    behavior: url(“$piedir”);
    }

    <?php
    }
    add_action('wp_head', 'my_render_ie_pie', 8);

  2. I updated the first post with your correction. Thanks for the reply, I’m still trying to get my head around using this in WordPress but the results in IE are worth it.

  3. Thanks folks,

    Above saved me a lot of work.

    I put the style declaration directly into header —

    #your-css-elements-here {
    behavior: url(‘http://www.mysite.com/wp-includes/PIE.htc’);
    }

    added ‘position: relative’ to css and ‘AddType text/x-component .htc’ to .htaccess and it works fine and good for basic rounded corners on divs in wordpress twentyten theme

  4. redsalmon: just adding the behaviour in the head as you mentioned did it for me.

    .ie-round { position: relative; margin:0 0 5px 0 !important;/*PIE.htc*/ behavior: url(/PIE.htc);

    i didn’t even need to use AddType in .htaccess (but I’ll know where to add it, if necessary later). thanks to debbie and all who posted with your workarounds for wordpress !

  5. Kind of combined your two functions

    function PIE_CSS()
    {
    $piedir = WP_CONTENT_URL.”/themes/mytheme/css/PIE.htc”;
    ?>

    #nav .dropdown {
    behavior: url(”);
    }

    <?php
    }
    add_action('wp_head', 'PIE_CSS', 8);

  6. You’re welcome.

    I seem to occasionally have some WordPress sites where even these two setups don’t work – I suspect it might be the client’s host, because there are no differences in the WordPress install.

  7. Thanks Debbie!

    Border-radius and box-shadow works perfect.
    However I can not get text-shadow to work.

    Are you sure pie.htc support text-shadow?

  8. Does not need a function to make PIE.htc work in wordpress
    Just give relative path with respect to your base folder.
    Lets say you put PIE.htc in your theme folder then path will be as follows

    behavior: url(wp-content/themes/twentyeleven/PIE.htc);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">