Get our posts emailed to you with our monthly newsletter, subscribe here.

I am currently in the process of creating a clean and minimal WordPress theme, in my first post I provided you with a walk through on process of the design. In this post you can follow me convert the final psd file to HTML and CSS and implement the jQuery library. Next week you can follow me  as I convert the theme to WordPress!

Take a look at the HTML/CSS working version:

Minimal WordPress Theme

Tools Needed/Used: Typekit/jQuery Sticky/Follow Bar

Last week I created the initial design, once I am fairly happy with this I will export all the image used so I can call them in the HTML.

This is a very light, minimal WordPress theme, using only 3 colors and very few images for the layout. Here you can see the images I sliced from Photoshop.


The first thing I will be doing is created my HTML document. I will create a folder called ‘minimalwp’ and create an index.html file within that folder. Also in this folder I will create separate folders called ‘css’, ‘js’ and ‘img’.

HTML structure

The basic HTML template I will be using looks like this:

[html]<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>minimalwp – created by David Martin – @webadelic 02/2011</title>

<link rel="stylesheet" href="css/cookielabs_style.css" />
</head>
<body>

<!– Include jQuery/TypeKit/StickySidebar JS files –>
<script type="text/javascript" src="http://use.typekit.com/msy2eyr.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>[/html]

You will see just before the closing body tag I have included the jQuery library and a reference to an external JavaScript file. We will use this JavaScript file to place the JavaScript for our theme. You will also see the Typekit includes, for the customizing the fonts.

Header/Sidebar Navigation/Search Structure

[html]<!– header line –>

<div>&nbsp;</div>

<!– end header line –>

<div></div>

<div>

<!– sidebar –>
<div style="border:none">

<!– logo –>

<h1><a href="/">minimalwp</a></h1>

<div></div>

<!– menu –>

<div>
<ul>
<li><a href="/" id="home">HOME</a></li>
<li>
<a href="#" id="categories">CATEGORIES<span>+</span></a>

<div>
<ul>
<li><a href="#">Categories 1</a></li>
</ul>
</div>
</li>
<li>
<a href="#" id="archives">ARCHIVES<span>+</span></a>

<div>
<ul>
<li><a href="#">Archive 1</a></li>
</ul>
</div>

</li>
<li><a href="#" id="contact">CONTACT</a></li>
<li><a href="http://feeds.feedburner.com/designwoop" rel="nofollow" id="rss">RSS</a></li>

<li><a href="http://twitter.com/designwoop" rel="nofollow" id="twitter">TWITTER</a></li>
</ul>
</div>

<!– search –>

<div></div>

<form method="get" id="searchform" action="#">
<div>
<input type="text" value="" name="s" id="s" />

<input type="image" src="img/go.jpg" id="searchsubmit" value="" />
</div>
</form>

<div>&nbsp;</div>
</div>
<!– end sidebar –>[/html]

The current logo is a placeholder, when I release the theme, do replace this with your own much better logo! When I code this into WordPress, the categories and archives will drop down with a full list for each. You can see I have added a simple link list to demonstrate each menu item collapsing and expanding. Again the search box form is not functioning code, this is more of a place holder until I convert it to WordPress.

Post Structure

The code for one complete post item on the homepage is shown below, in WordPress this code will be in a loop that WordPress will repeat for each post.

[html]<!– content wrap –>

<div style="border:none;">

<!– sort posts –>

<p>
<a href="/">NEWEST</a> / <a href="/">POPULAR</a>        </p>

<!– post loop – post container –>

<div>

<!– post hero image –>

<div>

<img src="img/hero.jpg" width="470" height="140" alt="" border="0" />                </div>

<!– post content wrap –>
<div>

<!– post meta data –>

<div><span>DATE:</span> 11 NOV 2010  |  <span>AUTHOR:</span> DAVID  |                 <span>COMMENTS:</span> 6 </div>

<!– post title –>
<div>

<h2>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</h2>

</div>

<!– post excerpt –>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque dui et est gravida id interdum justo gravida. Nam placerat tempus nibh ut ultrices. Aliquam eget pellentesque augue. Aenean viverra, mauris vel aliquet sagittis, ante diam porta orci, ut dapibus diam orci in neque. Aliquam erat volutpat. Donec vehicula libero orci.</p>

