CSS3 PIE Forums
http://css3pie.com/forum/

Integrating PIE into WordPress Themes
http://css3pie.com/forum/viewtopic.php?f=4&t=8
Page 1 of 5

Author:  gordonbrander [ Thu Jul 15, 2010 9:40 am ]
Post subject:  Integrating PIE into WordPress Themes

If (like me) you're developing WordPress themes with PIE, you'll want to include the PIE files inside of your theme folder to keep things self-contained. Since WordPress themes can live in a number of locations, you'll immediately run afoul of IE's strange treatment of relative URLs in behavior properties (see "Relative paths" under Known Issues: http://css3pie.com/documentation/known-issues/). My solution has been to add something like this to the functions.php file of the theme:

Code:
/**
 * Attach CSS3PIE behavior to elements
 * Add elements here that need PIE applied
 */
function my_render_ie_pie() {
   echo '
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   #cherry-pie,
   .apple-pie,
   .pumpkin-pie {
      behavior: url('.trailingslashit(get_bloginfo('template_url')).'js/PIE/PIE.php');
   }
</style>
<![endif]-->
';
}
add_action('wp_head', 'my_render_ie_pie', 8);


The bloginfo call outputs the absolute path to PIE. The "8" in the add_action call means this will render just below stylesheets added with wp_enqueue_style.

Then in my CSS, I leave a comment by any element that's using the attached PIE behavior.

Code:
/**
 * Uses CSS3PIE.
 * See my_render_ie_pie in functions.php
 */


Have a solution of your own? Post it below.

Author:  jason [ Thu Jul 15, 2010 11:23 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

Thanks very much for this tip, Gordon!

Author:  jacobdubail [ Mon Jul 26, 2010 9:33 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

Thanks, Gordon. Great tip.

I've got PIE 'working' on my page... well, at least it's included. It renders 1 item successfully, but nothing more. And, the 1 item it does render correctly has the behavior declared directly in the stylesheet, not functions.php.

The page is joed.jacobdubail.com

Code:
function my_render_ie_pie() {
   echo '
   <!--[if lte IE 8]>
   <style type="text/css" media="screen">
       #close {
         behavior: url('.trailingslashit(get_bloginfo("template_url")).'inc/PIE/PIE.php);
      }
   </style>
   <![endif]-->';   
   }
   add_action('wp_head', 'my_render_ie_pie', 8);


It doesn't seem to matter whether I declare it in the styleesheet or functions.php. Any ideas?

Author:  gordonbrander [ Mon Jul 26, 2010 10:01 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

Hey Jacob. It looks like the URL to PIE you're using is pointing to the wrong place. The URL you have in your theme now resolves to:

Code:
{path to your theme}/joed-v1/inc/PIE/PIE.php


Your PIE file is actually located in:

Code:
{path to your theme}/joed-v1/inc/PIE.php


As for the way you attach PIE in your CSS file, it "works", since you are hard-coding absolute URLs to PIE. The problem with it is that it is not portable. If you changed your domain name, for example, you would have to change all those paths in your stylesheet. The method described above is meant to help keep your theme portable. No matter where you install the theme,
Code:
bloginfo('template_url')
will always be replaced with the URL to your theme folder.

Author:  gordonbrander [ Mon Jul 26, 2010 10:09 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

I love that people are trying this solution and finding it useful. If anybody else needs help troubleshooting it, please post details in the Troubleshooting Help Forum. That way others can find your thread when they are running into the same issue. Let's reserve this thread for WordPress theme solutions. Think of it as a how to, not how do I.

If you found a tried and true method of integrating PIE in a portable way into WordPress themes, please post it below.

Author:  jacobdubail [ Mon Jul 26, 2010 10:16 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

You know, I looked and looked at that function and just knew something was wrong with it, but couldn't figure it out... Sometimes you just need a fresh set of eyes...

And, it turns out, I mis-read the documentation. I wasn't applying the -pie-background for 'solid' rgba values. All is well now. Thanks for taking the time to help me out.

-Jacob

Author:  webstandardcss [ Fri Jul 30, 2010 8:41 pm ]
Post subject:  Re: Integrating PIE into WordPress Themes

One thing I noticed was the use of template_url. This is OK as long as you are not using a child theme. In that case the template_url would be the Parent Theme Framework and not the child theme.

I cannot use this solution because I am using wp-less and I fear that the functions.php will not parse into my less stylesheet.

I will just put PIE.php in the domain root and call it with a leading slash ('/PIE.php')



Code:
$childtheme = get_bloginfo('stylesheet_directory');

/**
* Attach CSS3PIE behavior to elements
* Add elements here that need PIE applied
*/
function my_render_ie_pie() {
   echo '
<!--[if lte IE 8]>
<style type="text/css" media="screen">
   
   #cherry-pie,
   .apple-pie,
   .pumpkin-pie
   {
   behavior: url(' . $childtheme . '/js/PIE/PIE.php');
   }
</style>
<![endif]-->
';
}
add_action('wp_head', 'my_render_ie_pie', 8);


Author:  gordonbrander [ Mon Aug 02, 2010 9:13 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

webstandardcss wrote:
One thing I noticed was the use of template_url. This is OK as long as you are not using a child theme. In that case the template_url would be the Parent Theme Framework and not the child theme.

It's true! That's actually intentional, since you'll usually want to keep most of your resources inside of the parent theme, rather than having a copy of PIE in every child theme. However, it depends on the situation, and it may make sense to put the same code in the functions.php of your child theme with a call to
Code:
get_bloginfo('stylesheet_directory');
instead.

webstandardcss wrote:
I cannot use this solution because I am using wp-less and I fear that the functions.php will not parse into my less stylesheet.

I use Less for many projects, too, and haven't had a problem. To clarify, in the method above, you put all of your PIE fixes in the my_render_pie function -- they are kept separate from your main CSS/Less/whatever. It's a method that works well for themes you intend to distribute.

Author:  GrahamA [ Tue Aug 10, 2010 3:52 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

If you have access to the root folder of your site an easier method is to put the PIE.htc (and PIE.php if reqd) into the root folder of the site - not within the Wordpress themes area at all. Then in your CSS do this:
Code:
behavior: url(/PIE.htc)


I would imagine that's going to be fairly portable. There's a thread about this on the Troubleshooting board.

Author:  ddfa [ Sat Oct 16, 2010 8:30 am ]
Post subject:  Re: Integrating PIE into WordPress Themes

!!sorry for my english!!

Hello, my name Bruno Fernando, I'm brazilian.
I am a student information system. Now I'm learning PHP, Javascript and other stuff ... :P.
Here I have a small design company called DRAUM (playing with the phonetics of the word DRAW) ... lets go...


-------------------------------------------------------------------

Guys, I had many difficulties in putting this code in ta Wordpress theme here's how I did.
The code that was posted I had to make an adjustment.

Code:
function my_render_ie_pie() {
   echo '
<!--[if IE]>
<style type="text/css" media="screen">
   #slider, .slide a h1, .titulo_site
   {
      behavior: url('.trailingslashit(get_bloginfo('template_url')).'scripts/hack/PIE.php);
   } 
</style>
<![endif]-->
';
}
add_action('wp_head', 'my_render_ie_pie', 8);


remembering that it is within the file functions.php , done that I have to call it in the body of my site (That is the header.php in WP) is not it? !

So I'll do this:

Code:
<?php if(function_exists('my_render_ie_pie')) : my_render_ie_pie(); endif; ?>


now no longer has the need is using:

Code:
behavior: url(/PIE.htc);


in my CSS, I can remove it

!!Again sorry for my English and I have helped!!

Page 1 of 5 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/