To understand why your site can be harmed by affiliate links, promotion links, and other types of links commonly found in many free WordPress themes, we must discuss why these types of links are typically bad. Affiliate links are special links that most anyone can obtain to sell products. When a product is sold via an affiliate’s link, the affiliate receives a monetary kickback for the sale, usually a percentage of the sale or a fixed fee. A promotion link is similar, but the author of the theme typically purchases the link via an offer that is fixed in price. In both situations, the theme’s author has no control over the content which the website links to, making the site potentially harmful.

While these sites seem fine, many affiliate links contain content that may not agree with your website’s content. Imagine a family-safe website with links pointing to adult offers such as pornographic material or drug items. Because you and the theme author both lack any control over what type of content is placed on the link, there is great potential that the content can change at any time. The link may look safe to you now, but it may not remain safe in the future. Make sure your WordPress hosting does not contain these types of links.

Affiliate links may also contain websites that promote scam products meant to cheat customers out of money. By linking to this website, your website is endorsing a scam de facto, whether you actually agree with it or not. Since Google allows all web users easy access to product reviews, your visitors will be able to learn very quickly whether your site appears to endorse scam products. Even though you were not the one to originally place the link on your theme and may not personally endorse any type of scam, your website visitors have no way of knowing this. Web hosting companies also do not like to see scam promotions, so your hosting may inadvertently be discontinued for an action you did not even intend.

Bad links in free WordPress themes lead to one more disadvantage to a website. Google and other popular search engines utilize what are commonly referred to as “spiders” that are constantly “crawling” your website and looking at every other page on the Internet, as well. One reason search engines, like Google, do this is to see how many websites link to a particular site. If there are tons of links to one website, Google assumes it is very popular and increases the overall ranking of the webpage. While this may be fine, the reason most affiliate links are placed in free themes is for this reason. By including a bad link in your website’s free theme, the author is trying to increase his or her overall Google ranking to potentially victimize even more web visitors.

Google may catch on to this type of backlinking activity and “punish” websites with links like this by reducing a page’s ranking. If you are using a free theme that includes a link that Google views as unethical or against their terms of service, Google will lower your website ranking or, even worse, “sandbox” your website and make it disappear from Google. Since most web visitors come from Google, you could eliminate your site from any future visits by using a free WordPress theme with these types of links.

In summary, using a free WordPress theme that contains affiliate links, promotion links, and other types of links that could be viewed as nefarious is simply not a good idea. Your website visitors may be turned off or offended by the link, you cannot control the linking page’s content, and Google may very well even punish your website and remove it from search listings. In some WordPress themes you can go into the theme files, found in the wp-content/themes/ folder of your website, and edit the file that contains the bad link. If not, you may want to simply find a new theme that doesn’t contain bad links.

Bio:
This article has been penned down by Joanna and Laura who are part of webhostingsearch.com from over 2 years and been in the web industry from quite some time now.

Before start your own WordPress Theme, you may need to know how to install WordPress. Just in case if you don’t know.

1. How to Install WordPress on Your Own Server + Video Tutorial

Michael D. Pollock shows you how to install WordPress on your own server via step by step tutorial and screencast.

2. Multiple WordPress Installations Using a Single Database

Streamline your WordPress set-up by installing multiple instances of WordPress on the same database.

3. My WordPress Install Process

David Peralty is sharing his experience on how to install WordPress and break down the process into step by step tutorial.

4. Leopard: How to Install WordPress

Installing a local version of wordpress is one of the first things most designers and developers need to do. Leopard adds many new wrinkles to this task. These steps should get you up and running as painlessly as possible on OS X 10.5.

Theme Tutorials

I don’t know why, I think the most wanted tutorial from WordPress is designing a theme.

5. So you want to create WordPress themes huh?

A series of tutorials guiding you to create your very own WordPress theme. I think this quite popular.

6. How To Create WordPress Themes From Scratch

A series of tutorial guiding you to create a WordPress theme from scratch. Ya, this is by me. This is a little bit advance because there is a section involved creating featured post.

7. Make your Own WordPress Theme – Part 1

Another series of tutorial guiding you to create a WordPress theme. This tutorials break into 7 parts, quite details.

8. Stop Tweaking! Create Your Own WordPress Theme

This is a very basic tutorial, I recommend to anyone how are very new to WordPress but wish to learn how to create WordPress theme.

9. Premium WordPress Theme Design Part 1 – The Photoshop Mock Up

As you can see from the title, this is something premium. So, make sure you have enough knowledge to continue reading…

10. How to Create a WordPress Theme from Scratch

Nettuts present this awesome tutorial (written by Sam Parkinson).

11. How-To: Create a WordPress Theme in 5 minutes

This is hardcore, in 5 minutes. But it is quite complete, I admit that.

12. WordPress for designer

This is my favorite tutorial, it is fun to learn via screencast. Besides, the tutorial is very complete.

13. Complete WordPress Theme Guide

A comprehensive guide on how to install WordPress and customize theme. Also check out the part 2 of this tutorial – Building Custom WordPress Theme.

14. Build a Newspaper Theme with WP_Query and the 960 CSS Framework

15. Designing for WordPress

Chris Coyier of CSS-Tricks has a three-part video series for downloading and installing WordPress, all the way through everything else involved with designing a custom theme. The example theme that is built through the series is a personalized homepage theme.

16. Developing a WordPress Theme

Deziner Folio did a tutorial that covers the basics of the header, sidebar, footer and index files. This one is not as in-depth as some of the others on this list, but it is a good place to get a quicker understanding of theme development.

17. Creating a WordPress Template

A video tutorial series ( part2 and 3) for creating a WP theme using a variety of free tools.

18. How to make a “child theme” for WordPress

A video tutorial.

19. Creating A WordPress Theme

Another nice guide.

20. How to write your own wordpress theme

A very extensive tutorial which covers the basics.

WordPress Theme Hacks and Techniques

Here are some WordPress hacks for you to make WordPress a better blogging tool.

21. Mastering WordPress Theme Hacks and Techniques

By Noupe.

22. WordPress Theme Hacks

A collection of simple WordPress hacks that you’ll find yourself reusing all the time when working with themes.

23. Category Hacks for WordPress Theme Designers

