The theme has a two-columns layout with an unique soft grunge design and a nice featured news section, it includes many mordern qualities to create a nice sports blog/magazine. Sports News PVM is free to use in private and commercial projects because we love our readers.

Download Sports News PVM Theme for free

The theme is released under GNU General Public License. You can use it for all your web projects for free, without any restrictions and you may modify the theme as you wish. So if you like this resource for WordPress lovers, spread the word with a link to this article. Below you can download the theme + PSD source (.zip, 1.6 Mb – the font for the logo is available on Dafont: Hollywood Hills). You can also see the live preview of the our first free WordPress theme.

More Screenshots

Below you’ll find more screenshots of the theme. We hope you like the final result of our work.

Header Particular

Featured News Box

Post Container

More Information

The theme is packed full of nice features to encourage the readers to explore new posts an sections. Read below to know additional information on this freebie.

Features

• 1. Modern and beautiful web design
• 2. Tableless design and 100% CSS-based layout
• 3. Two columns of fixed width
• 4. Support post thumbnail images for 2.9
• 5. Widget Ready
• 6. XHTML 1.1 Transitional valid
• 7. The package also include the PSD-source files (logo included)
• 8. Commented CSS and theme PHP files for customization
• 9. Multi-browser compatibility. Tested under modern w3c compliant browsers Firefox 3, Safari 4, IE8, IE7 and Google Chrome 3

Installation

• STEP 1. Extract the files it contains. You need to preserve the directory structure in the archive when extracting these files
• STEP 2. Upload the theme to your /wp-content/themes/ directory
• STEP 3. Now go to Appearance >> Themes and activate the “Sports News PVM” theme
• STEP 4. Go to Appearance >> Sports News PVM Options and customize the theme

Sports News PVM Theme Options

• 1. Enable/Disable Featured news box in home page and choose the tag for featured posts
• 2. Show/Hide Ads section in the sidebar and customize all necessary URLs (images and links) and the title
• 3. Add your Feedburner link and your profiles on Social networks (Facebook, Twitter, Delicious, etc…)

Post Thumbnails

• Normal post thumbnail – As said the theme supports the new post thumbnail image system of Wordpress 2.9 and to use this feature, you must be within the post editing screen of your WordPress admin. Here, you can see a new meta box labeled “Post Thumbnail”. There is a link to “Set thumbnail,” which allow you to use the media uploader to load a new image. Once uploaded the image you can click on “Use as thumbnail” to add your thumbnail.
• Featured post thumbnails – For featured posts you can upload the images (big and small) to your site using the image upload feature on the post edit screen (in your WordPress admin panel).
  Once uploaded your images, scroll to the bottom of the post edit page and look for the “Custom Field” panel. Click on “Enter new” and type the word “feat_img” (big image) into the “Name” input field in your dialog box. Paste the URL to your image in the “Value” textarea input field of your custom fields dialog box and click the “Add custom field” button. Then repeat the operation: type the word “feat_img_sm” (small image) into the “Name” input field in your dialog box and paste the URL to your image in the “Value” textarea input field.

Size For Thumbnails

• Normal post thumnail image: size 200×200 px
• Featured post big image: size 340×189 px
• Featured post small image: size 75×40 px

Agreements

• 1. You can use them on as many domain names as you wish
• 2. You may use them for your clients’ projects / websites. Number of projects is not limited
• 3. You may not claim intellectual and exclusive ownership to any of the themes
• 4. You may not sub-license the original themes and their individual files to and with anyone else, unless a specific license within the theme states otherwise
• 5. You may modify them. However, you may not modify and then resell, unless the modified versions are drastically different from the originals
• 6. We reserve the right to refuse, cancel, or suspend service at our sole discretion and the right to change or modify these terms with no prior notice

Credits
All the icons which are used in “Sports News PVM” is free for use and Designed by following references: Socialize Icon Set, version 1.0 – Functions

There are some tricks that allow us to boost our WordPress installation in a few minutes. Below there is a list of useful tips to secure and speed up your blog system. Take your time for reading, they are very simple and they could be helpful to save your time in the future.

Make Back-Up

A simple and basic rule that can save you in many cases. Remember to frequently back up your website root folder (with all files) and database, so you can restore your site anytime.

You can use PhpMyAdmin to make a quick copy of your SQL DB. Enter in your database structure, go to export, select all tables in SQL format (don’t forget to check “Add DROP TABLE”, I also use a GZIP compression).

Use the last version of WordPress

