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!

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

12 Responses

  1. Bruce SinnerBy Bruce Sinner on 17 June, 2008

    Yes, I have another question for ya:
    About that Breadcrumb over the top of your site, is that a Plugin ???
    thanks!

  2. Devon YoungBy Devon Young on 17 June, 2008

    Nice technique. Do you find using a lot of plugins and widgets slows down the site significantly more than if you coded some of those same features into the theme directly?

  3. Joost de ValkBy Joost de Valk on 18 June, 2008

    @Bruce Sinner: that’s another post, coming somewhere this week :)

    @Devon: well… No, I prefer widgets, the overhead is small, and the flexibility is pretty big… You can always use wp-super-cache if there’s too many db action.

  4. connectorBy connector on 18 June, 2008

    Within a couple of weeks I have to build a wordpress website for a client of mine.
    The homepage wil contain some dynamic blocks, for example a recipe of the day and offer of the day.
    The easiest way would be to build a page and show this in a block, identical as your example.
    But with a lot of pages and blocks, it isn’t very clear for the customer to maintain the pages and blocks in one overview.

    Wouldn’t it be nicer to have some kind of blocks plugin? I have searchd for it, but it seems that there is not such plugin available. The solution I’m thinking of now, but I haven’t tested out yet. Is to use the plugin called ad-minister, which originally is used for maintaining adds on your website. By defining some adds sections in your template, you can build adds and place them in those sections. It would be nice if you can edit an add with the wysiwyg editor of wordpress to markup the code.

  5. Hip HopBy Hip Hop on 18 June, 2008

    Thanks. Very useful. I will try this modification with new version of my blog.

  6. Gustavo LeigBy Gustavo Leig on 19 June, 2008

    Nice! always sharing knowledge!

    what about doing a loop here (your code without the LIMIT clause):

    $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() ");

    how it would work out to get the title and permalink for each page in loop?

  7. ValerieBy Valerie on 19 June, 2008

    I LOVE your new look! It’s clean, organized and balanced.

    Thank you for Sociable!

    Val

  8. ChristianBy Christian on 20 June, 2008

    I really like your new design. Keep up the great work & articles. I love reading your blog!

  9. SkyBy Sky on 23 June, 2008

    Nice, thanks

  10. AaronBy Aaron on 30 June, 2008

    Attractive homepage. I especially like the header area with the nice page intro. Thinking about adding something similar to mine.

  11. JonBy Jon on 25 July, 2008

    Hi Joost

    Just wondering if you could comment on your experience with Media Temple? I’m looking at hosting options and have read mixed reviews of MT’s services

    Thanks, Jon