Category Hacks for WordPress Theme Designers by VandelayDesign. Also check out the Category Styling for posts in a certain category using CSS.

24. Multiple Page Layouts in a Single Template

If you’re looking for a more diversified template for sub-pages in a template, check out this quick tutorial for mutiple page layouts in a single template.

25. WordPress as a CMS – Content Management System

Turn WordPress into a real CMS.

Menu And Navigation

Menu is the main part of a web design. It may somehow attract people to navigate, also, easy to navigate is still the key. But nowadays, people want it to be more advance and nice looking!

26. Rounded Corner Tab Menus

Rubique has a quick tutorial on how to use CSS to make rounded corners for your WordPress menus.

27. Using Sliding Doors with WordPress Navigation

The Sliding Doors technique is a great way to utilize CSS and background images to make tabbed navigation. WPHacks shows us how to utilize Sliding Doors to enhance WordPress navigation.

28. WordPress Categories in a Horizontal Drop-down Menu

How to use CSS and Javascript to make a horizontal drop-down menubar.

29. How To: Making a Categories Drop-Down Menu

Making a Categories Drop-Down Menu.

30. Magazine style Horizontal dropdown menu

Magazine alike horizontal dropdown menu. Great one!

31. Dynamic Menu Highlighting

Dynamic menu highlighting is a way to give users a reference point with which to navigate.

Comments

Well, people like to discuss, debate and even fire to each other. So, a nice comment design is necessary.

32. Styling Your WordPress Comments

How to make your comment area looks more standout.

33. Separating Trackbacks from Comments

How to separate trackbacks and comments. I also have the same tutorial here.

34. Adding Recent Comments To Your WordPress Theme

How to display recent comments in the sidebar.

35. Ajax Commenting

Implementing Ajax into comment. Make it more interactive and user friendly.

36. How-to style WordPress author comments

Make author comment more stand out.

37. Separate Comments from Trackbacks

It’s a good idea to separate trackbacks from your comments.

Theme Option Or backend

38. Custom Write Panels in the WordPress Backend

Design blog WeFunction shows us how to create extra write panels for adding extra bits to the “Write” page of the admin area.

39. WordPress as a CMS

WordPress isn’t just a blogging tool, it can also be a CMS with the help of some plugins and theme retooling.

40. Exporting WordPress Data

Learn how to import and export your WordPress posts and comments with this handy screencast.

41. Create an Options Page For Your WordPress Theme

In this article we will be incorporating an options panel for the ‘WordPress Classic’ theme. The methods you learn will allow you to very easily integrate it into an existing theme you’re working on.

42. Create an Options Page For Your WordPress Theme

In this article we will be incorporating an options panel for the ‘WordPress Classic’ theme. The methods you learn will allow you to very easily integrate it into an existing theme you’re working on.

Plugins

43. Your First WP Plugin

Mark Jaquith has a short-and-sweet screencast on how to create your first WordPress plugin in under 5 minutes.

44. How to Write a Simple WordPress Plugin

A step-by-step guide to a simple and fun WordPress plugin.

45. Screencast on Writing a WordPress Plugins

If you’re rather see a visual demonstration of how to write a WordPress plugin, look no further than the Weblog Tools Collection screencast.

46. How to create WordPress Plugin from a scratch

47. How to make a WordPress plugin with less than 20 lines of code

48. How to Make a Social Bookmarking WordPress Plugin – Step by Step

Make a social bookamarking plugin.

Miscellaneous

49. Making Better Use of Your Error 404 Page

50. Creating a dynamic sticky

51. How To Display Ads Only To Search Visitors

52. A custom login page

53. Display Twitter messages in WordPress

54. Allow Users To Submit Blog Post

55. Creating An Automatic Sitemap

Sitemaps help users navigate the site, as well as allow search engines to have quick access to all of your blog’s pages. Here’s a tutorial on how to create an automatic sitemap for your WordPress installation.

56. Build a Dynamic Design Portfolio

A terrific guide on how to utilize the query_posts tag to create a design portfolio with WordPress.

57. Create a User Contributed Link Feed w/ WordPress Comments

If you’re wanting to add a Nettuts+ style link feed, Collis has an excellent tutorial on how to utilize WordPress comments to create the feed.

58. Add a Twitter Field to your Form

How to install the twitip-id plugin to include a field for commenters to leave their Twitter ID.

59. How to Add Photo Captions

Good photo captions aren’t that something that WordPress themes usually come with out of the box. This screencast shows how to correctly add photo captions into your posts.

60. RSS-Only Posts

This tutorial shows you how to create posts that only appear in RSS feeds, in hopes to improve RSS subscriber counts.

61. WordPress SEO

Yaost has a lengthy tutorial on how to squeeze the most SEO out of your WordPress blog.

62. Make a Random Post Button

Adding a random post button is only a SQL query and PHP snippet away.

63. Learn How to Make Your Blog Accessiblen

Most blogs don’t conform to WAI/WCAG standards in terms of accessibility. Learn how to meet these standards with Bruce Lawson’s accessibility hacks.

64. Blog Posts in Different Columns

If you’re wanting a little more advanced look and feel to your blog, try setting the posts to display in different columns.

Notes

Am I missing something? If you have any other good resources about WordPress tutorials, feel free to leave it with your comment. I hope you enjoy this list!

<?php
$size = 'thumbnail';
$images = get_children(array(
'post_type' => 'attachment',
'numberposts' => 1,
'post_status' => null,
'post_parent' => $post->ID,))

