Wordpress Quick Tip

There are times when you might want to display your blog posts on a page other than the blog page in Wordpress. To successfully do this, requires a short piece of PHP code. For example, you could show your latest work on the homepage on your website. Here’s the code I used to show my latest work on a portfolio I was building for myself.

There is however, something else that made this extra hard. I wanted to integrate it with the Jquery Fancybox plugin. To do required some extra code that didn’t make things simpler.

The basic code outline for using Fancybox for your images is this:

<a href="the url to the normal sized version of the image" title="The name of the image” class="zoom">
<img src="the url to thumbnail sizes version of the image" />
</a>

This presents some problems with integrating this into Wordpress. Here how I changed it to work with Wordpress posts.

<?php $postslist = get_posts('numberposts=3&order=ASC&orderby=title'); 
	foreach ($postslist as $post) : 
	setup_postdata($post); ?> 
	<div class="project">
		<a class="zoom" 
                      rel="group"
                      title="<?php the_title(); ?>"
                      href="wp-content/themes/starkers/style/images/<?php the_title(); ?>.png">
		<?php the_content(); ?>
	        </a>
	<h4><?php the_title(); ?></h4> 
	</div>			
<?php endforeach; ?>

The first 4 lines are the php that grab the posts. (Note I set it to show the 3 latest posts.)
In the 5th line I enclose each post in a div with an id of “project”.
In the 6th line, there are the basic Fancybox classes that make it work in this particular image.
On the 7th line, I set the name of the image to the title of the post
On the 8th line, I set the url of the normal sized version of the image, in this case it was an image in the theme’s image folder. Notice how I used “the_title();” in the url to make it dynamic for each post.
On the 9th line I just set it to grab the content of the post
10th line-closing out the link
On the 11th line I grab the title of the post
And then close the div and end the foreach statement.

There is one thing you have to do manually to make this work. Set a unique category for the posts to be used here. In this case I used the category “1″

Also, the body of the post must only have the small version of the image in it.

Pretty cool, heh?