It’s essential to update your WordPress to fix bugs and security issues. You can use Automatic Upgrade (Tools -> Upgrade in your admin area), or a Three Step Manual Upgrade, to know more about how to stay updated you can read Upgrading WordPress.

Use a Solid Password and Protect your WP-Admin Folder

WordPress installation creates a default admin user with a random password. Are you still using the random default password? Change it and choose a new strong password, immediately!
It is a good thing to change the default username for the admistrator. In Users section of the admin area you can manage your profile.

Protect the wp-admin Directory with a server-side password. Put a .htaccess file in the directory that you want to protect. Below the code of the .htaccess.

AuthName "WP-Admin"
AuthType Basic
AuthUserFile /path/to/passwd  #(the path to .htpasswd)
Require valid-user

Use htpasswd to create a passwd file (.htpasswd) and put it in a non-web accessible directory (htpasswd -c /path/to/passwd username).

Protect wp-config.php

First of all you should set up secret keys in your wp-config.php. Why? Begining from the 2.6 version, WordPress includes a new set of security features for passwords and password hashing and cookie security and, if you want to increase the security of your site, you can use this generator to add secret keys.

define('AUTH_KEY', 'put your unique phrase here');
define('SECURE_AUTH_KEY', 'put your unique phrase here');
define('LOGGED_IN_KEY', 'put your unique phrase here');
define('NONCE_KEY', 'put your unique phrase here');

Wp-Config contains sensible data and for this reason you must protect this file in your .htaccess.

# protect wpconfig.php
<files wp-config.php>
Order deny,allow
deny from all
</files>

Block Search Engine Access to the WP- Folder

The WP- folders don’t need to be indexed by search engines, so to block their access to these system folders you can write in your robots.txt file the following line.

Disallow: /wp-*

Bad Behavior Plugin

Bad Behavior complements other link spam solutions by acting as a gatekeeper, preventing spammers from ever delivering their junk, and in many cases, from ever reading your site in the first place. This keeps your site’s load down, makes your site logs cleaner, and can help prevent denial of service conditions caused by spammers.

Bad Behavior also transcends other link spam solutions by working in a completely different, unique way. Instead of merely looking at the content of potential spam, Bad Behavior analyzes the delivery method as well as the software the spammer is using. In this way, Bad Behavior can stop spam attacks even when nobody has ever seen the particular spam before.

Login Lock-Down Plugin

Login LockDown tabulates the IP address and timestamp of every failed WordPress login attempt, so, when a certain number of attempts are detected within a short period of time from the same IP range, the plugin disables all requests from that range. This can prevent brute force password attack.

Secure WordPress

Secure WordPress is a little help to secure your WordPress installation. It removes Error information on login page; adds index.html to plugin directory, removes the wp-version, except in admin area.

Optimize Images on your Server

Images are important for the great impact on the design of a website, but if the pictures on our webpages aren’t optimized we could have some troubles with the load time and bandwith of the website.

So you should use a good compression for your image, depending on your software, to find the right balance between quality and dimension of the file.
Rcently I’ve read a good article on Web Designer Wall about the image’s compression using two different software, Fireworks vs Photoshop Compression.

Enable GZIP Compression

Compression is a quick and effective way to save bandwidth and speed up your website. Apache allows the compression through mod_deflate and adding the following code in you .htaccess you will enable the GZIP compression of your webpages.

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Test your compression using GZIP-Test.

Minify CSS and Compress Javascript files

To minify your CSS (and speed up your website), you can use one of the available tools, such as Styleneat, or php library, such as Minify.

Something else to do is to put all of your JavaScript into a single file and load it in the bottom of the page (footer.php).

Yo can use Firebug with Page Speed on Mozilla Firefox to test and optimize your webpages.

Reduce the Number of Links to External Websites

External websites and scripts can take a lot of time to load depending on the server connection. You should limit widgets and connections to other sites, in fact, reducing the number of hostnames from which resources are served, we can minimize the number of DNS resolutions and the RTT delays.

Caution! Reducing the number of unique hostnames has the potential to reduce the parallel downloads in the page and this may increase response times. You should find the right balance.

Page Speed can help you in this “mission”.

Optimize and Repair Database

Periodically you should optimize your database. go to the Database Structure for your WordPress installation, check all tables, select the Optimise Tables option and repair.

There is a plug-in that allows the database optimization from the admin area of WordPress, WP-Optimize.

Turn Off Post Revisions

To turn off Post Revisions feature (if you don’t need it), add this following code to wp-config.php:

define('WP_POST_REVISIONS', false);

