My index of DJ Mixes is entirely dynamic. That is, when I add a new mix I don’t have to manually update this page. Here’s how I did it.

First I created an empty page called DJ Mixes. Then I created a child page for each mix and added two custom fields for year and genre. With this done, I had all the content I needed. The rest the work was to build the DJ Mix index page.

I made a copy of the page.php template file called dj-mixes.php. I updated the DJ Mixes page to use this file as a template. Then I replaced this:

<div class="postcontent"><?php the_content(__('<br/>Continue reading...')); ?></div>

with this:

<?php
    $djmixes = get_pages('child_of='.$post->ID.'&sort_column=menu_order');
    foreach ($djmixes as $djmix) {
        $mix = '<div class="djmix">'."\n";
        $mix .= '<div class="djmixyear">'.get_post_meta($djmix->ID,'Year',true).'</div>';
        $mix .= '<div class="djmixtitle"><a href="'.get_page_link($djmix->ID).'">'.$djmix->post_title.'</a></div>';
        $mix .= '<div class="djmixgenre">'.get_post_meta($djmix->ID,'Genre',true).'</div>'."\n";
        $mix .= '</div>'."\n";
        echo $mix;
    }
?>

The get_pages statement returns an array of all the information associated with pages which are children of the current page. Then we create a loop which displays the values for custom field Year, the page title, and custom field Genre for each of the child pages. This is done using get_post_meta.

Here’s the associated CSS:

.djmix {clear:left;}
.djmixyear {float: left;width: 50px;}
.djmixtitle {float: left;width: 200px;}
.djmixgenre {float: left;width: 150px;}

If you can think of a more elegant way to do this, please let me know! I’m eager to learn more efficient practices.

I had quite a bit of trouble getting this code to appear right just using ‘code’ and ‘pre’ in my markup. Finally found The Definitive Guide on Wordpress Syntax Highligher Plugins which led me to the SyntaxHighlighter Plus plugin.