1. Tutorial

This will be our end result

In this tutorial we will be using the wordpress default theme to show you how easy it is to create a showcase theme. First replace the narrowcolumn class in your style.css with the following

.narrowcolumn {
float: left;
padding: 0 0 20px 15px;
margin: 0px 0 0;
width: 540px;
}

Open index.php and find the code in the image below.

Replace it with this code.

<div class="showcase">

Add the following styles to your stylesheet.

.showcase
{
width: 250px;
height: 270px;
float: left;
border: 1px solid #CFCFCF;
margin: 4px;
padding: 4px;
}

.showcase h2
{
padding: 2px;
margin: 0px;
}

.showcasethumb
{
width: 230px;
height: 160px;
}

Back to index.php find the following code

<?php the_content('Read the rest of this entry »'); ?>

Replace it with

<?php $homethumb = get_post_meta($post->ID,'homethumb', true);?>
<img class="showcasethumb" src="<?php echo bloginfo('url')."/wp-content/uploads/".$homethumb; ?>.jpg" alt=""/>

2. Usage

First create a 230*160 image preview, when creating a new post upload your preview image.

Copy paste the title of the image (see picture above) in your new post as a new custom field, call that custom field homethumb and click add custom field.

3. Plugins to install

As you can see from the end result preview we have some star ratings, you will need to install a plugin for this. The plugin name is WP-PostRatings by Lester Chan, you can install it by going to the plugin section of your site, go to add new and type WP-PostRatings in the search. Then just click install

In the index.php find the following code

Below add

<?php if(function_exists('the_ratings')) { the_ratings(); } ?>

I modified the settings of the rating plugin so it would show only the star rating and no text. You are free to do whatever you want.

4. Examples

• www.iv-designs.org
• http://themeforest.net/item/design-showcase/19791
• http://themeforest.net/item/showcase-theme/18025
• http://wthemes.com/