the Studio is now Live

Archon Digital has uploaded the Studio,  a new section where I intend to post design related articles and some featured artwork. Working on this section had me use a few techniques on how to implement custom fields and multiple Wordpress loops which I will discuss in this article.

The Loop

This page was made using two loops. The first loop works by fetching the last five posts on the Studio category excluding post from the Portfolio category. It contains articles related to graphic design, web design, web development and Wordpress. The second loop then calls in all posts under the category Portfolio which is a special category I designed for showcasing artwork and in the future, some detailed case studies.

Here is the loop I used for the upper part where the titles are displayed:

have_posts()) : $my_query->the_post(); ?>
<h2><a title="Permanent Link to &lt;?php the_title_attribute(); ?&gt;" rel="bookmark" href="&lt;?php the_permalink() ?&gt;"></a></h2>

The Switch Categories

The Portfolio category works like a switch much like how the Featured category works. Posts in the Portfolio category require custom fields to display some custom data such as client name, job output and other details which can be added later as the need arises.

The “Featured Artwork” section uses the following loop

query('category_name=Portfolio&showposts=3'.'&paged='.$paged);
?>

Custom Fields

The portfolio displays artwork for each post using custom fields displayed through conditional tags which add some extra html to display images.

ID, "lead-image", true);
if ($thumb != "") { ?>
<div><img src="&lt;?php echo get_option('home'); ?&gt;/wp-content/uploads/&lt;?php $values = get_post_custom_values(" alt="" />"/&gt;</div>

This method of displaying custom fields makes migrating themes and future maintenance much simpler as compared to pasting blocks of code into a custom field everytime you write a post. It uses a conditional tag to display the needed html around the custom field “lead-image” only if the post has the appropriate custom field on it. The “lead-image” custom field only requires that I input the filename of the image I want to use.

Less Clutter

Since this section is intended to showcase Archon Digital’s work, all possible forms of distraction like the Entrecard widget, Google Adsense and other sidebar clutter were removed except for the main adzone containing the site’s four main 125×125 advertisement slots.