How to Create a Minimalist and Typographic Blog Layout From Scratch

Posted in Tutorials, Web Interface • Posted on 41 Comments

Typography is probably one the most important and powerful design element ever, so I created this WordPress theme with minimalism and typography in mind. Today, you will learn how to create this minimalist theme scratch including XHTML, CSS and WordPress. Please keep in mind that this theme doesn’t have all the bells and whistles you may find in a magazine or premium theme, it was created for the purpose of this tutorial. You can of course use it as a starting point for your own theme or customize it to fit your site. Let’s get started!

The Plan

There are some basic design decisions I made when I created this theme. First of all, I wanted to have a centered layout with a main content area of around 600px and a sidebar of around 300px on the right, so I went with a 960px total width. This type of layout is pretty common, but it’ll be perfect for this tutorial. I also wanted to create a WordPress theme that would have strong typography and not use any images, not even as background images. Here it is, you can view the demo right here!

lead image

What We’ll Need

Before we start writing any markup or CSS, let’s see what files we will need. Here is the basic layout below:

wireframing

We will need the following files:

  • index.php – This file will hold everything together, it is our main index file
  • header.php – in this file we’ll have the blog title and navigation menu, it’ll be included at the top of every page
  • single.php – this is to display a single blog post, similar to the index.php except it has only 1 post and has a comment section
  • page.php – this file is for the pages (which are linked to from the navigation menu)
  • comments.php – this is the comment section, this file is included in the single.php
  • sidebar.php – this file is for the sidebar on the right. it will be included on every page
  • footer.php – obviously the footer will go at the bottom of every page
  • archive.php – this is the monthly and yearly archives template
  • search.php – this is the template for the search results page
  • functions.php – we’ll use this file to make our sidebar ‘widget ready’
  • style.css – this is our stylesheet, we’ll write all of our CSS in here

You don’t need to create all of those files right away (though you can of course), we’ll get there very soon.

The Structure Of Our Main Document

When creating a new WordPress theme I always start with the homepage since all the other pages will be very similar. Let’s write some markup! First of all, we’ll need to declare a DOCTYPE, then insert the WordPress template tags for the title using conditional tags (I’ll explain that in a minute), and the link to our stylesheet, and set default rss feed url and then we’ll place the pingback tag and the wp_head tag. Then we’ll create our header div and write the code for our H1 and H2 tags and create an unordered list for our navigation menu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title>
 <?php if ( is_home() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php bloginfo('description'); ?><?php } ?>
 <?php if ( is_search() ) { ?>Search Results: <?php the_search_query(); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
 <?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Author Archives<?php } ?>
 <?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
 <?php if ( is_page() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
 <?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Archive&nbsp;|&nbsp;<?php single_cat_title(); ?><?php } ?>
 <?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Archive&nbsp;|&nbsp;<?php the_time('F'); ?><?php } ?>
 <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;Tag Archive&nbsp;|&nbsp;<?php  single_tag_title("", true); } } ?>
</title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feed/" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>
</head>
<body>
<div id="header">
 <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
 <h2><?php bloginfo('description'); ?></h2>

 <ul>
 <li><a <?php if (is_home()) echo('class="current" '); ?>href="<?php bloginfo('url'); ?>">Home</a></li>
 <?php wp_list_pages('depth=1&title_li='); ?>
 <li><a href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>
 </ul>
</div>

The php if statements in the title section of the above code will tell WordPress to display a different page title depending on what page the user is on. For example, the code above says: if I’m on the homepage then display the blog name and description. If I’m on the search results page display the search query terms as the page title followed by the blog name. And so on… those conditional tags basically tell WordPress to do something only if a condition is met, and if it isn’t, display something else. When we’re done with the header section we’ll go and write the markup for our main content area, sidebar and footer. We’ll start with a container div which will hold all of our main content and sidebar, then the post div will hold our content area and then the sidebar div will contain all of our sidebar. Of course the footer div will hold our copyright notice and credits.


<div id="container">
<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
<div>
<div>
<div><?php the_time ('j'); ?></div>
<div><?php the_time ('M'); ?></div>
</div>

<div>Posted by <?php the_author(); ?> &#187; <a href="<?php the_permalink() ?>#comments"><?php comments_number('Add Comment &#187;','1 Comment &#187;','% Comments &#187;'); ?></a></div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content("[Read more &rarr;]"); ?>
</div>

<div>
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar()) : else : ?>
<a href="<?php bloginfo('rss2_url'); ?>">Grab The RSS Feed Here</a>
<?php endif; ?>
</ul>
</div>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
<div style="clear:both;"></div>
<div><?php posts_nav_link(); ?></div>
</div>

<div id="footer">
<p><?php bloginfo('name'); ?> is powered by <a href="http://wordpress.org/">WordPress</a> - Design and code by <a href="http://spyrestudios.com/">Jon Phillips</a> and <a href="http://www.cartridgesave.co.uk/news/">Creative Cloud</a></p>
</div>

</body>
</html>

Now, before we put all that code in one of our PHP files, we’ll need to break it down into sections and use PHP includes. The index.php, since it’s our main file, will hold the header.php, sidebar.php and footer.php. WordPress already has template tags to do that so we won’t need to use ‘real’ PHP includes and we’ll use the WP template tags instead. First of all we’ll need to create the following files:

  • header.php
  • index.php
  • sidebar.php
  • footer.php

