SportNewsPvm Coded, How To Plan A Web Layout For A WordPress Theme

11 July 2009
Tutorials, WordPress
This post was written exclusively for PV.M Garage by Piervincenzo Madeo
Comments (35)»

To create a basic WordPress theme the essential steps, in my personal approach, are four: sketch, PSD template, (X)HTML/CSS layout and, finally, WordPress code.
In this post will learn how to make a web layout (xhtml/css from a psd template) that will become a WP theme (the third step).

If you want to learn the basic techniques to make a PSD template, you can read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop.

For our purpose we’ll use SportNewsPvm template, the reasons for this choice are explained below.

Why SportNewsPvm template can become a WP theme

We’re going to take a look at the relevant elements you need when you develope a template that will be used for a WordPress theme. In this case we have a preset target: a sport magazine with a weekly updates.

The SportNewsPvm layout was thought to accomplish this goal. A soft grunge magazine template with a large header and featured news box.
As you can see the structure is really valid for our purpose, in fact the basic elements are: top-menu, header, featured news box, posts container, sidebar and footer.
We can also divide the structure in four macro-areas that are top, left-container, right-container and bottom. This partition is useful for a visual representation of content layout that help us during all the steps of our work.
SportNewsPvm

In this way, with this kind of structure, we are trying to consider all the needful containers for the main components of a WordPress theme. Basically, a WordPress theme is composed by the header, the post loop, the sidebar and the footer. Now it’s clear that our template have all spaces to host them.

Other important elements, in the theme development, are single post page, comments structure, category template, page template and archive. Right now, however, we just want to understand how to prepare the basic (x)html/css layout for the home page and these last elements listed will be considered at a later time.

Final Result, Css Template

Here you can see a preview image and a live demo. You can also download the zip archive with the complete CSS template.
SportNewsPvm CSS Template

Coding SportNewsPvm

A little summary.
In top of the structure we insert the top-menu and the header with the logo.
The left-container expects the featured news box and the posts container.
The right-container is useful to put in sponsors and other information like blogroll or recent posts list.
In the bottom there is a simple footer with credits.

Now is time for the code. This section of the post will show the essential steps to code the psd template using the techniques explained in WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial and DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial.

In the folder “sportnews” we put in “images” and “js” folders and the necessary files: “index.html” and “style.css”.

Step 1 – Main Structure

For the general background we use a repeatable image.
SportNewsPvm
The markup for the main structure (edit “index.html”).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sport News Design | A free CSS Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" /><!-- stylesheet -->
</head>
<body>

<div id="top"><!-- top menu -->
  <div class="top_left">
    <!-- categories menu -->
  </div>

  <div class="top_right">
    <!-- pages menu -->
  </div>
</div>

<div id="header">
<!-- header -->
</div>

<div id="container">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

</div>

<div id="footer">
<!-- footer container -->
</div>

</body>
</html>

To initialize Cascading Style Sheet (edit “style.css”) we write the following rules.

/*Yahoo! Reset CSS*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,
blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/*End Yahoo! Reset CSS*/

body {
  background: #fff url("images/bck.jpg") repeat-x top;
  font-family: Verdana, Georgia, “Lucida Sans Unicode”, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 15px;
}

:focus {
	outline: 0;
}

a {
  text-decoration: none;
  color: #ca5235;
}

a:hover {
  color: #75a7b4;
}

small {
  font-size: 10px;
}

h1 {
  color: #ca5235;
  font-size: 28px;
}

h2 {
  color: #ca5235;
  font-size: 28px;
}

Step 2 – Top menu and Header

Now we add all elements of the design for the menu and header. Below there are the background images exported from psd.
SportNewsPvm

The following images are for the logo and the down-header elements.
SportNewsPvm

Note: in the down-header section there are the search form and the button to subscribe RSS feed. Below the (x)html code for header and top-nav bar.

<div id="top">
  <div class="top_left">
    <ul>
      <li><a href="#">Football</a></li>
      <li><a href="#">Basket</a></li>
      <li><a href="#">Volley</a></li>
      <li><a href="#">MotorSports</a></li>
      <li><a href="#">Special</a></li>
      <li><a href="#">Interview</a></li>
    </ul>
  </div>

    <div class="top_right">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Write for us</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

