How to Create a Typography-based WordPress Theme – Part 2: Coding in HTML

  • 18 Read Time(minutes)
  • 2/5 Difficulty
  • <> Application

Hey guys, and welcome to Part 2 of my latest tutorial series, How to Create a Typography-based WordPress Theme. In this part, we’ll be learning how to convert a PSD to a working HTML webpage. We are going to use the latest HTML5 and CSS3 technologies. I don’t think I can say anything else here, so, I’d say let’s jump right in!

Preparations

The very first step when creating a HTML version of a website would be to slice the PSD. This means we would have to cut out all the images from the original web design and save them as appropriate image files. In our case, however, there are no images that need to be exported, so we can jump right in to the coding process. Open up your favorite text editor; I’ll be using Sublime Text 2 during this tutorial. Create two new files, and save them as the following.

  • index.html
  • style.css

In case you’re using a text editor that can’t recognize the file type from the extension, implicitly set HTML and CSS appropriately for proper color-coding.

The HTML

Step 1 – Skeleton

HTML files consist of a Doctype declaration followed by a <head> and a <body> section. Let’s create the basic skeleton to start with.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Step 2 – Adding the <head> contents

The header of an HTML file contains all necessary information for our webpage to work properly. This includes title, charset, stylesheet links and other meta declarations.

  • The title of the website goes between <title> tags. This will be shown on the tab of your browser.
  • Let’s also define the charset so that browsers will know what characters to implement if you’re using ‘exotic’ ones. The UTF-8 character set is a proper standard to use.
  • We’ll be styling this HTML with CSS later on, so let’s add the reference to the CSS file that we’ve just created.
  • Furthermore, we used the typeface Lato in the web design process. We need to grab that one from the Google Web Fonts library, since it is not a default font on any machine.

According to the above terms, let’s add the following code between the <head> tags.

  <meta charset="UTF-8">
  <title>Typowonder HTML</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,900,300italic,400italic">

Note the stylesheet reference for the Lato typeface — I’m only adding the variations that we’re going to use in this design to reduce page load.

Step 3 – Adding a wrapper

Our design has a fixed width, and for the sake of ease (and less CSS code later) let’s wrap the whole content in a division. We’ll add a fixed width and center it later.

<div class="wrapper">
</div>

Step 4 – Creating the Header

Let’s start off with the real content by defining the Header elements. If you take a look at the original design, the header contains the text-based logo and the main navigation. Let’s define them in HTML inside the wrapper div.

<header>
  <h1>Typowonder</h1>
  <nav>
    <ul>
      <li><a href="#">Articles</a></li>
      <li><a href="#">Freebies</a></li>
      <li><a href="#">Inspiration</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

The <h1> holds the most important heading on the page, which in our case is the title. The <nav> element is a new tag in HTML5 (alongside with <header>), which adds semantic value to your site.

typowonder-html-01

Step 5 – Adding a blog post

Now comes the real deal. We’re going to add the markup of a blog post — at least the index page version. We will wrap this first article (along with all other blog posts) inside a <section> tag.

  • First we’ll output the categories assigned to the blog post. Let’s use a <span> tag to wrap the categories. I’m also adding a CSS class to it: categories.
  • Then, we’ll add the title of the article. Going down the importancy line, we’ll use <h2> tags for all post titles. We also need to add an anchor tag inside the <h2>.
  • After the title comes the author declaration. Again, we can use a <span> tag with a class of author.
  • We’ll continue with the excerpt, meaning the first few lines of the article. Let’s wrap these paragraphs in a <div> with a class of entry. (WordPress theme devs smiling now…) In the original design we had two paragraphs as the excerpt, let’s act according to that and add 2 paragraphs inside the entry.
  • And finally, we need the Read More button. It can be a simple anchor tag with a (yet) empty href attribute. Give it a class, like readmore.

To sum up everything above, here is the code that implements everything we’ve just went through.

<section>
  <article>
    <span class="categories">Tutorials, Photoshop</span>
    <h2><a href="#">How to Create a Typography-Based Website Design in Adobe Photoshop</a></h2>
    <span class="author">by Szaboka</span>
    <div class="entry">
      <p>
        Cupcake ipsum dolor sit amet. Chocolate cake danish cupcake sweet. I love macaroon for brownie chocolate bar. Faworki lemon drops gummi bears. Bonbon I love tootsie rolls macaroon donut lollipop ice cream tootsie rolls. Bear claw halvah fruitcake gummies halvah chupa chups macaroon cupcake marshmallow chocolate.
      </p>
      <p>
        Jujubes I love tootsie roll jujubes icing sweet roll candy marzipan bar. Halvah candy canes liquorice chocolate jujubes ice cream halvah carrot cake. Danish muffin tart chupa chups. I love pudding sweet donut. Ice cream powder cake.
      </p>
    </div>
    <a class="readmore" href="#">Read More &raquo;</a>
  </article>
</section>
typowonder-html-02

Step 6 – Duplicating and Paginating