foreach($images as $image) {
$attachment=wp_get_attachment_image_src($image->ID, $size);
?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />

get_children() function here will return all the image attachments attached to post (identified by $postID), and assign them to our array $images.
$size is the size of the attachment, you can use “medium” or “full” too.

Apply To Post

Below is the full code in order to display the attachment in front page.

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php if ($images = get_children(array(
	'post_type' => 'attachment',
	'numberposts' => 1,
	'post_status' => null,
	'post_parent' => $post->ID,)))

	foreach($images as $image) {
	$attachment=wp_get_attachment_image_src($image->ID, $size);
?>
<img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> class="alignleft" />
<?php the_content(''); ?>
<?php } else { ?>

	<?php the_content(''); ?>
</div>
</div>

<?php endwhile; ?>

With this, it will check there is any attachment for the post and only the content will be displayed if there is no attachment.

Using The Functions.php

You can also call the function from the functions.php. Firstly, put this code into your functions.php.

function my_attachment_image($postid=0, $size='thumbnail', $attributes='') {
	if ($postid<1) $postid = get_the_ID();
	if ($images = get_children(array(
		'post_parent' => $postid,
		'post_type' => 'attachment',
		'numberposts' => 1,
		'post_mime_type' => 'image',)))
		foreach($images as $image) {
			$attachment=wp_get_attachment_image_src($image->ID, $size);
			?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> /><?php
		}
}

Then call the function in index.php.

<?php while (have_posts()) : the_post(); ?>

	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <a href="<?php the_permalink(); ?>"><?php my_attachment_image(0, 'thumbnail', 'alt="' . $post->post_title . '"'); ?></a>
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
	<small><?php the_time('F jS, Y') ?></small>

	<div class="entry">
		<?php the_content('Read the rest of this entry &raquo;'); ?>
	</div>
	</div>

<?php endwhile; ?>

Advance – Custom Field and Attachment

As we know, not all of us are using WordPress Image Gallery. Some of us may prefer to handle the attachments in a different way. Then I come up with this solution. I am using this function in my one of my premium wordpress theme – “Our Community“.

<?php
while (have_posts()) : the_post();
$img = get_post_meta($post->ID, "img", TRUE); // Declare the custom field for the image
?>

<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-sum box">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

<?php $size = 'thumbnail';
if($img != null or $img != '') { // If there is a value for the custom field ?>
	<img src="<?php echo $img; ?>" alt="<?php the_title_attribute(); ?>" width="150" height="150" /><?php the_content(''); ?>

<?php 	

} elseif ($images = get_children(array( // Check if there is any attachments
	'post_type' => 'attachment',
	'numberposts' => 1,
	'post_status' => null,
	'post_parent' => $post->ID,)))

	foreach($images as $image) {
	$attachment=wp_get_attachment_image_src($image->ID, $size);
	?><img src="<?php echo $attachment[0]; ?>" <?php echo $attributes; ?> />
	<?php the_content(''); ?>

<?php } else { // If there is no custom field value and attachments ?>

	<?php the_content(''); ?>

<?php } ?>
</div>
</div>
<?php endwhile; ?>

Considering the user might using other than WordPress Image Gallery, I have to provide some options for them. Here, the priority will be in using custom field. If there is no value for it, the function will then check for any attachment. Finally, only text will be displayed if neither of them exist.

The Existing Feed File.

<?php
	$last_update = intval(get_option('feed_lastupdate'));
	$now = time();
	if(($now - $last_update) > (60*60*24)) :
		//get cool feedburner count
		$feed = get_option('feed');
		$whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=$feed";

		//Initialize the Curl session
		$ch = curl_init();

		//Set curl to return the data instead of printing it to the browser.
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		//Set the URL
		curl_setopt($ch, CURLOPT_URL, $whaturl);
		//Execute the fetch
		$data = curl_exec($ch);
		//Close the connection
		curl_close($ch);

		$xml = new SimpleXMLElement($data);
		$fb = $xml->feed->entry['circulation'];
		if(!$fb) :
			$fb = 0;
		endif;
		update_option("feed_count", $fb."");
		//end get cool feedburner count

		update_option("feed_lastupdate", $now."");
	endif;

	$feed_uri = get_option('feed');
	if(!$feed_uri or $feed_uri == '') :
		$feed_uri = get_bloginfo('rss2_url');
	else :
		$feed_uri = 'http://feeds.feedburner.com/' . $feed_uri;
	endif;
?>

<a href="<?php echo $feed_uri; ?>" title="Feed Subscriber Count"><?php echo get_option("feed_count");?></a>

Editing

Change this:

$whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=$feed";

Into This:

$whaturl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=$feed";

And this:

$feed_uri = 'http://feeds.feedburner.com/' . $feed_uri;

Into This:

$feed_uri = 'http://feedproxy.google.com/' . $feed_uri;

Full Code:

<?php
	$last_update = intval(get_option('feed_lastupdate'));
	$now = time();
	if(($now - $last_update) > (60*60*24)) :
		//get cool feedburner count
		$feed = get_option('feed');
		$whaturl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=$feed";

		//Initialize the Curl session
		$ch = curl_init();

		//Set curl to return the data instead of printing it to the browser.
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		//Set the URL
		curl_setopt($ch, CURLOPT_URL, $whaturl);
		//Execute the fetch
		$data = curl_exec($ch);
		//Close the connection
		curl_close($ch);

		$xml = new SimpleXMLElement($data);
		$fb = $xml->feed->entry['circulation'];
		if(!$fb) :
			$fb = 0;
		endif;
		update_option("feed_count", $fb."");
		//end get cool feedburner count

		update_option("feed_lastupdate", $now."");
	endif;

	$feed_uri = get_option('feed');
	if(!$feed_uri or $feed_uri == '') :
		$feed_uri = get_bloginfo('rss2_url');
	else :
		$feed_uri = 'http://feedproxy.google.com/' . $feed_uri;
	endif;
?>

<a href="<?php echo $feed_uri; ?>" title="Feed Subscriber Count"><?php echo get_option("feed_count");?></a>

1. Syntax

Before we start, we need to know how CSS works.

selector {property: value;}

/*For example:*/

body {background-color: #ccc;}

2. How To Link To My Theme?

External CSS:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--we are calling a css type file (.css) from a specific URL which is for screen (it can be print, all and etc)-->

In HTML, it looks like this:

<link rel="stylesheet" href="http://domain.com/wp-content/themes/themefoleder/style.css" type="text/css" media="screen" />

3. CSS Cheat Sheat

CSS Cheet Sheat

I call it CSS Reset, it is simple an external stylesheet to reset some selector’s default properties and values. It is useful to create cross browsers websites. Besides, it allow us to control the layout easily. If you are using my theme, you will notice there is one line before any CSS codes. I have read some articles claim that it is not refer to all but only most of the selectors. But so far, I don’t have any problem with it.:

* {
     margin: 0;
     padding: 0;
}
/*I set all the selector's margin and padding into 0*/

Other sources:

• http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
• http://www.lesliefranke.com/files/reference/csscheatsheet.html
• http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
• http://www.christianmontoya.com/2007/11/12/blueprint-css-cheat-sheet/
• http://webdeveloper.econsultant.com/css-cheat-sheets/

4. Body

Body is a must have selector, we define font, background and font color here. If the selector is not set in with other value, value in body will be used.

Example:

body {
     color: #333; /*font color*/
     font: 400 12px/20px Tahoma, Arial, Helvetica, sans-serif; /*font: weight size/lin-height family*/
     background: url(images/bg.png) repeat-x top left; /*background: url(image path) repeat position*/
}

5. Class And ID

The symbol for class selectors is (.) while id selectors is (#), but what’s the different between them?

ID
• IDs identify a specific element and therefore must be unique on the page. It can only be used once in a page.
• We consider that it has the higher level than class. It is more specific.
• can be used and an anchor name.

Class
• Classes mark elements as members of a group and can be used multiple times.

Actually, you can use both id and class in a div or element. It’s priority of attributes are depend on id first.

Example:

.title {
     text-transform: uppercase; /*all the selector with this class will convert the text into uppercase*/
}

#left-col {
     float: left;

}

.box {
     padding: 2px 4px;
     background-color: #ccc;
}

Class

<h2 class="title">this is awesome!</h2>

Multiple classes:

<h2 class="title box">this is awesome!</h2>

ID:

<div id="left-col">this is awesome!</div>

Mixed:

<div id="left-col" class="title box">this is awesome!</div>

Other sources:

• CSS Classes vs ID
• CSS Class and CSS ID
• ClassesVsIds
• Using ID & CLASS Together
• The Basic Class and ID Values

6. Float And Clear

Float

Float is a very interesting topic in CSS. I found that most of the beginner will face this problem. Float or not float? I like the explaination from CSS-Tricks.

Float is a CSS positioning property. If you are familiar with print design, you can think of it like an image in a layout where the text wraps around it as necessary.
by CSS-tricks

.container {
     float: left;
     width: 600px;
}

.left-col {
     float: left;
     margin: 0 10px 0 0;
     width: 90px;
     display: inline; /*to avoid double margin in IE6*/
}

.right-col {
     float: left;
     padding: 10px;
     width: 480px;
}

/*600px = 10px + 90px + 20px + 480px*/

in HTML:

<div class="container">
     <div class="left-col">
          <!--content-->
     </div>
     <div class="right-col">
          <!--content-->
     </div>

Coding CSS is like doing mathematics. When you are using float. Remember to include the width for the container. This is mostly to avoid pushingdown in IE6. Normally, I use a float container to cover float elements inside it. It did compatible to all browsers so far. You may ask why I need 2 floated container? This is to prevent longer content in the right-col move below below of left-col.

Clear

Clear, is to clear any float elements so that they will not overlap on each other. We use clear to start a new row. Normally, I declare this at the beginning of the stylesheet.

.clear {
     clear: both;
}

Other sources:

• all about floats/
• float less css layouts
• floatutorial
• tizag

7. Other Findings

here are my other findings that you might interested in learning CSS more deeply:

• 10 challenging but awesome css techniques
• 10 Principles of the CSS Masters
• Solving 5 Common CSS Headaches
• 5 Useful CSS Tricks
• Dynamic Drive CSS Library
• 10 Principles of the CSS Masters

1. Open your theme folder, locate the comments.php. Look for

<?php foreach ($comments as $comment) : ?>

2. Add the following codes after it. To start the condition IF it is comment.

<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type == 'comment') { ?>

3. Look for

<?php endforeach; /* end for each comment */ ?>

4. Add the following codes before it. To end the IF condition.

<?php } /* End of is_comment statement */ ?>

To Display Trackbacks/Pings

<ol>
<?php foreach ($comments as $comment) : ?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type != 'comment') { ?>
<li><?php comment_author_link() ?></li>
<?php } ?>
<?php endforeach; ?>
</ol>

WordPress 2.7

The comments.php has a different structure in the new version. Let’s see how it can be done.

1. Open comments.php:

<?php if ( have_comments() ) : ?>

2. Add the following codes after it.

<?php if ( ! empty($comments_by_type['comment']) ) : ?>

3. Look for:

<?php wp_list_comments(); ?>

4. Change to this:

<?php wp_list_comments('type=comment'); ?>

5. We add this codes after the wp_list_comments function.

</ol><?php endif; ?>

To Display Trackbacks/Pings

<?php if ( ! empty($comments_by_type['pings']) ) : ?>
<h3 id="pings">Trackbacks/Pingbacks</h3>
<ol class="commentlist">
<?php wp_list_comments('type=pings'); ?>
</ol>
<?php endif; ?>

The Full Loop

<?php wp_list_comments('type=pings'); ?>
<?php if ( have_comments() ) : ?>
	<?php if ( ! empty($comments_by_type['comment']) ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

	<ol class="commentlist">
	<?php wp_list_comments('type=comment'); ?>
	</ol>
	<?php endif; ?>

	<?php if ( ! empty($comments_by_type['pings']) ) : ?>
	<h3 id="pings">Trackbacks/Pingbacks</h3>

	<ol class="commentlist">
	<?php wp_list_comments('type=pings'); ?>
	</ol>
	<?php endif; ?>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	<?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>

To Simplify the Trackbacks/Pings ( Optional )

1. In single.php. Change this:

<?php comments_template(); ?>

into this:

<?php comments_template('', true); ?>

2. In Comments.php, Add this codes in the trackbacks section. You can also add into your function.php.

<?php
    function list_pings($comment, $args, $depth) {
           $GLOBALS['comment'] = $comment;
    ?>
            <li id="comment-<?php comment_ID(); ?>"><?php comment_author_link(); ?>
    <?php } ?>

3. Look For:

<ol class="commentlist">
<?php wp_list_comments('type=pings'); ?>

4. Replace with this:

<ol class="pinglist">
<?php wp_list_comments('type=pings&callback=list_pings'); ?>

The Full Loop

<?php if ( have_comments() ) : ?>
	<?php if ( ! empty($comments_by_type['comment']) ) : ?>
	<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to &#8220;<?php the_title(); ?>&#8221;</h3>

	<ol class="commentlist">
	<?php wp_list_comments('type=comment'); ?>
	</ol>
	<?php endif; ?>

	<?php if ( ! empty($comments_by_type['pings']) ) : ?>
	<h3 id="pings">Trackbacks/Pingbacks</h3>
       <?php
           function list_pings($comment, $args, $depth) {
           $GLOBALS['comment'] = $comment;
       ?>
            <li id="comment-<?php comment_ID(); ?>"><?php comment_author_link(); ?>
       <?php } ?>
	<ol class="pinglist">
	<?php wp_list_comments('type=pings&callback=list_pings'); ?>
	</ol>
	<?php endif; ?>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
 <?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	<?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

	<?php endif; ?>
<?php endif; ?>

WordPress 2.7 Comment Loop Styling

The new comments loop automatically adds some classes to the LIs tag.

• comment, trackback, pingback classes get added depending on the type of the comment.
• byuser – Added if the comment is by a registered user of the site.
• comment-author-authorname – Added for specific registered users.
• bypostauthor – Added if the comment is by the author of the post the comment is attached to.
• odd and even – Classes are added to odd and even numbered comments
• alt is added to every other comment
• thread-odd, thread-even, and thread-alt – Classes are the same as the odd/even/alt classes, but these only apply to the top level of each set of comments and replies
• depth-1 is added to the top level comments, depth-2 to the next level, and so on.

Theme Upgraded

I’ve upgrade my top selling theme in ThemeForest to support WordPress 2.7 threaded comments. Feel free to check it out. I also have upgraded LoonDesign and Themetation to the latest version. How about you?

Aesthetic

There is a reason why this option comes first. It is because aesthetic is something very subjective. If you can’t accept the theme from your the sight then you won’t get it no matter how good is it. Agree?

Take a look at the themes below. Before I tell you what functions it provides or how good it is. From the design, you already “want” to get it. At least, you might think of give it a try.

Support and Documentation

There are several premium themes are providing support via forum. Which means it is actually supported by the community as well. This will indirectly reduce the workloads of the theme developers. For example WooThemes. I never purchase their memberships so, I not dare to comment on their quality of supports.

Some free theme developers themes will provide support, but generally you’ll be forced to search for your own solutions through Google searches and forums. You may get some help from the developer, but that can hardly be expected with a free theme.

With most premium themes you’ll get slightly better support. You still are likely to have a forum to visit for fixes, but the theme developers themselves are usually able and willing to help out through the forums.

Advanced Features

A premium theme should be offer some additional features. So on top of getting a better-looking design, the purchaser may also get improved functionality. The features available will vary from theme to theme. Free themes rarely have any kind of advanced features, except my crybook did provide this.

below are some screenshot for the custom theme settings.

Function

After it had passed your first test, and then you have to examine the theme functions. You have to be clear on what kind of site/blog you want to run. Not every advance theme is good for you. So, pick the one can meet your requirements will be enough.

For example, if you looking for a simple personal blog. You not really need something advance such as able to turn the theme into magazine style layout, drop down menu, custom admin menu etc. take a look at my free theme, crybook. Personally, I like it very much. It is simple, easy to use and have all the functions I need for a personal blog.

If you are going to build a site that can support multiple authors, to build a community. Then you will need something advance. For example, custom admin menu to set up the theme, different author page, a good comment system. The most important is a theme with clean code and layout. It is because a site like this normally is very informative, full with text and images. Then, you can look for something like below.

Cross Browsers, Comment Codes, SEO Friendly

This is something more technical but needed to take into consideration when picking a theme for your blog/site. I think most of the premium theme did this ( not all ). However, I also see some free themes did provide this.

Cross Browsers, which means the theme can be displayed 95% the same in all browsers including IE6. I know many developers hate IE6, me too! However, I always try to make sure my theme is cross browsers and also css/xhtml validated. This is my minimum requirement.

Comment Codes, which means there are instruction within the codes by the author. That will help the users to modify the themes. I call this as documentation. But you may notice that my theme doesn’t provide this feature. Yeah, I’m kind of lazy to write that. I prefer to include all in a help file.

SEO friendly, well, I not dare to talk like an SEO expert here. I don’t know much about it. But I do know some basic rules of it when developing a SEO friendly theme.

If the theme has passed these criteria, then you getting closer to make the decision. Next, you will need to decide to pay for it? or get it for free!

Premium Theme. Worth it?

Nowadays, premium themes are getting better and better. It become very competitive. I would say, a theme can only considered as a premium theme when it fulfill the four elements above.

Personally, I think a premium theme shouldn’t be priced more than US $ 49. However, how about those who are selling membership? Well, it’s depend on you. Will you use all the themes they provide? Are you really need that much of theme? it is a single user license which means you only can used it once. I leave this to you.

From here, I found that ThemeForest is offering something reasonable. With only US $30 to get a very high quality premium theme, with good documentation and support. I am the reviewer for the wordpress theme there, so, I am the one who are controlling the quality as well.

I recommend you to note down the functions you need then only search for the right theme for you. Because I’ve seen many so called premium themes out there is not up to the standard. Even worst than a free theme. I don’t think I can provide any example here, sorry. Please be understanding.

Resources for Premium themes

• WooThemes
• RevolutionTwo
• ElegantThemes
• FlyThemes
• ProThemeDesign
• PremiumThemes
• Plug And Press
• WordPress Designers
• MotionTheme
• themeGalaxy
• StyleWP
• iThmes
• SoloThemes
• GabfireThemes

I never tried any of their products, so, I recommend you to contact them for further information. try with your own risk.

If you are going to do a serious blogging. Then you need a very functional theme to do the job. Some tips for you, readability define everything! Always go for simple and clean theme then I am sure it worth your money.

Free Theme. Free means no quality?

if you are a wordpress users then you must tried a free theme before. The default theme is already a free theme! I will share my opinion on using free themes. I found that the free theme is always incomplete. I still can’t find the answer why? Every theme I download, there must be something that I don’t like. Technical wise, the codes aren’t clean and structured enough.

Since it is free, so we can’t expect any better support from the author too. So, when you want to have a personal blog which will not generate any incomes then I recommend you go for free themes. There is also some high quality free themes out there. still, I never try it, so I can’t comment on their support as well.

Resources for Free themes

• Toxel
• 15 High Quality Premium-Like Free WordPress Themes
• 17 Kind of Premium Quality WordPress Themes for Free
• 16 Free Premium WordPress Themes That Don’t Suck
• WpThemesPress
• 45+ Free Premium WordPress Themes with Magazine or Grid Layouts

Need more? Google it!

Some Findings about Premium Themes and free Themes

Read more from the expert, see what the said about premium themes and free themes. What is the advantages and disadvantages.

• Premium WordPress Themes: Are They Here To Stay?
• What Should Separate a Premium Theme from a Free Theme?
• The Ethics of WordPress Themes at a Premium
• What Makes a WordPress Theme Premium?
• What does Premium in Premium WordPress Themes mean?
• My thoughts on premium WordPress themes

Conclusion

I hope this article and give you a basic picture of the different between premium theme and free theme. And you also be able to choose the best theme for your blog/site.

I’ve review back to some of the feedback stating that they need something more basic. Even some of them ask for basic CSS and HTML for WordPress. Well, there is no such thing only for WordPress. But I will try to guide you from the ground.

Today, I will start another series of tutorial leading you to the way to set up a wordpress site. I will also include some of the basic CSS and HTML so you will be able to modify the theme by yourselves.

How to Install WordPress

This topic has been discussed for many times before. Basically, there are two methods to install WordPress. I’ve include the source article for your reference.

1. Automatically – While you do not know how to use the FTP. This is your best option.
   • Installing WordPress Automatically with Fantastico
2. Manually – You can handle everything on your side.
   • Download and Install WordPress On Your Server
   • My WordPress Install Process

Before you get thing started or decide which option you should go for, kindly check out the original article about Installing WordPress by WordPress.

If you want to test run the site locally in your own PC/MAC. You can try this tutorial by Nick la.

The Most Useful Plugins for WordPress

After you’ve set up the site, the next big thing you need to do is to install some good plugins for your site. Plugins is a tool or add-on for your site in order to extend the functionality and performance of the site. I’ve listed the most essential plug-in that you must include:

1. All in One SEO Pack
   • Automatically optimizes your WordPress blog for Search Engines (Search Engine Optimization).
2. Google XML Sitemaps
   • This plugin will create a Google sitemaps compliant XML-Sitemap of your WordPress blog.

Well, that’s all. You hear me right. This is the recommended MUST have plugins to kick start a site. Other than this, it depends on your personal preferences. If you still think that you need more. Check out the links below:

Plugins For General Use

1. Useful WordPress Plugins
2. Recommended WordPress Plugins
3. Top 10 Underrated WordPress Plugins
4. Top WordPress Plugins
5. Top 30 WordPress Plugins that are actually useful!
6. 13 of the best WordPress plugins

Plugins For WordPress As CMS

1. Best WordPress Plugins
2. The top 20 plugins to transform WordPress in a CMS
3. Five WordPress “CMS Enabling” Plugins
4. Top 10 WordPress CMS Plugins

Plugins For Blogging

If you are doing blogging, you may interest in these:

1. Top 30 WordPress Plugins in Blog sphere.
2. 50 Best WordPress Plugins for Power Blogging.
3. Top WordPress Plugins for the Smart Blogger
4. 10 WordPress Plugins for New Blogs

If there is still not enough, browse through the WordPress Plugins directory.

Coming Up Next…

That’s all for today, the next article will guide you in how to get the themes you that most suit your needs. Not forgotten the Free WordPress Themes and Premium WordPress Themes out there which are always a talking point by the community.

1. header.php
2. sidebar.php
3. about.php – a custom file for the about section in the sidebar.
4. footer.php
5. index.php
6. featured-post.php – a custom file for the featured posts.
7. page.php
8. single.php
9. comments.php
10. archives.php, links.php
11. search.php, searchform.php
12. function.php
13. image.php

Implementation

page.php

A page template that we use to create pages. Not much different with the index.php.

<?php get_header(); ?> /* get the header */
	<div id="content">
		<div id="left-col">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have post */
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2> /* page title*/
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?> /* page content */
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
			</div>
		</div>
		<?php endwhile; endif; ?> /* end loop */
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?> /* appear when admin is login */
</div>
<?php get_sidebar(); ?> /* get the sidebar */
</div>
</div>
<?php get_footer(); ?> /* get the footer */

single.php

Single.php used to display the single post with the comment and respond section. I will only show the important part for it.

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="post-info">
		<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author() ?>" alt="<?php the_author() ?>" title="<?php the_author() ?>" />
		<em><?php the_time('F jS, Y') ?></em>
		<span class="post-tag"><?php the_tags('', ' . ', ''); ?></span>
		</div>

		<div class="entry">
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?> /* load post content in full version */
		</div>

	<?php comments_template(); ?>  /* load the comment section */

comments.php

Comments section to display all the comments in a single post. Normally, we only edit start from the line 18.

<div id="comments">
<?php if ($comments) : ?>  /* if comments exist */
<h3 id="comment-title">Comments</h3>
	<ol>
	<?php foreach ($comments as $comment) : ?> /* comments loop start */
		<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
        <div class="comment-data">
		<?php comment_text() ?> /* comments content*/
		<?php if ($comment->comment_approved == '0') : ?> /* if comment is under moderation, this line will be shown */
		<em>Your comment is awaiting moderation.</em>
		<?php endif; ?>
        <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?> /* the edit link for the admin*/
        </div>

        <div class="comment-info">
            <?php echo get_avatar( $comment, 80 ); ?> /* to get the avatar of the commentor */
            <br /><strong><?php comment_author_link() ?></strong><br /><?php comment_date('F jS, Y') ?>
        </div>
        </li>
	<?php
		/* Changes every other comment to a different class */
		$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; /* different style for the class named as "alt" */
	?>
	<?php endforeach; /* end for each comment */ ?> /* comments loop end*/
	</ol>
 <?php else : // this is displayed if there are no comments so far ?>
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>
	<?php endif; ?>
<?php endif; ?>

Right after this, there is the comment form which we do not do much about it.

archives.php, links.php

archives and links are both just page template to display the content. I will only show the archives template below.

<?php
/*
Template Name: Archives (to display the page template name which you can select from the admin panel when creating a page.
*/
?>
<div class="post">
	<h2>Archives by Month:</h2>
	<ul>
	<?php wp_get_archives('type=monthly'); ?> /* to list the archives in monthy */
	</ul>
	<h2>Archives by Subject:</h2>
	<ul>
	<?php wp_list_categories('title_li='); ?>  /* to list the categories without title */
	</ul>
</div>

search.php, searchform.php

Search.php is to display the search result while the searchform.php only contain the searchform that we used. below is the searchform.

<div id="searchform">
<form method="" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<input type="submit" id="searchsubmit" value="&nbsp;" />
</form></div>

function.php

We use it to define the function we need in our theme. In our case, I only use it for the sidebar definition.

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'sidebar1'));
register_sidebar(array('name'=>'sidebar2'));
?>