Remove Unused Plugins

Browse your list of plugins you’re using and try to optimize your WordPress deleting unused plugins. If you have more than 15 plugins active on your blog, ask yourself if you really need them and delete the less useful ones.

Remember this words, many things don’t need plugins but ten minutes of reflection, php skills, fantasy to integrate directly into your theme a great feature!

WP Super Cache Plugin

WP Super Cache Plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

The steps are clear and in this post you can find some useful tutorials and excellent readings to really become a star as WordPress Themes Designer.
I tested many of the following tutorials, and they help me to improve my skills. My brain thanks.

First Step: Design Your Layout in Photoshop

Below there are the top tutorials for learning how to design a perfect web-layout. They show how to create the essential elements for a WordPress-based website using amazing techniques in PhotoShop.

How to Make an Impressive Blog Layout in Photoshop

Create an Elegant Photoshop (PSD) Template for Wordpress

Create a wordpress interface in Photoshop

How to Create a Unique Wordpress Theme

Creating a tech blog layout in Adobe Photoshop

Wordpress Layout #5

Create a Vibrant Modern Blog Design in Photoshop

Create a Magic Night Themed Web Design from Scratch in Photoshop

Creating A Professional Magazine Web Layout

How to Create a Sleek and Textured Web Layout in Photoshop

How to Create a “Worn Paper” Web Layout Using Photoshop

#71: Building a Website (1 of 3): Photoshop Mockup

Second Step: PSD-to-HTML Conversion

I understand, maybe you are bored switching from Photoshop to a blank page that needs your skills to become a perfect (x)html/css web-layout. Don’t worry, below you can find more information to speed and to improve your techniques in psd-to-html conversion.

How to Convert a Photoshop Mockup to XHTML/CSS

Styling Post Headings That Stick Out

Animated Navigation with CSS & jQuery

Tips for Developing Semi-Liquid Layouts

#72: Building a Website (2 of 3): HTML/CSS Conversion

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

MakingSEO coded, Free CSS Template with PSD-to-HTML tips

How to Code a Grunge Web Design from Scratch

Third Step: WordPress Rocks!

You are ready “to get in the zone”. Read the following posts to discover the techniques and tricks to build a great WordPress theme.

#73: Building a Website (3 of 3): WordPress Theme

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

How to Create a Wordpress Theme from Scratch

How to write your own wordpress theme

Build a Newspaper Theme With WP_Query and the 960 CSS Framework

Styling Your Wordpress Comments

So you want to create WordPress themes huh?

Four Step: Hacks to Improve your Theme

Customize your website using the tips collected below. You’ll find some fantastic suggestions on how to boost your website.

The Ultimate Wordpress 2.8 Optimization Guide

Display Thumbnails For Related Posts in Wordpress

Displaying Author Meta Information in Wordpress 2.8

How to : Make a control panel for your wordpress theme

Display Subcategories on Category Pages in WordPress

How To Rearrange Comments in WordPress – Display the Most Recent One on Top

WordPress loop: Get posts published between two particular dates

Wordpress tutorial: Blog posts in different columns

Multiple WordPress Loops Explained

Extra: Resources and Utilities

Build your own set of tools to speed up the the development of your website proudly powered by WordPress.

Wordpress – Lorem Ipsum Test Post Pack

WordPress PSD Framework

Blank Wordpress Themes

Thematic, A WordPress Theme Framework

Free HTML 5 WordPress Theme

ThemeHybrid is about users, quality and WordPress

WP Framework, A blank WordPress Theme Framework

Whiteboard – A Free Wordpress Theme Framework

Extra: Other Useful Articles and Roundups

Below you’ll see a collection of other great articles and roundups to find other awesome resources.

Wordpress Posts Explained…

WordPress Theme / CSS Techniques

Power Tips For WordPress Template Developers

22 Mixed Quality Wordpress Hacks

135+ Ultimate Round-Up of Wordpress Tutorials

300+ Resources to Help You Become a WordPress Expert

Top 50 Wordpress Tutorials

Personalise your WordPress Weblog

Best of the Best? WordPress.org!

All-In-One! Browse Wordpress.org to discover the secrets behind the state-of-the-art publishing platform.

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.

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.

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.

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.

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

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.

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.

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

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.

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

With this quick post I’ve collected ten high quality WordPress Themes that use useful JavaScript solutions for some elements of the their design.
The following themes are good for Magazine and Corporate web-projects and they are FREE!

WordPress Magazine and Corporate Free Themes