Now we have one article ready, it’s time to copy the code of the first article and duplicate it, therefore making two. Make sure to edit the category, title, author and excerpt contents to something else. If you’ve done everything properly, you should have two articles inside the section tag.

Let’s add the pagination that appear on the bottom of the index, archive and search result pages (This sentence will become more clear when we dive into WordPress theme development). We’ll keep it simple by using WordPress’ default older posts and newer posts links.

Believe it or not, semantically it is a list, so let’s quickly wrap up an unordered list for them. Give this list a class of pagination to make sure.

<ul class="pagination">
  <li><a href="#">&laquo; Older posts</a></li>
  <li><a href="#">Newer posts &raquo;</a></li>
</ul>
typowonder-html-04

Step 7 – Creating the sidebar

All right, our content is in place, let’s add the sidebar and the widgets inside it. For the sidebar itself, we’ll use HTML5’s new tag, <aside>. This adds semantic value and helps search engines decide whether the information inside is important or not.

<aside>
</aside>

Inside the aside tags, let’s create two types of widgets, a wide one and a narrow one. They are going to have the same styling, only the wide one will take up all the horizontal space available. Let’s break it down.

  • The widgets will be contained in <div>‘s with classes of widget.
  • The widgets’ titles will be <h5> tags.
  • The text in the wide one will naturally be a <p> paragraph, and the list items in the narrow widgets will be <li>‘s inside <ul> unordered lists.

And how are we going to differentiate the two types of widgets? Simply, we’ll add another class to (let’s say) the narrow ones. Like this.

You can add multiple classes to an element in HTML, simply by separating them with a space.

<div class="widget">
  <h5>About Typowonder</h5>
  <p>
    Typowonder is an experimental website design made exclusively of typographical elements. The design is a good example of being absolutely legible and easy-to-scan, even without using any imagery or graphical design elements.
  </p>
</div>
<div class="widget narrow">
  <h5>Members</h5>
  <ul>
    <li><a href="#">Site Admin</a></li>
    <li><a href="#">Log Out</a></li>
    <li><a href="#">Entries RSS</a></li>
    <li><a href="#">Comments RSS</a></li>
    <li><a href="#">WordPress.org</a></li>
  </ul>
</div>
<div class="widget narrow">
  <h5>Archives</h5>
  <ul>
    <li><a href="#">October 2012</a></li>
    <li><a href="#">September 2012</a></li>
    <li><a href="#">August 2012</a></li>
    <li><a href="#">July 2012</a></li>
    <li><a href="#">Earlier</a></li>
  </ul>
</div>

And that’s it for the sidebar.

typowonder-html-03

Step 8 – Adding the Footer

The footer in our case is a very simple line of disclaimer text. We’ll use the new <footer> tag of HTML5 for semantics and add the paragraph inside it.

<footer>
  <p>Proudly powered by WordPress - &copy; CopyLeft 2013 Lorem Ipsum LTD.</p>
</footer>

And that concludes the HTML part of this tutorial. Let’s now add the CSS styling to beautify our webpage.

The CSS

Step 1 – Reset

The first step related to CSS when designing a new website is to reset the browsers’ default styling. This is a crucial step in every web design project, as all the browsers have a somewhat different default stylesheet.

To reset our styles add the following code, which is based on Eric Meyer’s CSS Reset.

/* CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

After applying the reset styles, this is what we get. And this is perfectly what we need in order to give us maximum control over our styles!

typowonder-html-05

Step 2 – Basic body styling

Time to start the fun! The first thing we’ll do is add the background color, and set the default font styles to be rendered.

/* Custom Styles */
body {
  background-color: #EBEBEB;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  color: #666;
}

Simple, as that! We are setting 16px for the font-size, because the majority of the texts are going to be written at that size.

typowonder-html-06

Step 3 – Setting up the wrapper

Remember the <div class=”wrapper”> we added to the site in the HTML part? It will make more sense in a minute.

.wrapper {
  width: 960px;
  margin: 0 auto;
}

Step 4 – Styling the header

In this step, we’ll create the basic layout of the header. We’ll float the logo to the left and the navigation to the right. Since we’ll be floating all the elements, the parent div is going to ‘collapse’. To prevent this, we’ll add the line ‘overflow: hidden;‘ to the parent element.

header {
  overflow: hidden;
  height: 140px;
}
h1 {
  float: left;
  font-size: 30px;
  font-weight: 900;
  color: #262626;
  text-transform: uppercase;
  margin-top: 46px;
}
nav {
  float: right;
  margin-top: 55px;
}

Step 5 – Styling the navigation

Let’s see the styling of the individual list items and the anchor texts inside them.

  • We want the navigation list to be horizontal, so we’ll add display: inline; to the <li>‘s.
  • Notice the :last-of-type pseudo-class. It selects the last <li>, and removes the margin from it.
  • You can add the same styling for multiple elements by a comma-separated list, just like in the case of the nav ul li a‘s.
