• JFlow – Slider in front page
• SuperFish – Smooth dropdown menu
• Breadcumb and wp-page navi ready
• Advance theme toption – change theme version, logo, large/repeated background image etc
• Widget ready. Gravatar ready
• Paged comment and threaded comment supported

Compatibles up to

• Up to WordPress version 2.7.1
• FireFox2
• FireFox3
• Internet Explorer 6
• Internet Explorer 7
• Opera
• Safari
• Google Chrome

Validation

• CSS Validated
• XHTML Validated

Price

• USD 25

Preview and Download

Every themes you get will including with a details guideline that guide you step by step on the usage for the themes. Read more about our terms here. For any questions or support request. Please drop me an email..

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!

• White-Gold (default)
• Black-Red

Features

• Headline section with jQuery slider using jflow.
• Able to feature up to 6 categories!
• User Link feed to allow readers to submit link. ( example: http://psd.tutsplus.com/and kailoon.com )
• Unique page template for pages, archives, search result, author, user link feed etc.
• No need to key in any custom field value, custom input field is already provided. Simply key in the url/image path when writing a post.
• Attachment ( image ) can be using custom or WordPress media upload. – Almost every elements can be disable and enable.
• Ad Management system.
• Accordian in used for archive page using jQuery.
• Tabbing animation used for main page category section and sidebar, video using jQuery.
• Flickr – you need to download the plugin and activate it.
• Smooth dropdown menu (category) using jQuery and superfish.
• Unique design for comment area.
• Comments and tracbacks separation using tabbing.
• Threaded comment ( up to level 3) and paged comments supported.
• Custom Theme Option Page with custom styling and easy to use.
• 1 widget sidebar.

Requirements:

• Required php5 and curl enable (for the feed count).
• If you are using Google FeedProxy, you need to edit the feed.php to make the feed counter works. Please refer to this tutorial in order to modify. It is very easy to do.

Compatibles up to

• Up to WordPress version 2.8
• FireFox2
• FireFox3
• Internet Explorer 6
• Internet Explorer 7
• Opera
• Safari
• Google Chrome

Validation

• CSS Validated
• XHTML Validated

Price

• USD 30

Preview and Download

Every themes you get will including with a details guideline that guide you step by step on the usage for the themes. Read more about our terms here. For any questions or support request. Please drop me an email..

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

• Michael Carøe Andersen
• glucko

Congrats to both of them! Thank you to all of you for the participations! Feel free to subscribe to our feed for more WordPress Tips and news and for sure, contest!

WordPress Theme Design

A complete guide to creating professional WordPress themes by Tessa Blakeley Silver. Before we go further, you can have a preview of the book here.

I found that the book is pretty informative and can be a handy guide for the beginner theme designer. It also include some discussion about the CSS and IE hacks. You can learn from A – Z on how to create a wordpress theme. Besides, at the end of the book there are some useful guide about Ajax / Dynamic Content and Interactive Forms.

Overall, it is a helpful resources for those who want to learn how to create WordPress themes. if you are interested in my “How To Create WordPress Theme From Scratch” tutorial series. Then you should be interested on this book.

How To Win?

We are going to give away 2 copies of WordPress eBooks.

• Comment on this post with your full name and share with us where you usually get the resources about WordPress themes.
• Please use comment using a contactable email so that our sponsor can send you the eBook later.
• Winners will be random picked by a random generator.
• Result will be announced on 28th Nov 2008

Spread The News

We really need your help to spread the news and make this contest known by most of the WordPress users. There will be more gifts to be giving away if the respond is promising. Thanks!