<div id="header">
  <div id="logo">
    <a href="#"></a>
  </div>

  <div id="search_box">
      <input name="textfield" type="text" class="search_input" id="textfield" value="Search" />
  </div>

  <div id="feed">
    <ul>
      <li><a href="#" class="rss_icon"></a></li>
      <li><a href="#" class="rss_mail"></a></li>
    </ul>
  </div>
</div>

And now, the style.

#top {
  background: url("images/bck_top.png") no-repeat center left;
  height: 53px;
  width: 1030px;
  margin: auto;
}

  .top_left {
    position: relative;
    float: left;
  }

  .top_left ul {
    margin: 23px 0 0 105px;
  }

  .top_left ul li {
    padding:0 5px;
    display: inline;
    font-size: 12px;
  }

  .top_left ul li a {
    color: #706d67;
    font-weight: bold;
    text-transform: uppercase;
  }

  .top_left ul li a:hover {
    color: #ca5235;
    font-weight: bold;
    border-bottom: 1px dotted #ca5235;
  }

  .top_right {
    position: relative;
    float: right;
  }

  .top_right ul {
    margin: 20px 60px 0 0;
  }

  .top_right ul li {
    padding:0 2px;
    display: inline;
    font-size: 10px;
  }

  .top_right ul li a {
    color: #706d67;
  }

  .top_right ul li a:hover {
    color: #ca5235;
    border-bottom: 1px dotted #ca5235;
  }

#header {
  background: url("images/bck_head.png") no-repeat center left;
  height: 244px;
  width: 1030px;
  margin: auto;
}

  #logo {
    background: url("images/logo.png") no-repeat center left;
    margin: 0 0 0 50px;
    padding: 26px;
  }

  #logo a {
    width: 463px;
    height: 167px;
    display: block;
  }

  #search_box {
    position:relative;
    float: left;
    top: -18px;
    margin-left: 40px;
    width: 260px;
    background: url("images/search.png") no-repeat center right;
    margin-right: 10px;
  }

  .search_input {
    border: 1px solid #c8c9d0;
    width: 150px;
    color: #c8c9d0;
    padding: 8px;
  }

  #feed {
    position:relative;
    float: left;
    top: -18px;
    border-left: 2px solid #c8c9d0;
    padding: 0px 5px;
    background: url("images/subscribe.png") no-repeat center right;
    width: 340px;
  }

  #feed ul li {
    display: inline;
    padding: 0 5px;
  }

  .rss_icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss.png") no-repeat;
  } 

  .rss_mail {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("images/rss_mail.png") no-repeat;
  }

Step 3 – The Main Container

Below the repeteable image used for the main container of the layout. We use a graphic with a height of 375px to emphasize the grunge effect.
SportNewsPvm

In this step we don’t forget to use a clearfix technique to give a cross browser float clearing solution. So the html code for the main container is the following.

<div id="container" class="clearfix">

  <div id="left_cont">
    <!-- left container -->
  </div>

  <div id="sidebar">
    <!-- right container -->
  </div>

</div>

#container {
  background: url("images/bck_container.png") repeat-y top left;
  width: 1030px;
  margin: auto;
}

  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

Step 4 – Left Container

In this section there are two important elements: featured news and post container. Below you can see the images for this section.
SportNewsPvm

In the featured news box there are three sliding elements, so we must write a correct (x)html code to prepare document for UI jQuery Tabs.
In post container we have title, post-image, the excerpt and the “meta-info” boxes. Below you can see the code.

