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

My client who rents pop-up campers needed a simple, easy-to-manage guestbook for his redesigned website. He had a clunky script on his old site that he said had been nothing but a source of spam for years – could I do something better? Of course I could.

I looked into the available plugins; there were only a couple that were compatible with the current version of WordPress, and when I tried them I found they were not going to work, mainly because I couldn’t easily add the extra custom form fields I needed.

So I decided to make my own.  In WordPress I created a page called Guestbook. I used the TDO Mini Forms plugin to create my input form. It was easy to configure for moderation by my client and for Akismet spam protection.

Making the Input Form

I set the form to create a new post for each submission, submit it to the ‘guestbook’ category, then built a custom form. I used two custom field widgets (TDO Mini Forms widgets) for Name and Hometown, a content widget for the post name and comments, and then a simple one-question captcha. All of these widgets are drag-and-drop (there are many others available, including image uploader) and very customizable.

Once the form’s built, it can be hacked to rearrange fields, modify CSS, etc. You can also export a final copy of your form to a text file to later be imported for reuse on other projects.

Getting the Form Into the Page

I created a custom category template page where I limited the category to be displayed to ‘guestbook’ by using the ‘include’ parameter for wp_list_categories, set to category 10 (my guestbook posts) like this:

Then in WordPress I set my Guestbook page to use that new custom category template.

I used the TDO Mini Form widget to put the form into the sidebar on my Guestbook page. Nothing to do here really except restrict where it displays with Widget Logic:

Styling the Form

Custom styling of the form is easy, the file is /plugins/tdo-mini-forms/tdomf-style_form.css. I only made a couple of small changes, mostly redoing the ‘submit’ button to match the others on the site.

Styling the Page and Guestbook Posts

I added some text at the top of the page by putting it into the Description field for the category. Then I wanted to style each blog post with a border and some additional changes in presentation.

The CSS was simple – I made the posts narrower, put a larger margin underneath them, added padding, added a subtle background color and border, and made the headlines a little smaller and with a different font than the page headline:

Using Filter Hooks to Control What’s Displayed for each Post

I’m using Theme Hybrid, so this part was a little easier than it might normally be. Here’s a good overview of filter hooks and how to use them, and this is what’s built into Theme Hybrid. And, here’s a hooks database so you can see all the filter and action hooks available in WP 3.0.

What I wanted to do:

  • Remove the link from the post title
  • Change the byline to show only the publish date
  • Show all of the post content instead of an excerpt

I found that I can do all of this with hooks in my theme’s functions.php file.

Here’s the final product in action.

That’s pretty much it – now when someone submits a comment (that isn’t flagged as spam by Akismet) my client gets an email notification. He logs into WordPress and goes to TDO Mini Form’s moderation panel, and can then edit, trash or publish the post as he likes. A simple, solid solution that took less time than anticipated (which is always nice!).

On Saturday night I downloaded the Hybrid WordPress framework and installed it on the site where I’ll be reworking my main website. By Sunday afternoon, I was a total convert from WP Framework.

I learned more about advanced WP custom theming in a day than I have in the last month. Very excited to delve more deeply into Hybrid and all its possibilities.