Advertisment
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!
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:
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'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results: <?php the_search_query(); ?> | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_author() ) { ?><?php bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><?php wp_title(''); ?> | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_category() ) { ?><?php bloginfo('name'); ?> | Archive | <?php single_cat_title(); ?><?php } ?>
<?php if ( is_month() ) { ?><?php bloginfo('name'); ?> | Archive | <?php the_time('F'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?> | Tag Archive | <?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(); ?> » <a href="<?php the_permalink() ?>#comments"><?php comments_number('Add Comment »','1 Comment »','% Comments »'); ?></a></div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content("[Read more →]"); ?>
</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(); ?> » <a href="<?php the_permalink() ?>#comments"><?php comments_number('Add Comment »','1 Comment »','% Comments »'); ?></a></div>
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_content("[Read more →]"); ?>
</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 →]"); ?>
</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 ‘<?php single_cat_title(); ?>’ Category</h4>
<?php } elseif( is_tag() ) { ?>
<h4>Posts Tagged ‘<?php single_tag_title(); ?>’</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'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 →]"); ?>
<div>
<?php comments_template(); ?>
</div>
Now we’ll need to create our comment section. On to the next step!
The Comment Section
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, leave a comment!</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 »</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… 404… </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.
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.
Thanks for the tutorial, looks great.
[...] 6. Simple Type [...]
[...] How to Create a Minimalist and Typographic Blog Layout From Scratch [...]
[...] download [...]
[...] How to Create a Minimalist and Typographic Blog Layout From Scratch | Graphic and Web Design Blog. [...]
Informative material. Has learnt дотаточно a lot of the interesting. I wish successes It is assured that the blog will be will replenish
I love clean and simple wordpress themes like this one. It will be part of me default installations
.-= Taschenmuschi´s last blog ..Playhouse Eroflame PM0720014 Hot Heavenly Pussy, Masturbator, vibrierende Onanierhilfe, sehr dehnbar, Chocolate =-.
Nice article. A perfect start for a newbie like me who wants my own theme.
Thanks.
.-= waro´s last blog ..The Guardian 1000 novels everyone must read =-.
that was inspiring post! great job. thanks!
Great tutorial . Thanks
wow thanks so much.
doğru bir resim olmş :)
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!
.-= Karin´s last blog ..First month evaluation =-.
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 :)
I’m a blogger but I usually just get free designs and themes from the web for my bog sites. Sometimes, I also ask my friend to fix the layout of my sites, in other words, this tutorial will help me big time in creating my own blog design. Thanks!
nice theme ,its really clean
.-= shoaib´s last blog ..Firefox trick-Install Incompatible Add On’s =-.
It’s good!
yo.. thank you for this thread :)
Thanx that you created the good story associated with this topic. But, to detect the professional custom writing service, students suppose know about pay-essay.
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…