ulyssesonline.com

You may have noticed my new and spiffy WordPress Theme. For once, I’ve decided to change color schemes. Well, it’s about time. I finally got tired of that orange color. There is a subtle change you won’t notice from the first glance. I’m using graphics on my header and titles instead of text. To validate, just right click on the title above to view the graphic image. I am using a small PHP script which converts any text into a graphic image. This article covers the step-by-step process on how to turn your titles into graphic images in your WordPress Themes.

All you need is this neat and powerful little file called titles.php created by Patrick Stuart.

1. Before we get started, let’s test the script by cutting and pasting the following URL to your browser.

http://ulyssesonline.com/files/titles.php?letters=Hello World

Awesome, it works. This script allows us to pass the text “Hello World” to the script via the browser. As you may have noticed, by default, we are using the Broadway BT True Type Font.

2. Now, let’s try creating a simple PHP script. Download the titles.php and the Broadway BT files and place both files on your web server. Create a simple PHP file and embed the following code:

<img src="<?php bloginfo('stylesheet_directory'); ?>
/titles.php?letters=Hello World" alt="Hello World" />

3. Cool. How about using other fonts? Well, you can use hundreds of fonts that are freely available at webpublicity.com. Just download the fonts. For simplicity sake, rename the files in small caps without any spaces. Upload the fonts to your directory, then edit the titles.php file to reflect the new font. The sample code shows the Parisian True Type Font is now the default.

$font = './parisian.ttf';

4. To change font size, text margin, angle, color, background color, shadows, etc. just edit titles.php and change the following variables. Save and refresh the page.

$txt_size = 24; 	// Size of Text
$x_margin = 5; 		// Set Margin of x of text
$y_margin = 10; 	// Set Margin of y of text
$txt_angle = 0;		// Angle of Text
$shdw_angle = 0;	// Angle of Text Shadow
$shdw_x_offset = 1;	// Horizontal Shadow offset
$shdw_y_offset = 1;	// Vertical Shadow offset
$bg_r = 255;  		// Background Color Red
$bg_g = 255;   		// Background Color Green
$bg_b = 255;    	// Background Color Blue
$txt_r = 0;  		// Text Color Red
$txt_g = 0;         // Text Color Green
$txt_b = 0;         // Text Color Blue
$shdw_r = 255;  	// Text Shadow Color Red
$shdw_g = 255;    	// Text Shadow Color Green
$shdw_b = 255;    	// Text Shadow Color Blue

6. Finally, here is the code to convert the titles of your WordPress Theme into graphics. Edit the WordPress loop which is usually located in index.php or post.php files, and place this code:

<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" rel="bookmark" 
title="Permanent link to <?php the_title();?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>
/titles.php?letters=<?php the_title(); ?>"
alt="<?php the_title(); ?>" /></a></h2></code>

7. You may have to modify single.php, page.php, archives.php and search.php if you like the page titles to be graphics as well. If you want to generate other graphics, just make copies of titles.php and rename them. Supply the text and call the new files. That’s it. Enjoy.