I’ve been working on a custom wordpress theme as part of a much belated birthday present, and one of the requests was to have the fancy font that I’d used for all the headers to be used dynamically for the post titles. Usually all the fancy titles and stuff that you see on sites are actually static images, as you can’t rely on the users machine to have the fancy font installed. So, generally, you’re limited to maybe a handful of fonts. I wasn’t so keen on making an image everytime the author wanted to make a post so I did some hunting around.
I came across A List Apart’s DTR Article by Stewart Rosenberger. You upload your fancy font to the server and it uses a small php script to make a temporary image which is used instead of the text. I also found an adapted version called P+C DTR, which used PHP and CSS to do the same thing.
Win:
Fail:
But, there were a few problems. The P+C DTR files had been removed, and I wanted a little more functionality than what the ALA’s DTR offered. So I did what any normal person and scoured the internet to find a decent copy of the files. What I found was example 1.6.1. for P+C DTR. You can find a zipped version here.
Unzip the file, and upload the whole thing to your web server, and test the example page. If you don’t get the pretty pictures check with your host, you’ll need a decent version of PHP (I’m sure this script is old school, so it should work okay with anything 3.0 and up. I haven’t tested it, so don’t quote me. It works fine with 5.0). You will also need the GD Library with PHP support installed on your server. If you don’t know what that means, talk to your Host and get them to figure out it for you.
Once the example pretty pictures are up and running, follow the README instructions and upload your font file to the dtr folder, alter the heading.css as you see fit, and add the php calls to the top and bottom and link the style sheet. It really is as easy as it sounds.
The problem I had was integrating it with Wordpress. Three days of trying various combinations and banging my head against the wall. It point blank refused to work and by the end of it I was ready the gouge out my own eye, so painful was this DTR problem. What worked in the very pretty example did NOT work when I tried to do the same within the Wordpress templates.
In the end I asked the advice of the brilliant Jennifer from InkSplash Designs who had successfully used DTR on Shamelessly Sassy and KDaly Photography and she said she’d had the same frustrating issues I had! But she did have some very clever tricks to get it working. Here’s what to do:
1. Install the /dtr folder in the root directory. So it should be in the same directory as the /wp-admin, /wp-content, /wp-includes folders, etc. (I’m fairly sure this is the source of all those frustrating issues! I’d installed it in the template folder)
2. In the theme files, put this:
In header.php, at the very very top, before the doctype: <**? php include 'dtr/dtr.php'; ?>
And for the stylesheet (I put this before the wp_head function): <**link href="/dtr/headings.css" rel="stylesheet" type="text/css" />
Then at the bottom of footer.php, after the html tag: <**?php ob_end_flush(); ?>
(You’ll need to remove the **’s).
Anyway, now it works like it’s meant to! Hurrah – I’m so glad. I figured I’d post about it here, so that no one else has to scour the internet and come up empty handed!
Posted at June 3rd 2009, 08:03am
This post tagged as RL
Have something to say? - 6 Comments