Phew. That’s quite a title. This tutorial was requested by Heather Lickliter yesterday who wanted a line of images similar to that of another theme, namely the Album theme.

Using The Attached Image it’s really easy to do. The hard part is making the custom query for WordPress. I also believe that Heather wants to include it on a WordPress page so I’ll include how to do that. Hopefully other may find this helpful too. :)

Creating The Page Template

Ok, so first off we need to create the page template to put this bit of code on. To do this create a new blank page and save it in your templates directory with a nice name, use hypens (-) instead of spaces. In general you want to put this in your page:

<?php
/*
Template Name: Album Page
*/
?>

<?php get_header(); ?>

<?php get_footer(); ?>

The template name is essential as it tells WordPress to use it as a page template. Just remember that inbetween the <?php get_header(); ?> & <?php get_footer(); ?> you need to put your HTML content, you know so that it looks like your other pages.

Creating The Custom Loop

Right, now we have our custom page we need to create a custom loop. The reason for this is that the page will not have the right information stored to get the images you want. Do this in the place you want the line of images to show.

<?php
$tmp_query = $wp_query;
$wp_query = new WP_Query('numposts=10');
$tmp_post = $post;
$post = $wp_query->post;
?>

This whole bit basically stores WordPress’ current query in a temporary variable & then creates a new one. Then we store the old post variable and then put the new one from the new query in it’s place.

In the bit that says WP_Query('numposts=10'); you need to customise it to what you want the query to do. The wordpress page for queryposts gives all the parameters you can use. The basic idea though it if you want to show 10 posts from the album category the is would look like this WP_Query('numposts=10&category_name=album'); just remember it is the categories slug not it’s name.

Adding The Images

To add the images it’s as simple as using The Attached Image. Since you may be using the plugin else wear we will use legacy commands to set what The Attached Image does. If you are only using it here then feel free to set the options in the options page.

Here’s the code you need. It comes straight after the previous code.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php the_attached_image('img_size=thumb&width=75&height=75'); ?>
<?php endwhile; endif; ?>
<?php
$wp_query = null;
$wp_query = $tmp_query;
$post = null;
$post = $tmp_post;
?>

I’ll explain the code for those who want to know. The first line checks to see if we have posts & if so starts a loop to go through them. The Attached Image is obvious, I hope. The parameters use the thumbnail size of image & then we resize them using the width & height parameters. You can specify a class using css_class and then use CSS to specify a width and height which some people are adament that it’s better, I’m undecided.

Finally we end the loop & the if and then restore the previous query & post variables.

That’s It

What You Should End Up With. This is with the query set for three posts.

What You Should End Up With. This is with the query set for three posts.

Well that’s about it. That code worked for me & I can’t see any reason for it not working for everyone else. If you have any problems let me know & I’ll see what I can do to help.

Also Heather let me know if that works. :) If not I’ll help you as much as I can. ;)

Edit: I have managed to sort out a screenshot. I couldn’t do one at first since I didn’t have access to my localhost, but I’ve managed to cook one up for you. ;)