Forums
View unanswered posts | View active topics It is currently Fri Aug 29, 2014 6:11 am



Reply to topic  [ 50 posts ]  Go to page 1, 2, 3, 4, 5  Next
 Integrating PIE into WordPress Themes 
Author Message

Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
Post 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.


Thu Jul 15, 2010 9:40 am
Profile WWW

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Integrating PIE into WordPress Themes
Thanks very much for this tip, Gordon!


Thu Jul 15, 2010 11:23 am
Profile

Joined: Mon Jul 26, 2010 9:25 am
Posts: 2
Post 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?


Mon Jul 26, 2010 9:33 am
Profile

Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
Post 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.


Mon Jul 26, 2010 10:01 am
Profile WWW

Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
Post 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.


Mon Jul 26, 2010 10:09 am
Profile WWW

Joined: Mon Jul 26, 2010 9:25 am
Posts: 2
Post 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


Mon Jul 26, 2010 10:16 am
Profile

Joined: Fri Jul 30, 2010 8:17 pm
Posts: 1
Post 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);



Fri Jul 30, 2010 8:41 pm
Profile

Joined: Thu Jul 15, 2010 9:18 am
Posts: 14
Post 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.


Mon Aug 02, 2010 9:13 am
Profile WWW

Joined: Tue Aug 10, 2010 3:42 am
Posts: 6
Location: England
Post 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.

_________________
Regards

Graham Armfield
(http://www.coolfields.co.uk)


Tue Aug 10, 2010 3:52 am
Profile WWW

Joined: Sat Oct 16, 2010 7:47 am
Posts: 1
Post 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!!


Sat Oct 16, 2010 8:30 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 50 posts ]  Go to page 1, 2, 3, 4, 5  Next

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.