Skip to content

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:

<?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; ?>

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

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:

<?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; ?>

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!

Yay! 🎉 You made it to the end of the article!
Alex Denning

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
December 2, 2010 6:31 pm

Alex, Thanks for this article. I know at least a couple of marketers that want to convert their HTML sites to WordPress and will direct them to here. It doesn’t look simple, but I bet their tech guys will get help from this example.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...