Kyle Boddy Entrepreneur, Hacker, Biomechanics Researcher, Baseball Lover.

WordPress Code: Attachment / Category Loop

Wordpress!

Recently while writing some PHP/WordPress code for a client of mine, I ran into an interesting situation. The previous developer had some godawful code that I won't get into right now, but the client wanted to be able to display the following on a static page:

• Groups of areas where his business did work
• Blog posts in those groups (testimonials / examples of previous jobs)
• The first image attached to each blog post as a thumbnail, linking back to the original blog post

I had never done something like this before with WordPress, but it's actually fairly simple, as WP is quite powerful. After finding out that all the images were the same aspect ratio (phew!), I decided on writing a loop that would have only two arrays of hard-coded data. These arrays would: 1) Define the areas that his business did work, and 2) Match the category slugs that WP uses.

My client agreed to post his work to categories that were matched to the groups of areas where his business did work. As such, I defined two arrays with the same number of items in the same order that matched the description and the category slug for each group. This might be better off in a single nested array with multiple key-value pairs, but I think this is a simple solution that scales well and can be modified easily at any time.

Here's the code:

 <?php
 $areas = array(1 => 'Seattle','East Side & Mercer Island','North Side','South Side');
 $slugs = array(1 => 'seattle-jobs','east-side-and-mercer-island-jobs','north-end-jobs','south-end-and-west-seattle-jobs');
 $i = count($areas);
 $n = 1;

 while ($n <= $i)
 {
     global $post;
     $myposts = get_posts('numberposts=-1&offset=0&category_name=' . $slugs[$n]);
     echo '<div id="imageList">';
     echo '<a name="' . $areas[$n] . '"></a><h2>' . $areas[$n] . '</h2>';
     echo '<table id="ourwork"><tr>';
     $x = 1;

     foreach($myposts as $post)
     {
       setup_postdata($post);

        echo '<td>';
        $args = array(
                'post_type' => 'attachment',
                'numberposts' => '-1',
                'post_status' => null,
                'post_parent' => $post->ID
        );
        $attachments = get_posts($args);

        if ($attachments) {
                    $y = count($attachments);
                    $y--;
                    echo '<a href="' . $post->guid . '">';
                    echo wp_get_attachment_image($id = $attachments[$y]->ID, $size=array(200,133), $icon = false);
                    echo '<strong><br><br>';
                    echo apply_filters('the_title', $attachments[$y]->post_title);
                    echo '</strong></a>';
                    echo '</td>';
                    if ($x == 4)
                    {
                        echo '</tr><tr>';
                        $x = 0;
                    }
                    $x++;
                }
     }
    echo '</tr></table>';
    echo '</div><div class="blog"></div>';
    $n++;
  }
?>

As you can see, I defined the arrays to start at 1 for simpler counting.  After that, it prints out the category's name in a header tag, defines a table and anchor (this was tied into another imagemap project), and runs a foreach to get all the posts under the first slug in the $slugs array. In the foreach loop, it finds all posts with at least one attachment to it, counts the number of attachments, and uses the first attachment in the post to print out as an image with the title of it right below it - both linked to the original blog post.

It then increments up to four times per line for formatting purposes, then kicks out and starts a new table row.

For future expansion, all that needs to be done is adding, removing, or changing the paired $areas and $slugs to run together.

Right now the client only has 50-80 entries, so it all fits fine with minor scrolling (plus the aforementioned imagemap from the home page shortcuts you to the correct anchor). However, in the future, it may get unwieldy. Using a Javascript show/hide function will probably be my next project and is simple to implement. It can even be tied in with the anchors from the imagemap by using the $_GET function in PHP to pass that variable along, ensuring that only that category opens up while the rest stay hidden (at no penalty to SEO, I might add).

Pretty fun piece of code. It took me about 5-6 hours to research and put together. Hope it helps you!