A collection of 10 high-quality WP-Themes for your next on-line project!

WP-CODA

Preview | Download

SchemerMag Theme

Preview | Download

Magazeen

Preview | Download

Gamezine

Preview | Download

Milano

Preview | Download

ZinMag Tribute

Preview | Download

E-channel

Preview | Download

Magaling

Preview | Download

Scarlett

Preview | Download

Freemium

Preview | Download

See in the bottom of my sidebar and you’ll understand. I’m convinced that sharing my updates on social web-site the reader could know more about me and my thinking and for this he could be encouraged for returning on my blog.


In this post I explain how I’ve realized the Daily Activities Widget with the stream of my updates on Twitter, Facebook, Digg and Delicious. The following information are valid only using WordPress.

To reach our purpose we use Simple Pie.
What is Simple Pie? It is a code library, written in PHP, intended to make it easy for people to manage RSS and Atom feeds. Imagine? It’s so!

I suggest to you a backup of the theme folder in WordPress because we’ll modify sidebar.php, style.css and we’ll add the folder for Simple Pie Cache and the Library itself.

How to use Simple Pie

First download the Simple Pie Library, after unzip the package and copy simplepie.inc in theme folder in your WordPress installation (presumably /wp-content/themes/yourtheme). Create a new folder called cache, this useful for caching system of our PHP Library that optimize the loading process of our web-page (learn more here “How does SimplePie’s caching system work?”).

Now add the following code in the top of sidebar.php to “activate” the RSS reader.

<?php
    //get the simplepie library
    require_once('simplepie.inc');
    //grab the feeds
    $feed = new SimplePie();
    //our list of RSS
    $feed->set_feed_url(array(
    'http://feeds2.feedburner.com/pvmgarage',
		'http://twitter.com/statuses/user_timeline/32445507.rss',
		'http://feeds.delicious.com/v2/rss/piervix',
		'http://digg.com/users/piervix/history.rss',
		'http://www.facebook.com/feeds/share_posts.php?id=1658021339&viewer=1658021339&key=41c698e7f8&format=rss20',
    ));
    //enable caching
    $feed->enable_cache(true);
    //complete path for caching system
    $feed->set_cache_location('/web/htdocs/www.pvmgarage.com/home/en/pvmenglishcontent4984/themes/pvmgarage/cache');
    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1500);
    //init the process
    $feed->init();
    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();
?>

Watching code

See the previous code and observe the array of RSS url. You can find them in your settings.
Activate with true boolean the cache and put the complete path of your cache folder in $feed->set_cache_location.
Remember that the folder for caching must be writable (chmod 777), read more on Change the file permissions to be server-writable?

Insert Widget on Sidebar

Now insert the following code to add a widget in the sidebar.php of WordPress.

<div class="sidecontdaily">
<!--<h2>My daily Activities</h2>-->
<ul class="daily">
  <?php foreach ($feed->get_items(0, 5) as $item): ?><!--show 5 entries-->
  <li>
    <div class="info">
     <p><span class="date"><?php echo $item->get_date('j M Y'); ?> | <?php echo $item->get_date('g:i a'); ?></span></p><!--date and time-->
    </div>
    <img src="<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>" class="icon" alt="" /><!--icon of social web-site-->
    <h5 class="dailycont"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h5><!--title-->
    <p><span class="linkfeed"><a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a></span></p><!--social web site-->
    </li>
  <?php endforeach; ?>
</ul>
</div>

Watching code

In this example we’re simply going to display five recent headlines, for this reason we insert <?php foreach ($feed->get_items(0, 5) as $item): ?>. Below you can see methods.

• <?php echo $item->get_date(‘j M Y’); ?> returns the date;
• <?php echo $item->get_date(‘g:i a’); ?> returns hour;
• <?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?> returns social web site favicon;
• <?php echo $item->get_permalink(); ?> returns entry url;
• <?php echo $item->get_title(); ?> returns entry title;
• <?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?> returns your profile url;
• <?php $feed = $item->get_feed(); echo $feed->get_title(); ?> returns your profile name;

Style it!

Now modify the style.css. In my theme I’ve added the following code:

/*Simple Pie Style*/
.sidecontdaily {
margin: 0 0 15px 40px;
width: 278px;
background: url(immagini/dailyact1.png) no-repeat top;
}

ul.daily {
list-style: none;
padding: 90px 10px 50px 25px;
background: url(immagini/dailyact2.png) no-repeat bottom;
}

ul.daily li {
padding-bottom: 35px;
}

h5.dailycont {
font-size: 12px;
}