Let’s grab all of the code for the header section and paste it in our header.php. That’s from the DOCTYPE to right before the body tag (see code for the header section above) Then we’ll grab the code for our sidebar. This is simply our sidebar div, you can refer to the code snippets above to copy-paste it. Paste this code in the sidebar.php file. Next up we’ll do the footer. The footer.php file will include the footer div and the closing body and html tags. Now we should have code in our header.php, sidebar.php and footer.php files. All we need to do now is paste the rest of the code in the index.php, but don’t forget we’ll need to tell the index.php file to look for our 3 other files. Have a look at the code below:


<<?php get_header(); ?>
<div id="container">
 <?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
 <div>
 <div>
 <div><?php the_time ('j'); ?></div>
 <div><?php the_time ('M'); ?></div>
 </div>
 <div>Posted by <?php the_author(); ?> &#187; <a href="<?php the_permalink() ?>#comments"><?php comments_number('Add Comment &#187;','1 Comment &#187;','% Comments &#187;'); ?></a></div>
 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content("[Read more &rarr;]"); ?>
 </div>
 <?php get_sidebar(); ?>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
<div style="clear:both;"></div>
<div><?php posts_nav_link(); ?></div>
</div>
<?php get_footer() ?>

It looks very similar to what we had before, right? Only this time, we stripped our document from the header, sidebar and footer sections and put those in separate files. We need to include those 3 files in our index.php. To do that we use the 3 following template tags (they’re pretty much the same as PHP includes):


<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer() ?>

It’s pretty obvious what these code snippets do, don’t you think? The get_header one will insert our header.php file in the index.php, and get_sidebar and get_footer will do the same but for the sidebar.php and footer.php. Now we have a somewhat functional WordPress theme. We’re not done yet though! We need to create our other PHP files and then start writing our CSS.

Other WordPress Theme Files

We have a homepage, but what about the single posts, the pages, the archives, search results, etc…? Let’s create the following files now:

  • page.php
  • archive.php
  • search.php
  • single.php

Those files are very similar to our index.php, in fact we’ll use our index.php as a base for those 4 other files. Grab your index file and duplicate it 4 times and then rename the files to the file names above. Open up the page.php (which is identical to the index.php right now) and edit it to remove the date, author name, comments number and post nav. We won’t need those since pages are more static than posts and index pages.

<?php get_header(); ?>
<div id="container">
 <?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>
 <div>
 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content("[Read more &rarr;]"); ?>

 </div>
 <?php get_sidebar(); ?>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
<?php get_footer() ?>

For the archive and search results pages, we’ll take the index.php as a starting point since they’re very similar. For the archive.php file all we’ll need to do is add a message that tells the users what archive page they’re on. Look for:

<?php if(have_posts()): ?><?php while(have_posts()):the_post(); ?>

And replace it with:

<?php if (have_posts()) : ?>

 <?php $post = $posts[0]; ?>
 <?php if (is_category()) { ?>
 <h4>Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h4>
 <?php } elseif( is_tag() ) { ?>
 <h4>Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h4>
 <?php } elseif (is_day()) { ?>
 <h4>Archives for <?php the_time('F jS, Y'); ?></h4>
 <?php } elseif (is_month()) { ?>
 <h4>Archives for <?php the_time('F, Y'); ?></h4>
 <?php } elseif (is_year()) { ?>
 <h4>Archives for <?php the_time('Y'); ?></h4>
 <?php } elseif (is_author()) { ?>
 <h4><?php _e('[:en]Author Archive[:fr]Archive Par Auteur'); ?></h4>
 <?php } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
 <h4>Blog Archives</h4>
 <?php } ?>

<?php while (have_posts()) : the_post(); ?>

This will tell WordPress to display a slightly different message depending on what page the user is on. For the search.php file we’ll do almost the same thing. Open up your search.php file and place this code instead:

<h4>Here&#39;s everything we could find about: "<em><?php the_search_query(); ?></em>"</h4>
 <?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

As for the single.php file, the big difference is we'll need to include our comment section. Let's add it right after the the_content tag, like this:

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
 <?php the_content("[Read more &rarr;]"); ?>
 <div>
 <?php comments_template(); ?>
 </div>

Now we’ll need to create our comment section. On to the next step!

The Comment Section

comment

The comments.php file is a bit more complex then the other files we did so far. Here is the complete code:

<?php
 if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
 die ('Please do not load this page directly. Thanks!');
 if (!empty($post->post_password)) {
 if ($_COOKIE['wp-postpass_'.$cookiehash] != $post->post_password) {
 ?>
 <p><?php _e("This post is password protected. Enter the password to view comments."); ?><p>
 <?php
 return;
 }
 }
 $oddcomment = "alt";
?>
<!-- You can start editing here. -->
<h3>There's <em><?php comments_number('0 Comment','1 Comment','% Comments'); ?></em> So Far</h3>

<a name="comments"></a>
<?php if ($comments) : ?>

