Wordpress Hacks & Tutorial part:2

Image Gallery in WordPress

All the versions of WordPress 2.5+ have inbuilt Image Gallery function where you can upload your images in a set and then insert the gallery either into your post or a new page.

But almost all the old themes(before 2.5) and many new ones do not have the integrated functionality. In order to add this feature, here is what you have to do :

In your existing theme, open single.php and save it as image.php in your theme folder. Now open this image.php file in an editor and find the line that displays the post content. It should be somewhat in the following form.
It can differ a bit but the function is called by the_content like this :-

<?php the_content('Read More'); ?>
Now insert the following code above the aforementioned code (the_content) :-
<p class="attachment">
<a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a>
</p>
<div class="caption">
<?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?>
</div>
Insert the following code below the aforementioned code (the_content) :-
<div class="imgnav">
<div class="imgleft"><?php previous_image_link() ?></div>
<div class="imgright"><?php next_image_link() ?></div>
</div>
<br clear="all" />

Now, add this CSS to your theme’s style.css file :-
/****************Image Gallery *********************/

.gallery {text-align:center;}
.gallery img {padding:2px; height:100px; width:100px;}
.gallery a:hover {background-color:#ffffff;}
.attachment {text-align:center;}
.attachment img { padding:2px; border:1px solid #999999;}
.attachment a:hover {background-color:#FFFFFF;}
.imgnav {text-align:center;}
.imgleft {float:left;}
.imgleft a:hover {background-color:#FFFFFF;}
.imgleft img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
.imgright {float:right;}
.imgright a:hover {background-color:#FFFFFF;}
.imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}

The above CSS code fixes the default gallery of WordPress which doesn’t look so good. So, now when you go and upload your images in a post or a page, go to the gallery option (after you have finished uploading all your images) and insert gallery into your post/page. That’s it don't miss this ...