h5.dailycont a {
color: #69695f;
}

h5.dailycont a:hover {
color: #d54e21;
}

.info {
padding: 10px 0;
}

span.date {
background-color: #69695f;
color: #eee;
padding: 1px 3px;
font-size: 10px;
font-weight: bold;
}

img.icon {
float: left;
padding: 3px;
}

span.linkfeed {
background-color: #69695f;
float: right;
padding: 1px 3px;
margin-top: 3px;
}

span.linkfeed a {
color: #eee;
font-size: 10px;
font-weight: bold;
}

Conclusion and Source Files

With this hack we add a little box where we show our daily on-line activities, you can learn more about the use of Simple Pie in these articles: Easy feed reading with SimplePie; How to Create a Lifestream of Your Online Activities; Adding RSS Content with SimplePie.

Recent Posts with NewsTicker Effect

Step 1 – Creation of the module style

The following portion of code contains the style CSS of the recent-post-newsticker module. We can insert the following code directly in the main style sheet of the template (style.css) or create a new file .css (newsticker.css).

#listticker{/*general settings*/
text-align:left;
height:220px;
width:270px;
overflow:hidden;
padding:6px 6px 6px 6px;
}
#listticker ul{/*list general settings*/
border:0;
margin-bottom:0;
padding:0;
list-style:none;
background:#f4f4f4;
}
#listticker li{/*single list element settings*/
height:40px;
padding:5px;
list-style:none;
margin-top:5px;
border:dashed 1px #dddddd;
background:#ffffff;
}
#listticker a{/*link settings*/
display:block;
color:#857d59;
margin-bottom:0px;
font-weight:bold;
float:left;
font-size:11px;
}

This code is customizable to follow the design of your blog. With the example configuration we will obtain the following one rendering.

Now we create a folder post_newsticker where insert the eventual style sheet file if it has been chosen this road. Inside the folder post_newsticker we insert also the file jquery.js, it referers to JQuery base library, the Javascript framework used to recreate the sliding effect.
Now we are ready to transfer on the server and just inside the directory of template graphical the folder containing post_newsticker files.

Step 2 – Modification of the header.php file

With this modification we recall the files previously loaded. The following portions of code will be inserted inside of the tag head. If you choose to use a dedicated css file for the style insert this:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); >/post_newsticker/newsticker.css" type="text/css" />

Now insert the jQuery library reference.

<script src="<?php bloginfo('template_directory'); >/post_newsticker/jquery.js" type="text/javascript">
</script>

Therefore insert the javascript code in order to realize the sliding effect on the articles list.

<script type="text/javascript">
$(document).ready(function(){

	var first = 0;
	var speed = 500;
	var pause = 3000;

		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = '
	<li style="display:none" mce_style="display:none">'+first+'</li>
';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);
});
</script>

With the speed and pause variables we can modify respective element refreshing velocity and the pause between the various refreshments. To this point we must connect the n last posts of the blog to the list elements.

Step 3 – Modification of the sidebar.php file

In order to obtain the list of n last posts we can use the native functions in Wordpress that refer to posts management.

<h2> Articoli recenti</h2>
<ul id="listticker">
 <?php
 $lastposts = get_posts('numberposts=10');
 foreach($lastposts as $post) :
    setup_postdata($post);
 ?>
 <li>
 <a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>

The code should follow the style of the page structure. The ul element have id=”listticker”.
We define the n number (that the newsticker list contains) of the posts with “numberpost” variable.

End

To this point the recent-post-newsticker has been correctly installed.

A great part of the material for this module has been recovered on Woork (Antonio Lupetti’s tech blog) in the following article ” How to implement a news ticker with jQuery and ten lines of code “.

If you have any suggestions or ideas to improve the module write a comment to the post.

For these reasons you might want to check out the following wonderful and practical examples of data post positioning and design.

Burger King Studio

CSS Tricks

Kulturbanause

Matthias Schuetz

Jono Buchanan

For a Beautiful Web

Razvan Stavila

WebDesigner Depot

Mirificam Press

Agenda Oeste

Blog Medianotions

The theme has been tested in all the major Web browsers: Firefox, IE6+, Opera, Safari, Chrome and it is released for Wordpress 2.7+.

This the main features for the WP theme:

• Widgetized Sidebars;
• Customized Error 404 Page;
• Gravatar support for comments;
• Author Section in the Sidebar;
• and more…

Web-kreation, OneRoom Wordpress Theme

Preview | Download

Read about the license. More information for a useful usage.