image.php

This is a new file since wordpress 2.5. It is a special page template to display the photo gallery that we created. Actually, there is not much different with the normal single.php template. Check below.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> /* if have posts */

	<div class="post" id="post-<?php the_ID(); ?>">
	<h2><a href="<?php echo get_permalink($post->post_parent); ?>" rev="attachment"><?php echo get_the_title($post->post_parent); ?></a> &raquo; <em><?php the_title(); ?></em></h2>

	<p class="attachment"><a href="<?php echo wp_get_attachment_url($post->ID); ?>"><?php echo wp_get_attachment_image( $post->ID, 'medium' ); ?></a></p> /* the medium size image */
        <div class="caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt(); // this is the "caption" ?></div> /* the photo caption */

	<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>

	<div class="navigation"> /* image navigation for the gallery */
		<div class="alignleft"><?php previous_image_link() ?></div>
		<div class="alignright"><?php next_image_link() ?></div>
	</div>

Conclusion and spread the news!

Well, after a long tutorial. Our course is end here. I hope that you can learn something from this series of tutorial. I will be glad if you can help me to spread the tutorial to others. But, remember to link it back to the original post. Thanks. Ok, now you can head over to the new free theme – superfresh in the next post for the demo and download. Cheers!

Sections that we will cover in this chapter:

