Category: Coding

Recently, while developing a WordPress theme for a client, I devised a handy trick to use different headline graphics for pages (it should work for posts too) based on the page title. The basis of the trick is to name your headline graphics the same as the pages they are to show up on (ex. about.png for the About page). Once you do this, you simply need to insert the following bits of code into your theme’s page template:

Part 1: Add this to the beginning of your template (just after the line that starts with “<?php get_header(); ?>”):

NOTE: Modified this to actually, you know, WORK! 🙂
If you tried it before, and it didn’t do what you expected, change the code at the top of your template to this new version.

<?php
	global $post;
	
	$title = $post->post_name;
	$title = strtolower($title);
	$titlepic = $title.".png";
?>

For those who don’t read PHP, what this block does is gets the title of the current page, stores it in a variable, converts it to lowercase, and then adds “.png” (changes this if you use gifs or jpgs) to the page title to create the image’s file name.

Part 2: Add this where you want the graphic to appear:

<img src="<?php bloginfo('template_directory'); ?>/images/<?php echo $titlepic ?>" alt="<?php $title ?>" />

This is a standard XHTML image tag. Change the directory to suit your needs, but leave the “<?php echo $titlepic ?>” bit as this is what does the magic. The alt parameter could likewise be changed, but it does need to be there for the XHTML to validate.

So there you have it. A painless method to get dynamic graphics for your blog, based on your page titles.