<div id="container" class="clearfix">

  <div id="left_cont">
  <div id="featured_title"></div>
  <div id="featured" class="clearfix">

    <ul class="nav">
      <li>
          <a href="#featured-1">
          <span class="imag_list"><img src="images/image1-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 07.11</span><br />
          <span class="title_list">Lorem ipsum dolor sit amet</span>

          </a>
      </li>
      <li>
          <a href="#featured-2">
          <span class="imag_list"><img src="images/image2-small.jpg" alt="" /></span>
          <span class="meta_info_list">Category - 04.11</span><br />
          <span class="title_list">Etiam rhoncus</span>
          </a>
      </li>
      <li>
          <a href="#featured-3">
          <span class="imag_list"><img src="images/image3-small.jpg" alt="" /></span>
          <span class="meta_info_list">Categoria - 03.11</span><br />
          <span class="title_list">Etiam ultricies nisi vel augue</span>
          </a>
      </li>
    </ul>

    <div id="featured-1" class="featured_content">
      <a href="#" ><img src="images/image1.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Lorem ipsum dolor sit amet</a></h2>
			</div>
    </div>

    <div id="featured-2" class="featured_content">
      <a href="#" ><img src="images/image2.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam rhoncus</a></h2>
			</div>
    </div>

    <div id="featured-3" class="featured_content">
      <a href="#" ><img src="images/image3.jpg" alt="" /></a>
			<div class="info" >
				<h2><a href="#" >Etiam ultricies nisi vel augue</a></h2>
			</div>
    </div>

  </div>

  <div id="news_title"></div>
  <div id="post_container" class="clearfix">
      <h1>Sed ut perspiciatis unde omnis iste</h1>
      <div class="post_image">
        <img src="images/post1.jpg" alt="post1" />
        <div class="meta_tag_comment">
        <p><a href="#">Commenti (10)</a></p>
        <p><small>Author: <a href="#">Leo Miranda</a></small></p>
        <p><small>Tags: <a href="#">football</a>, <a href="#">interview</a>, <a href="#">serie A</a>, <a href="#">serie B</a>, <a href="#">liga</a>, <a href="#">premier league</a></small></p>
        </div>
      </div>
      <div class="post_content">
        <span class="meta_info">Category - 10.07.09</span>
        <p><!--the excerpt--></p>
        <span class="more"><a href="#">Read More</a></span>
      </div>
  </div>
</div>

Here the CSS rules for the “style.css” file.

#left_cont {
    float: left;
    width: 650px;
    margin: 10px 10px 10px 21px;
  }

  #featured {
    width: 600px;
    background: url("images/img_feat_bck_big.png") no-repeat center left;
    margin-left: 20px;
    margin-bottom: 30px;
  }

  #featured_title {
    background: url("images/feat_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 25px;
    margin-top: 5px;
  }

  #news_title {
    background: url("images/news_tit.png") no-repeat center left;
    width: 632px;
    height: 27px;
    margin-bottom: 18px;
  }

  ul.nav {
    float: right;
    left: 360px;
	  width: 225px;
	  padding-top: 3px;
  }

  ul.nav li {
    overflow: hidden;
    padding: 4px 1px;
  }

  ul.nav li a{
	  display: block;
	  height: 60px;
	  color: #333;
  }

  ul.nav li a:hover{
    outline: 1px dotted #ca5235;
  }

  ul.nav li img {
	  float: left;
    margin: 4px;
    padding: 5px;
    width: 75px;
    height: 40px;
  }

  span.imag_list {
  	 float: left;
     background: url("images/img_feat_bck.png") no-repeat center left;
     width: 95px;
     height: 58px;
  }

  span.title_list {
    color: #ca5235;
    font-size: 11px;
    font-weight: bold;
  }

  span.meta_info_list {
    color: #75a7b4;
    font-size: 10px;
    font-weight: bold;
  }

  .featured_content {
	  width: 350px;
    height: 205px;
  }

  .featured_content img {
	  padding: 9px 8px 8px 8px;
  }

  .featured_content .info {
    position: relative;
	  top: -61px;
    left: 5px;
	  height: 50px;
	  width: 340px;
	  margin: 0 3px;
	  background: url("images/transparent-bg.png");
	  overflow: hidden;
  }

  .info h2 {
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
    padding: 5px;
  }  

  .info h2 a {
    color: #d8d7d7;
  }

  #post_container, #post_container1, #post_container2 {
    margin: 0 23px 30px 23px;
    clear: both;
    min-height: 220px;
    background: url("images/post_sep.png") no-repeat bottom right;
  }

  .post_image {
    float: left;
    margin: 10px 25px 13px 15px;
    width: 201px;
  }

  .post_image img {
    border: 1px solid #75a7b4;
  }

  .meta_tag_comment {
    padding: 3px;
    background: #75a7b4;
  }

  .post_image p {
    font-size: 10px;
    color: #fff;
    padding: 3px;
  }

  .post_image p a {
    color: #fff;
  }

  .post_image p a:hover {
    border-bottom: 1px dotted #fff;
  }

  .post_content {
    margin-top: 15px;
  }

  span.meta_info {
    padding: 5px;
    background: #75a7b4;
    color: #fff;
    font-size: 14px;
  }

  span.meta_info a {
    color: #fff;
  }

  .post_content p {
    margin: 15px 0 10px 0;
    font-size: 12px;
    line-height: 20px;
    padding-left: 241px;
  }

  span.more {
    position: relative;
    right: 293px;
    float: right;
    margin-bottom: 10px;
  }

  span.more a {
    font-size: 12px;
    color: #ca5235;
    font-weight: bold;
  }

  span.more a:hover {
    border-bottom: 1px dotted #ca5235;
  }