1. header.php
2. sidebar.php
3. about.php – a custom file for the about section in the sidebar.
4. footer.php
5. index.php
6. featured-post.php – a custom file for the featured posts.
7. page.php
8. single.php
9. comments.php
10. archives.php, links.php
11. search.php, searchform.php
12. function.php
13. image.php

Basic Structure of WordPress

Below is the basic structure of wordpress.

A Break Down Of the Template_tags We Used

Along the way, you might don’t know what the template_tags mean to you. Don’t worry, here is a list of them and I’ll try to explain to you.

<?php echo get_option('home'); ?> /* get the home URL */
<?php bloginfo('description'); ?> /* display the blog description */
<?php bloginfo('name'); ?> /* display the blog name */
<?php bloginfo('template_directory') ?> /* get the home URL for template's directory */

<?php wp_list_pages('sort_order=desc&title_li='); ?> /* display the page list in descending order withour title */
<?php wp_list_bookmarks(); ?> /* display the list of blogrolls */

===============within a loop===============
<?php the_content(); ?> /* display the contents of the current post */
<?php the_content(''); ?> /* the text "read more" will not show up */
<?php the_tags('', ' . ', ''); ?> /* dispaly the tags of the post */
<?php the_time('F jS, Y') ?> /* display the time of the current post */
<?php the_ID(); ?> /* display the numeric ID of the current post */
<?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> /* display a link to them comment*/
<?php the_author() ?> /* display the author's name of the post */
<?php the_author_ID()?> /* display the unique numeric user ID for the author of a post */
<?php echo get_avatar( $comment, 80 ); ?> /* display the commentor avatar in a size of 80px X 80px */
<?php comment_text() ?> /* display the comment content */
<?php the_permalink() ?> /* display the URL for the permalink of the post currently being processed */