<ul>
 <?php foreach ($comments as $comment) : ?>
 <?php $comment_type = get_comment_type(); ?>
 <?php if($comment_type == 'comment') { ?>
 <li id="comment-<?php comment_ID() ?>"><a name="comment-<?php comment_ID() ?>"></a>

 <span><?php comment_author_link() ?></span><br/>
 <span><?php comment_date('F jS, Y') ?> at <?php comment_time() ?></span>
 <div>
 <?php comment_text() ?>
 </div>
 </li>
 <?php /* Changes every other comment to a different class */
 if ('alt' == $oddcomment) $oddcomment = '';
 else $oddcomment = 'alt';
 ?>
 <?php } else { $trackback = true; } /* End of is_comment statement */ ?>
 <?php endforeach; /* end for each comment */ ?>
</ul>
<?php if ($trackback == true) { ?>
<h3>Who Linked To This Post?</h3>
<ol>
 <?php foreach ($comments as $comment) : ?>
 <?php $comment_type = get_comment_type(); ?>
 <?php if($comment_type != 'comment') { ?>
 <li><?php comment_author_link() ?></li>
 <?php } ?>
 <?php endforeach; ?>
</ol>
<?php } ?>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post-> comment_status) : ?>
 <!-- If comments are open, but there are no comments. -->
 <?php else : // comments are closed ?>
 <!-- If comments are closed. -->
 <p>Comments are closed on this post.</p>
 <?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post-> comment_status) : ?>

<h3>Share your thoughts&#44; leave a comment&#33;</h3>

<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="comment_form">

<?php if ( $user_ID ) : ?>

 <p>You are currently logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account"">Logout &raquo;</a></p>
 <?php else : ?>

 <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" /><label for="author">Name (required)</label></p>
 <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" /><label for="email">Email (required)</label></p>
 <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /><label for="url">Website URL</label></p>

<?php endif; ?>
<p><textarea name="comment" id="comment" rows="8" cols="10" tabindex="4"></textarea></p>
 <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />    </p>
</form>
<?php // if you delete this the sky will fall on your head
endif; ?>

What you need to know is that the comments and trackbacks are not going to be mixed and the we’re not using gravatars (remember, no images for this theme).

Let’s Widgetize The Sidebar

To make the sidebar ‘widget ready’ we’ll need to create a function.php file. You can create this file now. To tell WordPress that we want to use widgets in our sidebar we’ll put this code:

<?php
if ( function_exists('register_sidebar') )
 register_sidebar();?>

Let’s Not Forget About Our 404 Page

Last but not least, we need to create a 404.php for when people try to access something that isn’t available. We don’t want them to see a default server message or a blank page, do we? Paste the following code in your new 404.php file:

<?php get_header(); ?>
 <div id="container">
 <div>
 <h2>Oops&#133; 404&#133; </h2>
 <p>It looks like you tried to access a page that isn't here anymore. It's either you that did something wrong, or it's us. Either way, let's not waste any more time on this page since there's nothing more to see here.</p>
 </div>
 </div>
<?php get_sidebar(); ?>
</div>
<?php get_footer() ?>

On To The Fun Part – CSS

Now we should have a fully functional WordPress theme. The only problem is that it’s really ugly. To fix this we’ll create a style.css. Remember that we linked to this file in our header.php. At the very top of our style.css file we’ll define the theme name, author, url, version and additional infos.

/******
Theme Name: Simple Type
Version: v.1
Description: Clean and simple WordPress theme, easily customizable, CSS Valid with a focus on typography.
Author: Jon Phillips
Author URI: http://spyrestudios.com
Theme URI: http://1stwebdesigner.com
*****/

Now we can start writing our CSS. I already gave classes and ids to our divs, paragraphs and other elements. Here is the CSS in it’s entirety:

html {
 border-top: 4px solid #000000;;
 margin:0;
 padding:0;
}

body {
 background: #ffffff;
 width: 960px;
 color:#333;
 line-height: 24px;
 font-size: 16px;
 font-family: Georgia, 'Times New Roman', Times, serif;
 margin: 0 auto;
 padding: 15px 0;
}

#container {
 width: 960px;
 margin: 0;
 padding: 0 0 40px 0;
}

a {
 text-decoration: underline;
 color: #000000;
}

a:visited {
 text-decoration: underline;
 color: #555555;
}

a:hover, a:active {
 color: #1C1D16;
 text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
 font-weight: normal;
 margin: 5px 0 10px;
 padding: 0;
 line-height: 1.8em;
}

#container h4.archives{
 font-weight: normal;
 margin: 0 0 10px 0;
 padding: 0 15px 15px 15px;
 background: #eeeeee;
 border: 1px solid #cccccc;
 width: 928px;
}

ul, ol {
 color: #555555;
 margin: 12px;
 padding: 8px;
}

blockquote, pre {
 font-style: italic;
 font-size: 14px;
 background-color: #eeeeee;
 border-right: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 padding: 20px;
 line-height: 20px;
 margin: 10px 25px;
}

ins {
 text-decoration: none;
 font-weight: bold;
 color: #555555;
}

del {
 color: #555555;
}

abbr, acronym {
 cursor: help;
}

p img {
 padding: 0;
 max-width: 100%;
}

img.centered {
 display: block;
 margin-left: auto;
 margin-right: auto;
}

img.alignright {
 padding: 5px;
 margin: 0 0 15px 15px;
 display: inline;
}