Step 5 – Activate Slider Tabs Effect

Now we download the minified package of the framework from the official download page and also the UI package (select UI Core, Tabs and Effects Core).

We copy the two files (”jquery-1.3.2.min.js” and “jquery-ui-1.7.2.custom.min.js”) in “js” folder. To use the power of jQuery for featured news box we call the library from the “index.html” with the following lines of code between head tags:

<head>
  [...]
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	[...]
</head>

We place this code in “index.html” (after <body>) to activate tabs:

	<script type="text/javascript">
	$(function() {
		$("#featured").tabs({ fx: { width: 'toggle', opacity: 'toggle' } }).tabs("rotate", 6000, true); });
	</script>

and this in css style file:

.ui-tabs-hide { display: none !important; }

Step 6 – Right Container, the sidebar

For the sidebar we use only an image for the title background (general back image is in the main container).
SportNewsPvm

This is the markup.

<div id="sidebar">
    <div class="side_cont">
    <h2>Sponsor</h2>
      <div class="adv">
	       <a href="#"><img src="images/pvmban125.jpg" alt="pvm" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/ads.gif" alt="Advertisement" /></a>
	       <a href="#"><img src="images/pvmban2504.jpg" alt="Advertisement" /></a>
	    </div>
    </div>

    <div class="side_cont adv">
    <h2>BlogRoll</h2>
    <ul>
      <li><a href="#">Sport Magazine - Resources for Sport Lovers</a></li>
      <li><a href="#">Football Mag - We Play Football</a></li>
      <li><a href="#">BuzzerBeater Magazine - Basket Fans</a></li>
      <li><a href="#">Premier Paper - Premier League News</a></li>
      <li><a href="#">European Sport - News from Europa</a></li>
      <li><a href="#">Focus on Carling</a></li>
      <li><a href="#">NBA News - Do you wanna play?</a></li>
      <li><a href="#">Road to South Africa 2010</a></li>
      <li><a href="#">Volley World League</a></li>
    </ul>
    </div>

    <div class="side_cont adv">
    <h2>Most Read Articles</h2>
    <ul>
      <li><a href="#">Nisi ut aliquid ex ea commodi consequatur?</a></li>
      <li><a href="#">Nam libero tempore, cum soluta nobis</a></li>
      <li><a href="#">At vero eos et accusamus et iusto odio</a></li>
      <li><a href="#">Nemo enim ipsam voluptatem quia voluptas</a></li>
    </ul>
    </div>
  </div>

Right now we write the css rules.

#sidebar {
  float: left;
  width: 335px;
}

.side_cont {
  background: url("images/side_tit1.png") no-repeat top right;
  margin-bottom: 25px;
  padding-right: 35px;
  padding-left: 20px;
  width: 280px;
  font-size: 12px;
  line-height: 18px;
}

.side_cont h2 {
  font-size: 20px;
  color: #fff;
  padding-top: 3px;
  margin-bottom: 20px;
}

.adv {
  margin-top: 37px;
}

.adv img {
  margin: 0 10px 10px 0px;
  border: 1px solid #ccc;
}

.side_cont ul {
  margin-bottom: 15px;
}

.side_cont ul li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: block;
}

.side_cont ul li a {
  color: #333;
  padding: 10px 0;
}

.side_cont ul li a:hover {
  color: #ca5235;
}

.side_cont ul li:hover {
  background: #e1e1e1;
}

Step 7 – Footer

Below the footer background, the markup and the style.
SportNewsPvm

<div id="footer">
<p>SPORT NEWS PVM MAGAZINE 2009 - Creative Common License. It's a free template for you!</p>
<p>It's a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">valid CSS</a>
</p>
</div>

#footer {
  background: url("images/bck_foot.png") no-repeat top left;
  height: 113px;
  width: 1030px;
  margin: auto;
  padding-top: 48px;
}

#footer p {
  font-size: 12px;
  text-align: center;
  padding: 2px;
  color: #666;
}