============Paganavigation===============
<?php previous_post_link('%link', 'Previous Post') ?> /* display a link to the previous post with an anchor text as "Previous Post" */
<?php next_post_link('%link', 'Next Post') ?> /* display a link to the next post with an anchor text as "Next Post" */
<?php posts_nav_link('','','« Previous Entries') ?> /* display a link to the previous page with an anchor text as "Previous Page" */
<?php posts_nav_link('','Next Entries »','') ?> /* display a link to the next page with an anchor text as "Next Page" */
<?php previous_image_link() ?> /* display a link to the previous image within the gallery */
<?php next_image_link() ?> /* display a link to the previous image within the gallery */

============file linking=================
<?php get_header(); ?> /* load header.php */
<?php get_sidebar(); ?> /* load sidebar.php */
<?php get_footer(); ?> /* load footer.php */
<?php comments_template(); ?> /* load comments.php */
<?php include (TEMPLATEPATH . '/searchform.php'); ?> /* load searchform.php */
<?php include('about.php'); ?> /* load about.php */
<?php include('featured-post.php'); ?> /* load featured-post.php */

============widgetize sidebar============
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
	/* if it is a widgetize sidebar, defince this as sidebar 2*/
<?php endif; ?> 

============define the page template name in admin panel==================
<?php
/*
Template Name: Links
*/
?>