img.alignleft {
 padding: 5px;
 margin: 0 15px 15px 0;
 display: inline;
}

.alignright {
 float: right;
}

.alignleft {
 float: left;
}

/**--Header--**/

#header {
 width: 960px;
 margin: 15px 0 10px;
 padding: 0;
}

#header h1 {
 text-transform: uppercase;
 margin: 0;
 font-size: 48px;
 font-weight: 400;
 color: #000000;
 padding: 15px 0 0 0;
 line-height: 50px;
}

#header h1 a {
 color: #000000;
 text-decoration:none;
}

#header h1 a:hover {
 color: #676767;
 text-decoration:none;
}

#header h1 a:visited {
 color: #21211f;
 text-decoration:none;
}

#header h2 {
 font-style: italic;
 font-family: baskerville, palatino, 'times new roman', georgia, serif;
 font-size: 18px;
 padding: 2px 0 20px 0;
 margin: 0;
 color: #888888;
}

/**--Content--**/

.post {
 width: 600px;
 float: left;
 padding: 0;
 margin: 0 0 40px 0;
 border-bottom: 1px dashed #cccccc;
}

.post a {
 text-decoration: none;
 color: #000000;
 border-bottom: 1px solid #f60;
}

.post a:visited {
 background: #eeeeee;
 text-decoration: none;
 color: #555555;
 border-bottom: 1px solid #dddddd;
}

.post a:hover {
 background: #eeeeee;
 color: #333333;
 text-decoration: none;
 border-bottom: 1px solid #000;
}

.post a:active {
 background: #cccccc;
 color: #1C1D16;
 text-decoration: none;
 border-bottom: 1px solid #f60;
}

.post h2 {
 font-size: 38px;
 font-weight: 500;
 line-height: 48px;
 padding: 5px 0 15px 0;
 margin: 0;
}

.post h2 a {
 background: none;
 border: none;
 text-decoration: none;
 color: #000000;
}

.post h2 a:hover {
 background: none;
 border: none;
 text-decoration: none;
 color: #444444;
}

.post h2 a:visited:hover {
 background: none;
 border: none;
 text-decoration: none;
 color: #555555;
}

.post h2 a:visited {
 background: none;
 border: none;
 text-decoration: none;
 color: #222222;
}

.post img.left {
 padding: 6px;
 margin: 10px 10px 10px 0;
 border: none;
 float: left;
 clear: left;
}

.post img.right {
 padding: 6px;
 margin: 10px 0 10px 10px;
 border: none;
 float: right;
 clear: right;
}

.post img.center {
 display: block;
 padding: 8px;
 margin: 0 auto 10px auto;
 border: none;
 float: none;
 clear: both;
}

.post img.frame {
 padding: 6px;
 margin: 10px 0 10px 10px;
 border: 1px solid #CCC;
 background: #EEE;
 float: right;
 clear: right;
}

.post img.stack {
 clear: none !important;
}

.postinfo {
 text-transform: uppercase;
 font-family: verdana, helvetica, arial, sans-serif;
 color: #cccccc;
 font-size: 13px;
 letter-spacing: -1px;
 margin:0;
 padding: 0;
}

.postinfo a, .postinfo a:visited{
 border: none;
 text-decoration: none;
 text-transform: uppercase;
 font-family: verdana, helvetica, arial, sans-serif;
 color: #cccccc;
 font-size: 13px;
 margin:0;
 padding: 0;
}

.postinfo a:hover, .postinfo a:visited:hover{
 text-decoration: none;
 border: none;
 text-transform: uppercase;
 font-family: verdana, helvetica, arial, sans-serif;
 color: #aaaaaa;
 font-size: 13px;
 margin:0;
 padding: 0;
}

.date_cal {
 text-align:center;
 float: left;
 font-family: georgia, serif;
 color: #dddddd;
 font-size: 20px;
 margin:0;
 padding: 10px 20px 3px 0;
}

.date {
 font-family:georgia, serif;
 font-weight:700;
 color:#dddddd;
 font-size: 50px;
 margin:0;
 padding:0 0 3px 0;
}

.month {
 font-style: italic;
 font-family:georgia, serif;
 color:#dddddd;
 font-size: 28px;
 margin:0;
 padding:0;
}

/**--Navigation--**/

ul.menu{
 clear: both;
 text-decoration: none;
 float: left;
 width: 940px;
 font-family: Verdana, Helvetica, Arial, Sans-Serif;
 background: #000000;
 padding: 10px;
 margin: 0 0 40px 0;
}

ul.menu li {
 display: inline;
 text-transform: uppercase;
 padding: 10px;
 margin: 0;
 font-size: 13px;
}

ul.menu li a, ul.menu li a:visited {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #cccccc;
 font-size: 13px;
}

ul.menu li a:hover, ul.menu li a:visited:hover {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #f60;
 font-size: 13px;
}

ul.menu li a:active {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #ffffff;
 font-size: 13px;
}

ul.menu li a:visited:active {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #ffffff;
 font-size: 13px;
}

ul.menu li.current_page_item a {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #ffffff;
 border-bottom: 1px solid #f60;
 font-size: 13px;
}

ul.menu li.current_page_item a:hover {
 text-decoration: none;
 padding: 0;
 margin: 0;
 color: #cccccc;
 border-bottom: 1px solid #f60;
 font-size: 13px;
}

