Heyo! I'm Matt Brett, a freelance web designer living in beautiful BC, Canada. I specialize in WordPress development and generally making things that are awesome. When I'm not working, I'm playing video games, and I've published 133 game reviews over the past few years.

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.

12 Comments

  1. Hi Matt,

    Very very very good job on the site… Just one thing that doesn't seem to work well, the little rss icons are very hard to read, the font choice maybe. Other than that super job!!!

    Trevor

  2. Good job, it took me some digging to find the front page stuff too. The Codex is a great resource, but it would be scary to most WP users. Getting the flickr id is annoying, I made the idGettr for that (should really put a link from the plugin admin).

  3. Very nice right up, and thanks for the kind words and the link love. The reason I write the tutorials I do is to be able to wake up one day and see something as hot as this on the net.

    Keep it up.

  4. Thanks for taking the time to explain, Matt. I'm not a WordPress user (yet), but in the near future my site is going to get an overhaul that includes a WordPress backend. It's just too tedious for me to keep up my own custom CMS that runs the site now, as I'd rather be doing design and not programming.

    I'm definitely going to need some of the info in this post soon though, so props to you for saving me some searching later on.

  5. Trevor: I definitely agree in regards to the sucky RSS buttons. I originally wanted to make them really prominent, but they some how ended up small and some what out of place.

    dave: idGettr is awesome! For sure, would be a good idea to link to it from the admin… also from your flickrRSS page. I was digging through your comments hoping to find an answer as well.

    Chris: Awesome! Thank you! I can honestly say I've referred to your tutorials on several occasions and really appreciate the work you put into them.

    Patrick: That's great! I'm glad this might be useful for you. One of the main reasons for exposing my 'secrets' is to show that they're not secrets at all. I really haven't done anything spectacular here and for the most part, I'm simply using the default WordPress functions. It is indeed, a great tool and I'd be stoked if I helped convince people to convert to WordPress.

    BTW, I got your Old School Batton and have been looking around for a good photo to use. Will post it soon, thanks!

  6. Thanks for that matt, was good to get some insight on what happens. Though i won't be able to use any of it, since i use MovableType :P but i've gotten used to the crazy template system they used, i have used WP in the past for other projects and probably will if they don't want to pay any money for it.

    NOW FOR THE CSS PART!! GOGOGO!

  7. Nice review so far. I had fun with WordPress templates for <a>CSS Lounge, although it's not as complicated as this, it's pretty easy to build up stuff very quickly. I'd recommend WordPress for sure. It's amazing how many completely different WP powered sites are out there, not just the normal basic blog style either.

  8. Yes! WordPress rules!

    Thanks for sharing this information, it's going to be useful to a lot of people. I read it and kept thinking, "that's what I do, yep, yep, and that too." home.php is the icing on the wordpress cake, and the ability to mix hand coded markup, wordpress content, and plugin content is totally awesome, I don't know how I ever would have been able to build complex sites without wordpress.

  9. Pingback: ZachKollegger.com v2.0 : Zach Kollegger

  10. Pingback: twe4ked studios » Blog Archive » I have re-designed again

Sorry, Comments Are Closed

Comments are automatically closed on posts older than 365 days. If you have something you'd like to contribute, feel free to hit me up on Twitter.