Archive for October, 2009

As mentioned in a previous post, on a recent project I was asked to create a customized home.php file to display the latest post for three particular categories on the home page. The first one containing a larger image than the other two. In addition, below the home page recent posts, the client wanted an array of thumbnails displaying only images in a grid of ALL the most recent posts. The block graphic below displays the proposed homepage content outline:

Below is selected code used to construct this page:

LARGE IMAGE - MOST RECENT POST FROM SELECTED CATEGORY

<?php
for ($i = 1; $i <= 1; $i++) {
if ($i==1) {$oi_cat = "category01";}
?>
<?php
$query= 'category_name='.$oi_cat.'&showposts=1';
$recent = new WP_Query($query); while($recent->have_posts()) : $recent->the_post(); ?>
<div class="fix">
<div class="title">
<h2 class="posttitle"><a href="<?php the_permalink() ?> "> <?php the_title(); ?> </a></h2>
<div class="postdata"><span class="category"><a href="/category/<? echo $oi_cat; ?>/">More <?php the_category(', ') ?> </a></span> <span class="comments-home"><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></span></div>
</div>
<div class="entry-home">
<? $thumb = get_post_meta($post->ID, "large-image", true);
if ($thumb != "")
{ ?>
<img src=" <?php $values = get_post_custom_values("large-image"); echo $values[0]; ?> " alt="<?php the_title(); ?> class="post-image"/>
<?php }
the_excerpt(); endwhile; ?>
</div>
</div>
<?
}
?>

TWO MEDIUM IMAGES - MOST RECENT POST FROM SELECTED CATEGORIES

<?php
for ($i = 1; $i <= 2; $i++) {
if ($i==1) {$oi_cat = "category02";}
if ($i==2) {$oi_cat = "category03";}
?>
<?php
$query= 'category_name='.$oi_cat.'&showposts=1';
$recent = new WP_Query($query); while($recent->have_posts()) : $recent->the_post(); ?>
<div class="fix">
<div class="title">
<h2 class="posttitle"><a href="<?php the_permalink() ?> "> <?php the_title(); ?> </a></h2>
<div class="postdata"><span class="category"><a href="/category/<? echo $oi_cat; ?>/">More <?php the_category(', ') ?> </a></span> <span class="comments-home"><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></span></div>
</div>
<div class="home">
<? $thumb = get_post_meta($post->ID, "med-image", true);
if ($thumb != "")
{ ?>
<img src=" <?php $values = get_post_custom_values("med-image"); echo $values[0]; ?> " alt="<?php the_title(); ?> align="left" class="post-image"/>
<?php }
the_excerpt(); endwhile; ?>
</div>
</div>
<?
}
?>

ARRAY OF THUMBNAIL IMAGES FROM ALL CATEGORIES

<div class="thumbs">
<?php
$query= 'showposts=15';
$recent= new WP_Query($query); while($recent->have_posts()) : $recent->the_post();
?>
<? $thumb = get_post_meta($post->ID, "thumb-image", true);
if ($thumb != "") {
?>
<a href="<?php the_permalink() ?> "><img src="<?php $values = get_post_custom_values("thumb-image"); echo $values[0]; ?> " alt="<?php the_title(); ?> " class="thumbnail" title="<?php the_title(); ?>"/></a>
<?php }
endwhile; ?>
</div>

I apologize if the code is a bit messy, but I took me awhile to code this so I hope it will be useful to anyone looking for a similar build!

Lastly, below are some links I found useful relating to this post:

(this first link was especially useful thanks to c64glen)
http://wordpress.org/support/topic/222993

http://codex.wordpress.org/Template_Tags

http://www.aaronrussell.co.uk/blog/improving-wordpress-the_excerpt/

http://wpguru.co.za/page/creating-a-static-wordpress-front-page/