/**--Sidebar--**/

.sidebar {
 float: right;
 font-size: 13px;
 width: 300px;
 margin: 0;
 padding: 0 0 0 60px;
}

.sidebar h2 {
 font-size: 14px;
 font-weight: 500;
 font-family: verdana, helvetica, arial, sans-serif;
 letter-spacing: -1px;
 text-transform: uppercase;
 color: #444444;
 margin: 0 0 8px 0;
 padding: 5px 0;
 border-top: 1px dashed #999999;
 border-bottom: 1px dashed #999999;
}

.sidebar ul {
 padding: 0;
 list-style-type: none;
 margin: 0px 0px 30px 0px;
}

.sidebar ul li {
 text-decoration: none;
 margin: 0;
 padding: 0 0 5px 0;
 color: #555555;
}

.sidebar ul li a {
 color: #000000;
 text-decoration: none;
 padding: 0;
 margin: 0;
}

.sidebar ul li a:visited {
 color: #777777;
 text-decoration: none;
 padding: 0;
 margin: 0;
}

.sidebar ul li a:hover, .sidebar ul li a:visited:hover {
 color: #444444;
 text-decoration: none;
 padding: 0;
 margin: 0;
}

#searchform {
 color: #444444;
 text-decoration: none;
 padding: 0;
 margin: 5px 0 30px 0;
}

/**--Footer--**/

#footer {
 clear: both;
 color: #555555;
 padding: 20px 0;
 text-align: center;
 margin: 40px 0 20px 0;
 border-top: 1px dashed #888888;
}

#footer p {
 margin: 0;
 padding: 0 10px 10px;
}

#footer a:link, #footer a:visited {
 color: #999999;
}

#footer a:hover, #footer a:active {
 color: #000;
}

/* Comment Section */

.comments h3{
 line-height:22px;
 border-top: 1px dashed #cccccc;
 color:#000;
 font-size: 20px;
 margin: 20px 0 0 0;
 padding: 20px 0 0 0;
}

p.num_comments {
 margin-bottom:0;
 line-height:22px;
 float:left;
}

#comment_form {
 width:450px;
 float:left;
 padding:10px 0;
}

#comment_form p {
 margin-bottom:0;
 padding:6px 0;
}

#comment_form label {
 color:#7f7f7f;
 padding-left:5px;
 font-size:12px;
}

#comment_form .text_input {
 width: 275px;
 background:#eee;
 border:1px solid #ccc;
 font:normal 14px helvetica, verdana, arial, sans-serif;
 padding:10px;
}

#comment_form .text_area {
 width: 578px;
 color:#21211f;
 background:#eee;
 border:1px solid #ccc;
 font:normal 14px helvetica, verdana, arial, sans-serif;
 padding:10px;
}

.comments {
 width: 600px;
 font-size:13px;
 line-height:22px;
 color:#21211f;
 float:left;
 clear:both;
 padding: 30px 0 0 0;
}

ul.comment_list {
 list-style:none;
 float:left;
 margin: 40px 0 20px 0;
 padding:0;
}

ul.comment_list li {
 width: 598px;
 background:#fff;
 border-bottom:1px solid #ddd;
 margin:0 0 8px;
 padding:20px 0 5px;
}

ul.comment_list li.author_comment {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 width: 598px;
 background:#ccc;
 margin:0 0 6px;
 padding:20px 0 5px;
}

.author_comment .comment_intro a {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 color:#21211f;
}

.comment_author {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 font-size:14px;
 font-weight:400;
 color:#000;
 margin:0;
 padding:0;
}

.comment_author a:hover {
 text-decoration:none;
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 font-size:14px;
 color:#333;
 margin:0;
}

.comment_meta {
 text-transform:uppercase;
 font-family: helvetica, arial, verdana, sans-serif;
 color:#555;
 font-size:10px;
 margin:0;
 padding:0;
}

.comments_entry {
 line-height:23px;
 margin:0 0 20px;
 padding:0 20px 20px 20px;
}

.comments_entry ul,.comments_entry ol {
 color:#000;
 border:none;
 margin:0;
 padding:0;
}

.comments_entry ul {
 list-style-type:none;
}

.comments_entry li {
 width: 600px;
 border:none;
 padding:3px 0 0;
}

.comments_entry ul li ul,.comments_entry ul li ol,.comments_entry ol li ul,.comments_entry ol li ol {
 margin:0;
}

#comment_form .submit {
 color:#fff;
 border: 1px solid #21211f;
 background: #AE684E;
 margin-top: -25px;
 margin-bottom: 15px;
 font-size:12px;
 font-weight: 400;
 font-family: 'Trebuchet MS', helvetica, arial, sans-serif;
 padding: 5px;
}

#comment_form .text_input:hover,#comment_form .text_area:hover {
 border:1px solid #bbb;
 background:#ddd;
}

.author_comment .comment_intro,.author_comment .comment_intro a:hover {
 font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-Serif;
 color:#000;
}

The Typography

I used Georgia as the primary typeface. I’ve always loved Georgia, I think it’s a very stylish font that is well suited for body content and headings. I also used Baskerville for the blog’s tagline and Verdana for the headings in the sidebar and a couple other elements. This WordPress doesn’t use any images, spatial sense and good use of whitespace is essential to make this kind of design. It’s clean, minimalist and definitely not cluttered – at least I like to think so. :)

