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

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 (36)»

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.
SportNewsPvm

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
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

Download Source
Download Source

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.

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

36 Comments

  1. Mika Steve

    Waiting for Wp theme… I say FANTASTIC!

    Great work, thanks!

  2. Vikash Dhanakar

    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

  3. piervix

    @Vikash Dhanakar, @Mika Steve: thanks guys!

  4. warzazi

    waw .. !!
    that’s amazingly great ..!
    great work and nice job piervix :)

  5. piervix

    @warzazi: thanks!

  6. Julian

    nice work ;)
    So when you finish this theme? :D
    the theme will be free?

  7. piervix

    @Julian: The theme will be released in August and yes it will be absolutely FREE!

  8. Julian

    and a date for the launch?
    I would be very delighted to see this theme running on my blog :D

  9. welshstew

    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.

  10. piervix

    I apologize, but the the development is in pause. I’m damned busy. I hope to release SPN Theme during the next weeks…

  11. welshstew

    Sweet, I look forwarding to seeing it.

  12. FreshArticles

    no updates on the SPN Theme?

  13. jeprie

    where’s the tutorial on creating wptheme? i’ll be waiting for it.

  14. koijam

    Nice Tutorials. waiting for the wordpress coding tutorials.

  15. http://www.devlounge.net/publishing/things-to-consider-when-using-wordpress-as-a-cms

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  16. http://www.quandtnet.de/sites/promotional/2010/mos-wanted/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  17. outdoor string lights

    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.

  18. zero friction marketing

    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.

  19. Free Articles

    Hey, very nice blog! Beautiful and Amazing. I will bookmark your blog and take the feeds also

  20. best ways to get pregnant

    I think I have a problem here

  21. Natural Ways to Increase Fertility in Women

    hei, what’s going on here?

  22. scrapebox

    Thank you taking the time to write this!

  23. Lorretta Keehner

    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!

  24. cytosport 100 whey

    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!

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US