10.1.08 
WordPress Portfolio using custom fields and templates
I recently updated my portfolio page at www.d-allison.com, which took some pains to set up. I had very specific needs, some of which I still haven’t completely figured out, but I think that it turned out nicely.
Much of my website is done using WordPress, with a template that I’ve completely designed myself. What I wanted to accomplish is to have my portfolio main page display a thumbnail of the website that I was featuring along with a title. When you click on it, it takes you to a another POST page which shows the portfolio item.
Individual Pages
To accomplish this, I had to create an individual post for each portfolio item. I included them into one specific category; in this case web design. At this point, each page look like every other post in my blog which I did not want. To distinguish these pages from the others, I created a single post template based on the category.
Custom Category & Single Post Pages
To find the category number in WordPress, go to the categories section in the WordPress administration panel, hover over the category that you’re working on, and you should see the category id in the status bar of your browser. Now, armed with my category number, I take the single.php template in WordPress, copy it, and append the category id number to it. Example: Copy of single.php becomes single-9.php. WordPress will now look for the single-9.php template for individual Web Design posts rather than the default single.php template. This should also be done for the category page as well. WordPress will automatically look for the archives template unless you specify (ie. category-9, category-10, etc). So now when a user goes to the Web Design category, a specific page will show the listings, and a specific page will show the individual posts. Now, you can format the single-9.php page (or something similar) to look how you want it to look.
Back to my site, I deleted the dates, comments, and other default options in the single template in favor of my own custom formatting. Besides the changes I made in the style sheet, I have a custom sidebar, which includes a related posts listing and links to the rest of the site, and a description of the post, using the Custom Fields feature built into WordPress.
Using Custom Fields
I enter the name , type of project and other title information in the “Key” field, and the corresponding information, such as “John Smith” in the “Value” field, then click Add Custom Field. Keep adding as much information as you need. Those keys will be available for re-use on your next posting. The information that you enter here wont be useful unless it corresponds to a value on your template. To just have all the information show up in your template, simply place this code:
<?php the_meta(); ?>
Again this just displays all the information in alphabetical order. I’m sure there’s away besides CSS to format this but I don’t know how. Anyway, to get a better grasp on the items, place this code:
<?php $values=get_post_custom_values(“ClientType”);echo $values[0];?>
where “ClientType” matches the item that you used as your “Key” in the custom field. By placing this code in your template, you can arrange individual items in your post, style them however you please, and have more overall control of the look and feel of you custom fields.
The Excerpt Field
Next I include a link to an image file that Ive already created in the “excerpt” section, so that I can show that information on the category page. Here’s an example:
<a href=”http://www.d-allison.com/blog/chado-designs”><img class=”alignnone size-thumbnail wp-image-429″ title=”Chado Advertising & Designs” src=”http://www.d-allison.com/blog/wp-content/uploads/2008/09/picture-111-125×125.png” alt=”" width=”125″ height=”125″ /></a>
When I have finished the look of the single-9.php page, I move to the category-9.php page. I design the page to look a certain way using CSS. I want to show the image that I placed in the “excerpt” of the posts, so I change the coding on the category-9.php page. Take this coding:
<?php the_content() ?>
and change it to
<?php the_excerpt(); ?> .
This will display the excerpt instead of the content. Place a div or table around the posting on the category-9.php page that’s only slightly larger than the image, make sure it floats left and you can have a gallery that looks like mine! Here’s the link again: http://www.d-allison.com/blog/category/web-design
Future Revisions
The only things I wished I could do different is to have images on my posts in the “related posts” area. Not quite sure how to do that, and suggestions here would certainly be welcomed!