Demo And Download

The Simple Type WordPress theme is available as a free download and a Demo is also available. I hope you liked this tutorial! Feel free to download and use this theme for your projects and also feel free to customize it for your needs.

Download working theme here

About The Author

Jon Phillips is a web developer specialising in WordPress theme design with a passion for typography. He also writes on a freelance basis for a supplier of cartridges for HP printers based in the United Kingdom called Cartridge SAVE.

5 Written ArticlesWebsite

Tom Walker is a writer and designer who is based in the UK and works for a supplier of HP laser toner cartridges as well as inks, paper and other printing accessories. For more of his writing about art, design and technology, check out CreativeCloud.

41 Comments Best Comments First
  • Bunnygotblog

    Wednesday, September 16th, 2009 01:33

    1

    WOW!!

    All I can say is WOW !! My husband has taught me a lot and he even wrote a tutorial on making my blog. But this is so cool .

    0
    • Dainis Graveris

      Friday, September 18th, 2009 09:23

      20

      never stop learning I guess:) It’s a little bit hard to keep up with news all the time:)

      0
  • Dainis Graveris

    Thursday, September 17th, 2009 23:31

    15

    fixed and added download url:) Sorry for discomfort!

    0
  • AC

    Thursday, September 17th, 2009 16:29

    13

    yeah, there is no download link, and while I know that maybe only the very lazy should need it, I keep getting confused as I am assembling the various pages and would love to be able to refer to correct files. Is there any chance of posting a zip of the completed files?

    0
    • NiKO

      Thursday, September 17th, 2009 23:41

      16

      I was going to just grab all the necessary files, but it was 1AM and I was feeling quite lazy. :P

      0
      • Dainis Graveris

        Friday, September 18th, 2009 09:19

        17

        No worries, I should have added download link already, but I forgot to do that!:) Hope it’s okay now and everything is working – 1 AM real passion:)

        0
    • Dainis Graveris

      Thursday, September 17th, 2009 23:26

      14

      oh, sorry – I added it now at the end of article!

      0
  • Tom Kenny

    Thursday, September 17th, 2009 14:51

    12

    Minimalist and typographic blog you say? Reminds me of my web design blog, Inspect Element.

    Good work Jon!

    0
  • NiKO

    Thursday, September 17th, 2009 11:30

    11

    Download link?

    0
    • Dainis Graveris

      Friday, September 18th, 2009 09:20

      18

      Added now! Sorry! :)

      0
  • Luke Lux

    Wednesday, September 16th, 2009 11:57

    4

    Thanks to post it! Well done.

    0
  • Anakin

    Wednesday, September 16th, 2009 03:19

    3

    Very nice tutorial for everyone who wants discover how the WP templates work.

    0
  • Dicky

    Wednesday, September 16th, 2009 02:54

    2

    Great tutorial for beginner who want to have their custom WordPress theme!

    0
  • xun

    Wednesday, September 16th, 2009 12:39

    5

    i guess, those who are lazy, they will only copy and paste and wish that the theme will work. haha.

    0
  • Mars

    Wednesday, September 16th, 2009 08:38

    6

    this is a great tutorial to follow, its good that were having a week vacation

    0
  • Thomas

    Wednesday, September 16th, 2009 23:05

    10

    Nice tutorial, Thinks about using a highlight system for the code :)

    0
  • Andrew Kelsall

    Wednesday, September 16th, 2009 20:12

    9

    Great, I’ll be referring back to this for sure, when I redesign my blog, that is ;)

    0
  • Luis Lopez

    Wednesday, September 16th, 2009 16:34

    8

    Great tutorial, I like the result, a nice and clean theme, perfect for customize.

    0
    • Dainis Graveris

      Friday, September 18th, 2009 09:22

      19

      Yeah, agreed, I am really happy Tom agreed to do this guest post!

      0
  • ian

    Wednesday, September 16th, 2009 12:42

    7

    thanx for share.
    i just copy and paste…

    0
  • Johnson Koh

    Friday, September 18th, 2009 12:07

    22

    This is really doing things from scratch. Very useful for people like me who wants to learn how to make a theme! Great post :D

    0
    • Johnson Koh

      Friday, September 18th, 2009 12:09

      23

      I just realized my commentluv is linking to Andrew’s blog!

      0
      • Dainis Graveris

        Friday, September 18th, 2009 12:16

        21

        o man, how it’s possible? You didn’t put right website maybe? though impossible :)

        Yeah, thanks to Jon and Tom – really beautiful tutorial!

        0
  • Taschenmuschi

    Sunday, February 21st, 2010 01:26

    36

    I love clean and simple wordpress themes like this one. It will be part of me default installations

    0
  • waro

    Friday, February 19th, 2010 12:04

    35

    Nice article. A perfect start for a newbie like me who wants my own theme.

    Thanks.

    0
  • Karin

    Monday, February 1st, 2010 01:18

    34

    Hi there! I’m using your simple-type WordPress theme and I love it! I just only recently noticed that threaded comments are not supported in this theme. I tried to fix this myself, but that goes way beyond my coding skills, I’m afraid. Do you also happen to have this theme with threaded comments? Or are you planning to make one maybe?

    Thanks so much!

    0
  • Andy

    Monday, June 21st, 2010 01:16

    37

    Thanks for the tutorial, looks great.

    0
  • Laurent Holdrinet

    Monday, March 14th, 2011 14:57

    38

    Thanks for sharing this great tut’.
    It’s perfect!

    0
  • Kumar J

    Monday, June 27th, 2011 14:51

    41

    How do I add previous and next links to this theme?

    0
  • Sally

    Thursday, June 2nd, 2011 19:24

    40

    Thanks for the great post. Very good piece of information.

    0
  • joey

    Thursday, May 19th, 2011 23:22

    39

    FYI if you download the theme Simple-type theme above, 1st extract the file and change the extension (rar) to .zip. i have problem uploading this theme to my wp but after i extract the file and zip again to .zip it work :D thank 1st WD you did it again.. like thiss

    0
  • Infographiste

    Sunday, January 31st, 2010 00:07

    33

    That’s a great tutorial for everyone who wants discover how the WP templates work. You really did a great work, brilliantly explained, page bookmarked, have a great week end :)

    0
  • shoaib

    Thursday, January 14th, 2010 19:11

    32

    nice theme ,its really clean

    0
  • Jon Phillips

    Friday, September 18th, 2009 23:32

    25

    Thanks for all the comments guys! I’m happy you enjoyed the tutorial! Lemme know if there’s anything :)

    0
  • Crusher

    Saturday, September 19th, 2009 04:53

    24

    Thank you for the nice tutorial. It is very helpful. Actually I was looking for this type of tutorial. I’ve got this through Kristy’s Fetching friday blog. I’m really a fan of 1webdesigner.

    0
    • Dainis Graveris

      Sunday, September 20th, 2009 18:36

      26

      Thank you for kind words! We all are trying our best!

      0
  • Dee

    Monday, September 21st, 2009 02:09

    27

    Thank you for this Tom. Its a pretty comprehensive tutorial for beginners looking into creating their own custom WP themes. I didn’t know that you can get such a good looking result without the excessive use of images!

    0
  • Jenny

    Monday, December 14th, 2009 11:21

    31

    This is a great theme! I was playing around with it and customized it a great deal, but when I had to move the #container down to accommodate my header, I realized that it doesn’t show properly in Internet Explorer, and obviously, my skill level at reset.css is not the greatest.

    Do you have any advice?

    Thanks in Advance…

    0
  • Florian

    Friday, December 4th, 2009 20:29

    30

    Hi Jon,

    at first, many thanks for this great tutorial. I’ve learned so much during read this.
    But I have a question. I would like to add a second sidebar to the left. How can I make this?

    It seems that the php include tags doesn’t work …

    Best regards

    Florian

    0
  • hi5

    Sunday, November 15th, 2009 14:30

    29

    I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    0
  • Michelle

    Saturday, September 26th, 2009 23:44

    28

    This is very helpful. Thanks. I’ll be saving this site to my favorites.

    0
  • Kumar J

    Monday, June 27th, 2011 14:51

    41

    How do I add previous and next links to this theme?

    0
  • Sally

    Thursday, June 2nd, 2011 19:24

    40

    Thanks for the great post. Very good piece of information.

    0
  • joey

    Thursday, May 19th, 2011 23:22

    39

    FYI if you download the theme Simple-type theme above, 1st extract the file and change the extension (rar) to .zip. i have problem uploading this theme to my wp but after i extract the file and zip again to .zip it work :D thank 1st WD you did it again.. like thiss

    0
  • Laurent Holdrinet

    Monday, March 14th, 2011 14:57

    38

    Thanks for sharing this great tut’.
    It’s perfect!

    0
  • Andy

    Monday, June 21st, 2010 01:16

    37

    Thanks for the tutorial, looks great.

    0
  • Taschenmuschi

    Sunday, February 21st, 2010 01:26

    36

    I love clean and simple wordpress themes like this one. It will be part of me default installations

    0
  • waro

    Friday, February 19th, 2010 12:04

    35

    Nice article. A perfect start for a newbie like me who wants my own theme.

    Thanks.

    0
  • Karin

    Monday, February 1st, 2010 01:18

    34

    Hi there! I’m using your simple-type WordPress theme and I love it! I just only recently noticed that threaded comments are not supported in this theme. I tried to fix this myself, but that goes way beyond my coding skills, I’m afraid. Do you also happen to have this theme with threaded comments? Or are you planning to make one maybe?

    Thanks so much!

    0
  • Infographiste

    Sunday, January 31st, 2010 00:07

    33

    That’s a great tutorial for everyone who wants discover how the WP templates work. You really did a great work, brilliantly explained, page bookmarked, have a great week end :)

    0
  • shoaib

    Thursday, January 14th, 2010 19:11

    32

    nice theme ,its really clean

    0
  • Jenny

    Monday, December 14th, 2009 11:21

    31

    This is a great theme! I was playing around with it and customized it a great deal, but when I had to move the #container down to accommodate my header, I realized that it doesn’t show properly in Internet Explorer, and obviously, my skill level at reset.css is not the greatest.

    Do you have any advice?

    Thanks in Advance…

    0
  • Florian

    Friday, December 4th, 2009 20:29

    30

    Hi Jon,

    at first, many thanks for this great tutorial. I’ve learned so much during read this.
    But I have a question. I would like to add a second sidebar to the left. How can I make this?

    It seems that the php include tags doesn’t work …

    Best regards

    Florian

    0
  • hi5

    Sunday, November 15th, 2009 14:30

    29

    I recently came accross your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.

    0
  • Michelle

    Saturday, September 26th, 2009 23:44

    28

    This is very helpful. Thanks. I’ll be saving this site to my favorites.

    0
  • Dee

    Monday, September 21st, 2009 02:09

    27

    Thank you for this Tom. Its a pretty comprehensive tutorial for beginners looking into creating their own custom WP themes. I didn’t know that you can get such a good looking result without the excessive use of images!

    0
  • Jon Phillips

    Friday, September 18th, 2009 23:32

    25

    Thanks for all the comments guys! I’m happy you enjoyed the tutorial! Lemme know if there’s anything :)

    0
  • Crusher

    Saturday, September 19th, 2009 04:53

    24

    Thank you for the nice tutorial. It is very helpful. Actually I was looking for this type of tutorial. I’ve got this through Kristy’s Fetching friday blog. I’m really a fan of 1webdesigner.

    0
    • Dainis Graveris

      Sunday, September 20th, 2009 18:36

      26

      Thank you for kind words! We all are trying our best!

      0
  • Johnson Koh

    Friday, September 18th, 2009 12:07

    22

    This is really doing things from scratch. Very useful for people like me who wants to learn how to make a theme! Great post :D

    0
    • Johnson Koh

      Friday, September 18th, 2009 12:09

      23

      I just realized my commentluv is linking to Andrew’s blog!

      0
      • Dainis Graveris

        Friday, September 18th, 2009 12:16

        21

        o man, how it’s possible? You didn’t put right website maybe? though impossible :)

        Yeah, thanks to Jon and Tom – really beautiful tutorial!

        0
  • Dainis Graveris

    Thursday, September 17th, 2009 23:31

    15

    fixed and added download url:) Sorry for discomfort!

    0
  • AC

    Thursday, September 17th, 2009 16:29

    13

    yeah, there is no download link, and while I know that maybe only the very lazy should need it, I keep getting confused as I am assembling the various pages and would love to be able to refer to correct files. Is there any chance of posting a zip of the completed files?

    0
    • Dainis Graveris

      Thursday, September 17th, 2009 23:26

      14

      oh, sorry – I added it now at the end of article!

      0
    • NiKO

      Thursday, September 17th, 2009 23:41

      16

      I was going to just grab all the necessary files, but it was 1AM and I was feeling quite lazy. :P

      0
      • Dainis Graveris

        Friday, September 18th, 2009 09:19

        17

        No worries, I should have added download link already, but I forgot to do that!:) Hope it’s okay now and everything is working – 1 AM real passion:)

        0
  • Tom Kenny

    Thursday, September 17th, 2009 14:51

    12

    Minimalist and typographic blog you say? Reminds me of my web design blog, Inspect Element.

    Good work Jon!

    0
  • NiKO

    Thursday, September 17th, 2009 11:30

    11

    Download link?

    0
    • Dainis Graveris

      Friday, September 18th, 2009 09:20

      18

      Added now! Sorry! :)

      0
  • Thomas

    Wednesday, September 16th, 2009 23:05

    10

    Nice tutorial, Thinks about using a highlight system for the code :)

    0
  • Andrew Kelsall

    Wednesday, September 16th, 2009 20:12

    9

    Great, I’ll be referring back to this for sure, when I redesign my blog, that is ;)

    0
  • Luis Lopez

    Wednesday, September 16th, 2009 16:34

    8

    Great tutorial, I like the result, a nice and clean theme, perfect for customize.

    0
    • Dainis Graveris

      Friday, September 18th, 2009 09:22

      19

      Yeah, agreed, I am really happy Tom agreed to do this guest post!

      0
  • ian

    Wednesday, September 16th, 2009 12:42

    7

    thanx for share.
    i just copy and paste…

    0
  • Mars

    Wednesday, September 16th, 2009 08:38

    6

    this is a great tutorial to follow, its good that were having a week vacation

    0
  • xun

    Wednesday, September 16th, 2009 12:39

    5

    i guess, those who are lazy, they will only copy and paste and wish that the theme will work. haha.

    0
  • Luke Lux

    Wednesday, September 16th, 2009 11:57

    4

    Thanks to post it! Well done.

    0
  • Anakin

    Wednesday, September 16th, 2009 03:19

    3

    Very nice tutorial for everyone who wants discover how the WP templates work.

    0
  • Dicky

    Wednesday, September 16th, 2009 02:54

    2

    Great tutorial for beginner who want to have their custom WordPress theme!

    0
  • Bunnygotblog

    Wednesday, September 16th, 2009 01:33

    1

    WOW!!

    All I can say is WOW !! My husband has taught me a lot and he even wrote a tutorial on making my blog. But this is so cool .

    0
    • Dainis Graveris

      Friday, September 18th, 2009 09:23

      20

      never stop learning I guess:) It’s a little bit hard to keep up with news all the time:)

      0

Comments are closed.

54.163.91.250 - unknown - unknown - US