<div>

<!– more info button –>

<div>

<a href="/"><img src="img/read_more.jpg" alt="Read more…" border="1" width="72" height="21" /></a>                    </div>

<!– tags –>

<div>

<span>Tags</span> <a href="/">Design</a> / <a href="/">Minimal</a>                        </div>

</div>

<!– post seperator –>

<div>&nbsp;</div>
</div>
<!– post content wrap –>
</div>
<!– end post loop – post container –>
[/html]

Footer Strucure

[html]</div>

<!– content wrap –>
</div>
<!– end container_12 –>

<div></div>

<!– footer wrap–>

<div>

<div>

<!– large footer widget –>
<div>

<h3>About</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas malesuada orci ante. Morbi tristique auctor varius. Phasellus faucibus dui in leo auctor et tristique est sollicitudin. </p>

</div>

<!– small footer links widget –>
<div>

<h3>Join minimalwp</h3>

<ul>
<li>Created by <a href="http://www.webadelic.co.uk">David Martin</a></li>
<li>For <a href="http://www.DesignWoop.com">DesignWoop.com</a></li>

<li><a href="/">Write for minimalwp</a></li>
</ul>
</div>
</div>
</div>
<!– end footer wrap –> [/html]

jQuery in use

I used the jQuery library to add a little more functionality to the theme. To allow for the expandable menu to expand and collapse I use the code below:

[html]$(document).ready(function() {

$(".drop_down, .archive_drop_down").hide();

$(".click_dropdown").click(function () {
$(".drop_down").toggle("medium");
});

$(".archive_click_dropdown").click(function () {
$(".archive_drop_down").toggle("medium");
});[/html]

This is very simple, when the page is had finished loading, we set all links with the classes of .drop_down and .archive_drop_down to hidden. When a user clicks a link with the class .click_drop_down the .drop_down link will be expanded or collapsed depending on which state it is in.

To get the sticky sidebar to follow the page scrolling movement, I simply used the code form my other tutorial – Create a jQuery sticky sidebar.

These scripts will be combined into the external JS file I call in the footer of theme.

[html]<script type="text/javascript" src="js/scripts.js"></script>[/html]

To conclude

You will notice I have broken the theme up into various sections for the website, for example – header, sidebar, footer. This will help us when we come to code this HTML/CSS template into a functioning WordPress theme.

This is the first version of the theme, I am sure there will be a few revisions and corrections as we move from the HTML/CSS template into WordPress.

View the DEMO

Next week, we will convert this HTML/CSS template into a functioning WordPress theme, do not miss the post, grab the RSS feed or get the post delivered to your email.

Posted by David Martin

David Martin is a WordPress developer & entrepreneur from the UK. He owns DesignWoop, CardDsgn and WhoDesignToday. Catch up with David on Twitter.

7 Comments

  1. Great tutorial. Thanks for this hard work. But every time I open http://designwoop.com/2011/02/how-to-design-a-clean-and-minimal-wordpress-theme/ and many other in your site, my laptop becomes very hot and my browser stops working. I try using firefox, chrome, ie, the result is same. And finally, I force shutdown my laptop.
    I want to follow these posts but your site is very hard.

  2. Hi David,

    I’m having a little problem replicating your ouput based on the instructions. Could you please tell me where I might get the css files and the js file? Also when I assembled my index.html based on the instructions above it kinda went nuts so I went to your index.html page and downloaded that to me local machine to run it. It also did not display correctly. Is this cause I’m running the html locally and there is a need for it to be on a server? Sorry if these seem like very basic questions!

    Thanks again!

    1. Hi Kevin,

      Check you are including the jQuery library.

      Then check you are including the JS file the controls the moving jQuery sidebar.

  3. Hey – glad you are writing this – I am just trying to sort a template for a client and this is giving me some ideas, I really like the left side menu and the javascript effect.

    Please do post your next post this week as Ive done a designed based on being able to understand this and may be a bit screwed otherwise!! cheers

    1. No problem Toby. Its on its way!
      -David.

  4. Looking Good David! Nice to see it so well explained as well. Can’t wait for the download to give it a spin. Cheers Erwin

    1. Thanks for the feedback Erwin!

Comments are closed.