nav ul li {
  display: inline;
  margin-right: 35px;
}
nav ul li:last-of-type {
  margin: 0;
}
nav ul li a,
nav ul li a:visited {
  font-size: 14px;
  color: #A6A6A6;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}
nav ul li a:hover {
  color: #666;
}

We’ve even set a :hover state for the navigation elements which boosts user experience.

typowonder-html-07

Step 6 – Styling section and aside

Allright, let’s split those two! We need to set proper widths and floats.

section {
  float: left;
  width: 540px;
}
aside {
  float: right;
  width: 300px;
}

If you now refresh the page, you’ll quickly realize that something’s not good.

What is happening? Again, both <section> and <aside> are floated, plus they have quite some space between them, which means <footer> has found an empty horizontal space where it tries to fit.

The solution in this situation is to ‘clear’ the floats in the next block-level element, which is <footer> in our case.

footer {
  clear: both;
}

We will continue styling the footer when we get there. Looking a lot better, ain’t it?

typowonder-html-08

Step 7 – Styling the article 1.

Let’s see what styles we can apply to make the article look the way we want it to.

  • First off, the category. 12px, italic, all caps, #999 and some letter spacing. Simple.
  • Then, the post title. It’s much bigger, bolder and darker too, with a touch of negative letter-spacing this time. We also need to take care of the anchor color here.
  • Author line, no problem.
.categories {
  color: #999;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 2px;
  text-transform: uppercase;
}
h2 {
  color: #404040;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 5px 0 15px;
}
h2 a {
  color: #404040;
  text-decoration: none;
}
h2 a:hover {
  color: #666;
}
.author {
  color: #999;
  font-style: italic;
}

And there we have a beautiful header — just like inside the PSD.

typowonder-html-09

Step 8 – Styling the article 2.

Let’s continue styling the articles by beautifying the entry itself. We’ll touch up the line-height and margins a little, then Add styles for the Read More button, and we’re done.

.entry {
  margin: 30px 0;
}
.entry p {
  line-height: 1.5;
  margin-bottom: 10px;
}
.readmore,
.readmore:visited {
  color: #666;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}
.readmore:hover {
  color: #262626;
}

That’s it for the entries. One final step here, we need to add a margin-bottom to the article itself.

article {
  margin-bottom: 60px;
}
typowonder-html-10

Step 9 – Styling the pagination

According to the design, the older posts link is floated to the left, and the newer posts is floated to the right. We’ll do exactly the same in CSS. Remember to add overflow: hidden; to the parent element to avoid collapsing!

.pagination {
  overflow: hidden;
}
.pagination li a {
  color: #999;
  font-size: 20px;
  font-style: italic;
  text-decoration: none;
  text-transform: lowercase;
}
.pagination li a:hover {
  text-decoration: underline;
}
.pagination li:first-of-type {
  float: left;
}
.pagination li:last-of-type {
  float: right;
}

We could have done it easier by assigning classes to the two links but I didn’t want to make it complicated by going back to the HTML to re-edit it. It is a perfectly working solution, and you now know a little about these pseudo-classes.

typowonder-html-11

Step 10 – Styling the sidebar

This one’s short, instead of defining the color and the font size of the article texts numerous times later on, let’s do it now once for the whole aside. Note: float: right; and width: 300px; has already been set before!

aside {
  float: right;
  width: 300px;
  color: #A6A6A6;
  font-size: 14px;
}

Step 11 – Styling the widgets

And on to the widgets now. We need to add styles to the <h5>‘s, the paragraph in the About widget, and the lists in the other two. We’ll also define two different widths, as talked about earlier.

.widget {
  clear: both;
  margin-bottom: 55px;
}
.narrow {
  clear: none;
  width: 150px;
  float: left;
}

Note the clear’s. Since the narrow widgets are floated, we must clear the one coming after it. This syntax works in any cases to clear the floats.

h5 {
  color: #737373;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
}
aside p {
  line-height: 1.4;
}
aside ul li {
  margin-bottom: 10px;
}
aside ul li a,
aside ul li a:visited {
  color: #A6A6A6;
}
aside ul li a:hover {
  color: #666;
}

And that’s it for the aside.

typowonder-html-12

Step 12 – Styling the footer

Let’s finish it off by adding appropriate styles to the footer elements.

footer {
  clear: both;
  padding: 60px 0 30px;
}
footer p {
  color: #A6A6A6;
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 1px;
  text-transform: uppercase;
}

And boom, we’re done!

typowonder-html-13

The Final Result

Click here to go to the Live Demo, and see Typowonder in action!

typowonder-html-14

Afterword

Congratulations if you were coming with me this far. We’ve just created a typography-only website design using the semantics of HTML5 and the help of CSS.

In fact, we haven’t even written 100 lines of HTML, and just did over 200 lines of CSS.

I hope you liked this part of How to Create a Typography-based WordPress Theme. I’ll be seeing you soon with Part 3, where we’ll convert it into a Responsive Website.

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

One Response

Comments

  • Joona said on 2013.05.30. at 22:24 Reply

    This is really cool. I will follow up the whole series at some point for sure :)

Trackbacks

There are no trackbacks yet.

Join the Conversation

Captcha: + 4 = seven