HTML to WordPress Case Study

Following on from Monday’s introduction to WordPress theme design, today we’ll be looking at the recent DesignInformer redesign; how the HTML to WordPress process went with what was quite a classic blog look.

It all started when Jad sent me a Google Chat message asking if I’d help him with converting an HTML design to WordPress. I then ended up doing the whole theme. I still don’t know how that happened. Over the next couple of weeks, Jad then revisited the theme, doing it again himself — the best way of learning!

The first thing to do was to take the HTML and put it into header, index, sidebar and footer files. Here’s a badly made screenshot of which bits went where:

Nothing here is too taxing for WordPress to handle, but a couple of things pose a problem.

The header

As the design was only going to be used on DesignInformer, there was no need to make the navigation dynamic. The same applied to the logo, RSS and Twitter buttons, so nothing really to do here!

The index

I’m using the index and not the home file here as we’re creating something that can be used as a fallback. A closer look at the post area reveals it’s quite complex. WordPress brain in gear, these were what I thought I’d do (another poorly made graphic!):

Looking at the CSS though, we hit a problem. Quite a few problems actually. First is that the excerpt is a paragraph with a class. the_excerpt outputs plain <p>s. An ingenious solution is at hand though: the_excerpt_rss doesn’t have any wrapping <p>s so we can apply our own styling:

<p class="excerpt"><?php the_excerpt_rss(); ?></p>

The next problem is the ‘Continue Reading’ section. That too has a class so we can’t just use the read more that comes with the_excerpt. Instead, we can use <?php the_permalink(); ?> and wrap the continue reading <p class> around that:

<p class="read-more"><a href="<?php the_permalink(); ?>">Continue Reading</a></p>

I then found out that Jad wanted backwards comparability with his old posts which were using custom fields, not the post_thumbnail function. The solution was to use Justin Tadlock’s get_the_image plugin, albeit customised a bit.

The sidebar

Badly made graphic number one is actually quite heavily cropped so you don’t see the ‘Popular Posts’ section of the sidebar. For this, we followed my own advice to get most commented posts the right way:

<ul>
<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
	<?php while ($popular->have_posts()) : $popular->the_post(); ?>	

	<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?> (<?php comments_number('0','1','%'); ?>)</a></li>

<?php endwhile; ?>
</ul>

The rest of the sidebar is filled with ads and a latest tweets section which I left Jad to do via a plugin.

The footer

I largely left the footer as is — the Categories section was better left hardcoded as we didn’t want all of the categories, the friends list can be easily edited manually and the bottom of the footer is static too. That leaves the recommended reading section. A custom query is in order. We want two posts from the category with an ID of 164, so use the following code:

<ul>
<?php $reading = new WP_Query('cat=164&posts_per_page=2'); ?>

	<?php while ($reading ->have_posts()) : $reading ->the_post(); ?>	

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?> (<?php comments_number('0','1','%'); ?>)</a>

<?php the_content(); ?>

<?php endwhile; ?>
</ul>

We can use the_content as the whole post is being displayed – they’re only short!

Lessons learnt

The major lesson learnt here is that knowing your template tags can get you out of a lot of holes! Not knowing the_excerpt_rss could be used to get our p class could have meant you’d added in an extra div in an attempt to sort it out when you needn’t have done! Hopefully this case study will have helped you see in a real example how converting HTML to WordPress is easy!