============normal post loop==================
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
/* a normal posts loop, the contents go here */
<?php endwhile; else: ?>
<?php endif; ?>/* end loop */

============query post loop==================
<?php query_posts($query_string);
while (have_posts()) : the_post(); ?> /* get all posts excluding posts under category with ID=3 */
/* the contents go here */
<?php endwhile; ?>/* end loop */

============comment loop==================
<?php foreach ($comments as $comment) : ?> /* start the comments loop */
<?php endforeach; ?>/* end comments loop */

============use of custom fields==================
<?php while (have_posts()) : the_post(); /* start the loop */
$myphoto = get_post_meta($post->ID, "myphoto", TRUE); /* define the custom field key for the post being processed in the loop with the ID */
$mydesc = get_post_meta($post->ID, "mydesc", TRUE); /* define the custom field key for the post being processed in the loop with the ID */
?>

<?php echo $mydesc; ?> /* display the custom field value */

<?php endwhile; ?> /* end loop */

Implementation

header.php

Easy part for you guys.

<body>
<div id="wrapper">
	<div id="header">
    	<div id="logo"><h1><a href="<?php echo get_option('home'); ?>" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a></h1></div>
        <div id="menu">
        	<ul>
		<?php wp_list_pages('sort_order=desc&title_li='); ?>
            </ul>
        </div>

    </div>

