I haven't written as many WordPress tutorials as usual lately, as I have been so busy building websites and blogs, so I thought I would take the time out to share a few WordPress codes I have developed recently for attachment page templates and specifically the image attachment page template. The attachment page template is the page that displays a single image when the images link URL is set to 'Post URL'. You can set the image's link URL when inserting a single image into a post, and also when using the gallery shortcode.

The codes in this article are mostly applicable to images inserted using the gallery shortcode as they are most useful for posts or pages that have multiple image attachments. Read more about using image and file attachments.

These template codes can be added to your WordPress theme using the attachment.php and image.php files. If these template files do not exist in your theme you can create them, or WordPress will default to using single.php or index.php to show attachments by default. (See more about template hierarchy).

If you don't want to create a seperate image.php or attachment.php template you can always edit the index.php or single.php files and wrap the attachment specific codes in the is_attachment clause like so:

if(is_attachment()){
//attachment page specific code goes here
}

These php functions are loosely based on code I found in this article: Adding text links to WordPress Gallery by Michael Fields. In this article he provides code examples of how to show previous and next thumbnail links in a WP attachment page. I also made use of this previous-next keys in array function which is infinitely useful!

My first set of functions will return text links for previous image, next image and back to gallery. The functions themselves will need to be added to your theme's functions.php file before calling them in your image.php or attachment.php files. So here we go:

Add these to functions.php:

//function to get next or previous keys in an array
function array_navigate($array, $key){
$keys = array_keys($array);
$index = array_flip($keys);
$return = array();
$return['prev'] = (isset($keys[$index[$key]-1])) ? $keys[$index[$key]-1] : end($keys);
$return['next'] = (isset($keys[$index[$key]+1])) ? $keys[$index[$key]+1] : current($keys);
return $return;
}

//previous attachment link function
function prev_att_link(){
global $post;
$post = get_post($post);
//get the attachments which share the same post parent
$images =& get_children('post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$post->post_parent);
if($images){
//get the id of the previous attachment
$ppid_arr = array_navigate($images, $post->ID);
$ppid = $ppid_arr['prev'];
foreach($images as $key => $value){
if($key == $ppid){
$output = '<a href="' . get_attachment_link($value->ID) . '">&laquo; Previous</a>';
}
}
return $output;
} else {
//there is no previous link
return false;
}
}

//next attachment link function
function next_att_link(){
global $post;
$post = get_post($post);
//get the attachments which share the same post parent
$images =& get_children('post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$post->post_parent);
if($images){
//get the id of the next attachment
$ppid_arr = array_navigate($images, $post->ID);
$ppid = $ppid_arr['next'];
foreach($images as $key => $value){
if($key == $ppid){
$output = '<a href="' . get_attachment_link($value->ID) . '">Next &raquo;</a>';
}
}
return $output;
} else {
//there is no next link
return false;
}
}

//back to gallery link function
function back_to_gal_link(){
global $post;
$post = get_post($post);
$post_par = get_post($post->post_parent);
$slug = get_permalink($post_par->ID);
return '<a href="'.$slug.'">&laquo; Back to gallery</a>';
}

Now to call these functions in your attachment page template:

<div class="back_to_gal_link">
<?php
echo back_to_gal_link().'<br />';
?>
</div>
<div class="prev_next_links">
<?php
if(prev_att_link()){
echo prev_att_link();
}
if(prev_att_link() && next_att_link()){
//insert a seperator between the two links
echo ' | ';
}
if(next_att_link()){
echo next_att_link();
}
?>
</div>

This next function will allow you to output a full set of thumbnails on the attachment page, the current attachment image will not be included in the thumbnail gallery. Again, add this to your functions.php file:

//show all thumbnails function
function show_all_thumbs() {
global $post;
$post = get_post($post);
$images =& get_children( 'post_type=attachment&post_mime_type=image&output=ARRAY_N&orderby=menu_order&order=ASC&post_parent='.$post->post_parent);
if($images){
foreach( $images as $imageID => $imagePost ){
if($imageID==$post->ID){
} else {
unset($the_b_img);
$the_b_img = wp_get_attachment_image($imageID, 'thumbnail', false);
$thumblist .= '<a href="'.get_attachment_link($imageID).'">'.$the_b_img.'</a>';
}
}
}
return $thumblist;
}

And then add this to your attachment page template to show the thumbnails:

<div class="thumbnails">
<?php
echo show_all_thumbs();
?>
</div>

See a working demo gallery of these functions in action here: Man Utd - Wayne Rooney