Dissecting My Site: Part 1

Over a week’s passed since the first annual November 1 CSS Reboot. And what a week it’s been! Some how, I ended up on the front page of many design showcase sites that I frequent (list here) – which was awesome to say the least. This brought tons of fresh eyes to my site and in turn, lots of questions in regards to how I have things setup here. I even received a handful of emails asking for my WordPress templates. While I’m not going to hand them over (yet), I will explain how I accomplished some of the more note worthy aspects of my site.

First and foremost, none of this would be possible without the ever flexible, super simplified publishing tool that is WordPress. Well, it might be possible on other platforms, but it sure as hell wouldn’t have been as easy. I’ve used Moveable Type for a couple projects and I can honestly say their template system is a total nightmare that I wouldn’t wish upon anyone. The template system introduced in WordPress 1.5 is the best thing since sliced bread. I won’t go into detail on the various templates as there are already several good resources on that topic – the WordPress Codex is a fine point of reference, but Chris J Davis does a great job of breaking it down in language anyone can understand. I will mention one template that a lot of people don’t seem to know about. That being the home page template – home.php.

If you’ve clicked-thru to any of the sub pages on my site, you surely noticed the home page is a custom template and features content that can only be found in that one location. Believe it or not, this is super easy to pull-off. When you add home.php to your template directory, it automatically becomes the template for your home page/index.

I knew from the get-go that I only wanted to display the most recent post up front. I don’t remember how I discovered this (wasn’t able to find the source by Googling), but adding a simple variable in the header include of the home template accomplished this.

Replaced

<?php get_header(); ?>

with…

<?php get_header(); query_posts('posts_per_page=1'); ?>

Obviously, you can change the number of post_per_page to whatever you want. This will override the default value you’ve set in Options>Reading. I truncate the post using the <!–more–> function in order to keep all of the columns close to equal heights.

The Portfolio section is hard coded in home.php, so I’ll just skip over that.

There are several ways to display a linkroll on your site. I tried out a few of the social bookmarking type sites like Delicious and Digg, but decided I would rather stick with the WP link manager. Mainly because I don’t care to archive this content. It’s purpose is to deliver short term, time sensitive information that isn’t worthy of a full post, but still something I’d like to share. After setting up a category for Quick Bits, I used the

get_links

template tag to display them.

<?php get_links(7, '<div class="home-quickbits-item"><h2>', '</p></div>', '</h2><p>', false, '_id', true, false, 5, false); ?>

For reference, the attributes are as follows…

<?php get_links(category, 'before', 'after', 'between', show_images, 'order', show_description, show_rating, limit, show_updated); ?>

To display the most recent posts I’m using one of the infamous coffee2code plugins – Customizable Post Listings. The ‘1’ at the end is the number of posts to exclude. Since it’s set up to display by date, that prevents the most recent post from being duplicated in this list.

<?php c2c_get_recent_posts(5, "<li>%post_URL% <span class='tidbits-date'>(%post_date%)</span></li>", "", "date", "DESC", 1); ?>

Although there is a Customizable Comment Listings plugin, I’m actually using a plug called Recent Comments for my recent comments section. This plugin is configured through the Options menu within WordPress.

The two gaming link sections are both using the WP links manager and I once again used the get_links tag to display them.

<?php get_links(2, '<li>', '</li>', '', false, 'name', false, false, 5, false); ?>
<?php get_links(6, '<li>', '</span></li>', ' <span class="tidbits-date">', false, 'name', true, false, 3, false); ?>

Lastly, the music section aka Rocking My Socks is (you guessed it) produced by the WP links manager. This time, it’s a little different because there’s an image involved, although the template tag is pretty close to the others.

<?php get_links(8, '<p>', '</p>', '', true, 'name', false, false, 9, false); ?>

The CSS controls the placement of each album cover, and of course, the

:hover

border change.

#tidbits-music p {
	float: left;
	width: 65px;
	height: 65px;
	margin: 0 1px 1px;
	border: 2px solid #000;
}
#tidbits-music p:hover {
	border: 2px solid #fff;
}

I will admit, it’s a bit tedious having to create album covers but I simply didn’t want to put another list in the bottom portion of the site. I might end up changing this in future. I’m open to suggestions – drop a comment or an email any time!

Lastly, the Flickr feed which is a site-wide element is using a plugin by Dave from eightface simply called flickrRSS. One thing that was a bit of a choir was finding out my Flickr user id. I discovered from a forum post, that it can be obtained from your Flickr RSS feed url. I had to modify it a bit to get the thumbnails the exact size I needed.

Well, that covers the basics of the homepage – how I manage the content and how it’s displayed. Part 2 of this series will go over some of the CSS techniques I used. Specially, the div hover link classes and how they work in different browsers. Make sure you check back for that, or better yet, subscribe to my feed so you don’t miss a beat.