sidebar.php

For the sidebar, wordpress have their own structure for it. Each section will start with a list. Normally is an second level unordered list <li>. We need to define the sidebar here. So that we can apply widget on it.

<!--right-col-->
<div id="right-col">

    <div id="feed">
        <a href="<?php bloginfo('url'); ?>/feed" class="rss">RSS</a>Subscribe to my feed now.
    </div>

    <!--search-->
    	<?php include (TEMPLATEPATH . '/searchform.php'); ?> /* load a file which named as searchform.php */
	<?php include('about.php'); ?> /* load a file which named as about.php */

        <div id="sidebar"><h3>Sidebar</h3>

            <div id="sidebar1">
            <ul>
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>
            /* if it support widgetize sidebar, declare the widget sidebar as sidebar 1 */
		    <?php wp_list_categories('title_li=<h2>Categories</h2>'); ?>
                   /*A template tag to list down the categories with a title named Categories */
           <?php endif; // end of sidebar1 ?>
           </ul>
           </div>

        <div id="sidebar2">
            <ul>
            <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2') ) : ?>
            /* if it support widgetize sidebar, declare the widget sidebar as sidebar 2 */
                <?php wp_list_bookmarks(); ?>/*A template tag to list down the blogroll */
            <?php endif; // end of sidebar1 ?>
            </ul>

        </div>
      </div>

</div>

about.php

I created this file to make the work easier. Here, we will have a loop to request for the post which named as “about”. We use query_posts to call the page – about. After that, we define 2 custom fields for it. For your information, we also need to add the ‘key” and “value” of this custom fields when we are creating the page. For example, the key is myphoto and what you need to do is type in the value for it in admin panel.

    <!--about-->
  	<div id="about">
    <?php query_posts('pagename=about'); ?> /* request page which name equal to "about" */
    <?php while (have_posts()) : the_post();   /* if have posts */
        $myphoto = get_post_meta($post->ID, "myphoto", TRUE);
        /* define the custom field with key = myphoto */
        $mydesc = get_post_meta($post->ID, "mydesc", TRUE); ?>
        /* define the custom field with key = mydesc */

    <h3>About Me</h3>
        /* <?php echo $mydesc; ?> to call the value for the mydesc and so on */
  	<a href="<?php bloginfo('url'); ?>/about"><img src="<?php echo $myphoto; ?>" alt="<?php bloginfo('blogname'); ?>" title="<?php bloginfo('blogname'); ?>" /></a><span><?php echo $mydesc; ?> ... <a href="<?php bloginfo('url'); ?>/about">more</a></span>
  	</div><!--about-end-->      

	<?php endwhile; ?> /* end loop */

footer.php

This is the most easiest part to implement.

<div id="footer">
    <div class="footer-text">
    <span>Copyright © 2008. <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>. Powered by <a href="http://wordpress.org">WordPress</a>.</span>
    <em>WordPress Theme by <a href="http://themetation.com" target="_blank" title="Themetationn">Themetation</a>.</em>
    </div>
</div>
<?php wp_footer(); ?>
</body>

index.php

The main page or blog page also called as posts page. i use the query_posts here to exclude the posts under category with ID = 3 which is also the category for the featured post. We only need to insert the codes accordingly. I think this won’t be a problem for you. The only changes I made for the original wordpress template is the_content(). I made it as the_content(”) which means there will be an empty space for the ‘read more ‘ link. This is because I already create 1 at the bottom of every post and I give it a link which means link to the targeted post with a pointer to the read more break line.

<div id="left-col">
<?php include('featured-post.php'); ?> /* load the file named as featured-post.php */

<!--post-->
	<?php query_posts($query_string.'&cat=-3');
	while (have_posts()) : the_post(); ?>
/* start the loop but exclude posts from category ID = 3 */

<div class="post" id="post-<?php the_ID(); ?>">
	<div class="post-info">
	<img src="<?php bloginfo('template_directory') ?>/images/authors/<?php the_author_ID()?>.jpg" alt="<?php the_author() ?>" title="<?php the_author() ?>" />
	<em><?php the_time('F jS, Y') ?></em>
	<span class="post-tag"><?php the_tags('', ' . ', ''); ?></span>
	</div>
	<div class="entry">
	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> /* the post title */
	<?php the_content(''); ?> /* the post content,I use an empty '' so that it will not showing anything when we use the read more tag */
	</div>
	<p class="metadata"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> . <a href="<?php the_permalink() ?>#more-<?php the_ID(); ?>">read more</a></p>
       </div>
	<?php endwhile; ?>
        <div class="navigation">
        	<div class="alignleft"><?php posts_nav_link('','','« Previous Entries') ?></div>
        	<div class="alignright"><?php posts_nav_link('','Next Entries »','') ?></div>
        </div> 

/* end loop */
</div>

featured-post.php

To display the post under featured post category. Again, I use the query_posts loop to get 1 post from the category of featured post (3). And also defined 2 custom fields for them. Maybe you will say that it is too much. Because every time you write a featured post, you need an image and description. But, if this thing can help your site look more organized and professional. Why not?

<?php query_posts('category_name=featured post&&showposts=1'); ?> /* request post only under category name is featured post and only show maximum of 1 post */
<?php while (have_posts()) : the_post();
$fimg = get_post_meta($post->ID, "thumb", TRUE); /* define the custom field with key = thumb */
$fdesc = get_post_meta($post->ID, "desc", TRUE); ?> /* define the custom field with key = desc */

<div id="featured-post">
<h3>Featured Post</h3>
<div class="featured">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> /* post title */

<span id="f-date"><?php the_time('F jS, Y') ?> . by <?php the_author() ?> . <a href="#"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></a></span>

<p><img src="<?php echo $fimg; ?>" width="140px" height="100px" alt="<?php the_title(); ?>" /><?php echo $fdesc; ?></p>

<small><?php the_tags('', ' . ', ''); ?></small>
</div>
<a href="<?php the_permalink() ?>" id="readmore">read more</a>
</div>
<?php endwhile; ?> /* end loop */

Continue