A recent client project left me with perplexing problem. I needed to be able to relate pages to one another.

My end goal was to have a product page that would display thumbnails of related accessories with links to those accessories.

The solution I choose was to use tags. Tags? I didn’t know you could tag pages? Well, out of the box you can’t, (not sure why) but there is a decent plugin called “tags4pages” that will add the tagging field to pages.

With that plugin installed all I have to do is go into an accessory page and in the tags section put the title of the product page the accessory should be related to. The cool thing about using tags is that I can relate this accessory to as many products as I need to. It is also very easy to disassociate an accessory - just delete the tag!

Now, I admit there are probably easier ways of doing this but it worked for me. Use the logic below at your own risk…

So now comes the fun part. How in the world can I wrangle the code to display only the accessories with tag’s that match my main product’s title?

I’m working in the default ‘page’ template in my WordPress theme but this would work for any page template.

Make sure you are not working in the current page’s loop. Look for this code and start after it:

<?php endwhile; endif; ?>

We need to get the title of the current page.

<?php $tag = get_the_title(); ?>

Notice that you need to put ‘get_’ before the WP title tag. This allows you to put the page title in a variable - otherwise it would just print it on the page.

Next, we need to query our posts to come back with the appropriate pages (in our case all the pages that have the tag of our title).

<?php query_posts("showposts=5&tag=$tag"); ?>

This is the code written in English.
“Please (its always good to be polite…) show me the five most recent posts or pages that have the tag I defined in my previous code snippet.”

That gets us our pages now we have to display them. In my case I just want to display thumbnails with a link to the accessory page. I’ve chosen an easy route to get the thumbnails and in this example they are not explicitly tied into the WP database (in other words, I’m cheating…).

I have a folder of images inside my main template folder where every image has the same name of its product page.

Let’s get our loop going.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Now lets grab the image thumbnail and link it.

<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_url'); ?>/images/accessory_thumbs/
<?php the_title() ?>.jpg" alt="<?php the_title() ?>"
title="<?php $image_title = get_post_meta($post->ID, "image_title",
$single = true); echo $image_title;?>" /></a>

Here is the code explanation:
I’m grabbing the image from the “accessory_thumbs” folder which is in my current template folder (hence the “template_url”). The actual file name is the same as the title of the page so I can use the WP template tag to get this. I’m also using the title template tag as my alternate text.

The last thing I’m doing is putting a title on the image so that when someone rolls over the thumbnail a little context box pops up to let them know what this accessory is. I’ve done this using a custom field. On the accessory page I’ve created a custom field called “image_title” with a short product description. The code you see above is getting the custom field “image_title” from the current post and displaying it.

End your loop and you are good to go!

Here is the full code snippet.

<?php $tag = get_the_title(); ?>

<?php query_posts("showposts=5&tag=$tag"); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_url'); ?>/images/accessory_thumbs/
<?php the_title() ?>.jpg" alt="<?php the_title() ?>"
title="<?php $image_title = get_post_meta($post->ID, "image_title",
$single = true); echo $image_title;?>" /></a>

<?php endwhile; endif; ?>