My redesign: the homepage

Quite a few people have been e-mailing me how I managed to get my homepage design done in WordPress, especially with the different featured blocks. So, since this site is all about sharing, let me show you!

This is all done in the index.php file of my theme. The first block, the intro, is just hard coded into the theme. If this were a site for a client, I'd have made that into a page so he could edit it, but this is faster, and I can edit that page just as fast, so I hardcoded it.

The next part of the homepage is the list of recent blog posts. Since this is the index.php, the 10 most recent posts are already loaded. I only need 8 of those though, so I made a slight adjustment to the loop. Other than that, it's pretty basic code for this part, although you'll see that my cool date blocks are completely accessible, I'll do a post on that later this week. Here's the code for this block:

<?php
	$i = 1;
	while (have_posts() && $i < 9) : the_post();
?>
	<li>
		<h3>
		  <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
		</h3>
		<p class="date month<?php the_time('n'); ?>">
			<?php the_time('j'); ?>
		</p>
		<p class="info">Tags: <?php the_tags('',', ') ?></p>
	</li>
<?php
	$i++;
	endwhile;
?>

The next block is the featured WordPress plugin, I won't bore you with the same display code again, but I use this query:

$featured_plugin = $wpdb->get_var( "SELECT ID FROM $wpdb->posts WHERE
post_type = 'page' AND post_password = '' AND post_status =
'publish' AND post_parent = 264 ORDER BY RAND() LIMIT 1");

After which I do:

$post = &get_post($featured_plugin);
$link = get_permalink($featured_plugin);

To get all the post details, now you can simply use $post->post_title etc. If you look at the query above, I select a plugin by randomly selecting one of the daughter pages of page 264, which is my WordPress Plugins page. For the sake of completeness, here's the code I use to display that block:

echo "<h3><a href=\"".$link."\">".$post->post_title."</a></h3>";
echo "<p>".trim(substr(strip_tags($post->post_content),0,200))." [...]</p>";
echo '<p class="more"><a rel="nofollow" href="'.$link.'">Learn more</a></p>';

For the Featured SEO Tool block I basically do the same, but with a different parent page. For the featured post section, I did it a little bit differently, but since that solution isn't the cleanest yet, I'm not going to give it to you yet...

Next is the ad bar, which is a widget I wrote specifically for myself and the "standard" tags widget

The footer, after that, consists of 3 different sidebars, only available on the homepage and the blog page. They're created by this relatively simple code:

<?php if (is_home() || is_page('blog')) { ?>
	<div id="secondary">
		<div class="col first">
			<?php dynamic_sidebar('Secondary 1');  ?>
		</div>
		<div class="col">
			<?php dynamic_sidebar('Secondary 2');  ?>
		</div>
		<div class="col">
			<?php dynamic_sidebar('Secondary 3');  ?>
		</div>
	</div>
<?php } ?>

I can then easily adjust the contents of those sidebars with widgets in the theme's widget menu.

Please be aware that building up your homepage like this is quite database intensive, and when your site get's a lot of traffic you'll need a good hosting platform to keep it running. However, my MediaTemple GridServer with Lite MySQL container have been handling the traffic wonderfully.

Have any questions? Remarks? Let me know in the comments!