#footer p a {
  border-bottom: 1px dotted #666;
  color: #666;
}

Stay tuned, the next step is WordPress Theme

Yes, the next step for SportNewsPvm is WordPress Code. Soon a new post where we’ll learn the basic operations to create a WP theme, then SportNewsPvm WordPress Theme will be released.

35 Comments

Leave Your Commment
RSS Feed

Log in to Reply

Mika Steve
July 13, 2009 at 9:40 am
Waiting for Wp theme… I say FANTASTIC!

Great work, thanks!
Log in to Reply

Vikash Dhanakar
July 13, 2009 at 9:40 pm
Thanks Piervincenzo Madeo.
This post will boost up the woordpress theme user to built up their own them, or they can try some more code with your code help and implementation :)
The way of explaining is really softy.
Thanks
Log in to Reply

piervix
July 13, 2009 at 11:01 pm
@Vikash Dhanakar, @Mika Steve: thanks guys!
Log in to Reply

warzazi
July 15, 2009 at 1:26 am
waw .. !!
that’s amazingly great ..!
great work and nice job piervix :)
Log in to Reply

piervix
July 15, 2009 at 12:25 pm
@warzazi: thanks!
Log in to Reply

Julian
July 25, 2009 at 10:28 am
nice work ;)
So when you finish this theme? :D
the theme will be free?
Log in to Reply

piervix
July 25, 2009 at 11:11 am
@Julian: The theme will be released in August and yes it will be absolutely FREE!
Log in to Reply

Julian
August 2, 2009 at 11:47 pm
and a date for the launch?
I would be very delighted to see this theme running on my blog :D
Log in to Reply

welshstew
October 8, 2009 at 6:19 pm
fantastic walk through and great design.
has the wordpress theme been released yet? you mentioned August but I can seem to find it on your site.
Log in to Reply

piervix
October 8, 2009 at 6:29 pm
I apologize, but the the development is in pause. I’m damned busy. I hope to release SPN Theme during the next weeks…
Log in to Reply

welshstew
October 8, 2009 at 6:55 pm
Sweet, I look forwarding to seeing it.
Log in to Reply

FreshArticles
February 9, 2010 at 1:42 am
no updates on the SPN Theme?
Log in to Reply

jeprie
March 3, 2010 at 7:21 am
where’s the tutorial on creating wptheme? i’ll be waiting for it.
Log in to Reply

koijam
January 7, 2011 at 1:48 am
Nice Tutorials. waiting for the wordpress coding tutorials.
Log in to Reply

http://www.devlounge.net/publishing/things-to-consider-when-using-wordpress-as-a-cms
February 10, 2011 at 9:17 am
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Log in to Reply

http://www.quandtnet.de/sites/promotional/2010/mos-wanted/
February 10, 2011 at 9:58 am
Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!
Log in to Reply

outdoor string lights
February 13, 2011 at 1:21 pm
Thanks so much for giving everyone an extremely terrific possiblity to read in detail from here. It’s always very terrific and jam-packed with a good time for me personally and my office mates to search your web site particularly 3 times a week to read the newest issues you will have. And lastly, I am actually impressed considering the unique hints you give. Selected two ideas on this page are completely the most beneficial I have ever had.
Log in to Reply

zero friction marketing
February 19, 2011 at 4:48 am
We extremely appreciate your site post. You will discover dozens of techniques we could put it to really good use while using a minimum of effort with time and hard earned cash. Thank you so much pertaining to helping make the post reply many problems we have had before now.
Log in to Reply

Free Articles
February 20, 2011 at 9:11 pm
Hey, very nice blog! Beautiful and Amazing. I will bookmark your blog and take the feeds also
Log in to Reply

best ways to get pregnant
February 21, 2011 at 11:32 am
I think I have a problem here
Log in to Reply

Natural Ways to Increase Fertility in Women
February 21, 2011 at 12:57 pm
hei, what’s going on here?
Log in to Reply

scrapebox
February 21, 2011 at 10:06 pm
Thank you taking the time to write this!
Log in to Reply

Lorretta Keehner
February 23, 2011 at 8:06 am
It’s appropriate time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or tips. Perhaps you could write next articles referring to this article. I desire to read more things about it!
Log in to Reply

cytosport 100 whey
August 16, 2011 at 10:17 am
This will be a great web site, will you be interested in doing an interview about just how you created it? If so e-mail me!