Nippr

Prize: Twicet Business & Portfolio – Wordpress – 5 in 1

nursaiful

Prize: Display 3 in 1 – Business & Portfolio Wordpress

Nick Plekhanov

Prize: Modern Portfolio/blog theme

fairuz

Prize: BVD-Beautiful Website Design-Wordpress

bryanlyt

Prize: Dynamic Premium Wordpress Theme 4 in 1

Dario

Prize: Memex Business Wordpress Template

sonmanutd

Prize: RT-Theme 5 / Business Theme 10 in 1 for Wordpress

Kylie Larsson

Prize: UniSphere Minim Corporate and Portfolio

Mustafa Quilon

Prize: vCard Professional Portfolio WordPress Edition

Dian

Prize: Liquid Magazine – Unique Fluid Grid Layout

dragyn

Prize: Atlantica (Wordpress) – Premium Portfolio Template

webbografico

Prize: ShapeShifter – One Page, Infinite Possibilities

grabek

Prize: Photo Blogger + Portfolio Wordpress 2 in 1

Kishore Mylavarapu

Prize: My Wordpress

Raju

Prize: Our Magazine

Credits

Once again, thanks to ThemeForest and group of awesome theme designers/developers for all the supports. Happy New year and Merry Christmas to all the winners and authors! For the winners, you will receive your prize within few days, please do not worry if you do not receive any prizes from the author yet, it may takes few days due to the long holidays.

Enjoy!

ThemeForest

Prizes

Ok, let’s see what you can win from there!

1. Twicet Business & Portfolio – Wordpress – 5 in 1 by Kriesi

2. Display 3 in 1 – Business & Portfolio Wordpress by Kriesi

3. Modern Portfolio/blog theme by Hein Maas

4. BVD-Beautiful Website Design-Wordpress by Marko Prljić

5. Dynamic Premium Wordpress Theme 4 in 1 by Khan

6. Memex Business Wordpress Template by Khan

7. RT-Theme 5 / Business Theme 10 in 1 for Wordpress by Tolga

8. UniSphere Minim Corporate and Portfolio by UniSphere

9. vCard Professional Portfolio WordPress Edition by Ivor Padilla

10. Liquid Magazine – Unique Fluid Grid Layout by Michael ( Mixey )

11. Atlantica (Wordpress) – Premium Portfolio Template by Brandon

12. ShapeShifter – One Page, Infinite Possibilities. by Brandon

13. Photo Blogger + Portfolio Wordpress 2 in 1 by imaginem

14. My WordPress by kailoon

15. Our Magazine by kailoon

How To Win?

1. Simple comment on this post will do.
2. Write about which theme you would like to win and why? And, how are you going to use it?
3. We will randomly pick the winner for each theme.
4, Winner will be contacted by the theme author directly via email, so, please comment with your contactable email address.

Example:

Theme Name
I like this theme because …
I am going to use it …

Term & Conditions

1. Every participant will only win 1 copy of theme.
2. Every participant can only win 1 item.
3. There will be no support provided in the future for all the prizes. ( No worry, there is a detailed documentation within the file )
4. Each theme can only be used on one single domain for once.
5. Comment will be closed on 24th December 2009.

Credits

Special thanks to ThemeForest to allow me to have this wonderful giveaway in this wonderful Christmas. Also, not forgotten to say thank you to all the awesome themes creators!

Kriesi

My name is Christian, I am a 27 year old Vienna based Web Designer. I run Kriesi.at and have a partiality for colorful design, unobtrusive javascript and clean php code.

Hein Maas

Hi , I’m a dutch freelance graphic/web designer who’s building beautiful timeless designs for extremely great developers and Design Agency’s with a lack of time or know-how to get the design they need for there precious projects.

Marko Prljić

Freelance Croatian web & graphic designer.

Khan

Khan is one of our rockstar authors with items across three marketplaces including AudioJungle, GraphicRiver and of course ThemeForest. With over 3,500 sales and 57 ThemeForest themes and templates, Khan has helped set the bar high. More about Khan.

Tolga

IT professional with over 9 years in Web Development, Web Design and E-Commerce consulting… also amateur photographer, married, with animals and workaholic.

UniSphere

Hey everybody, I’m UniSphere and I live in Porto, Portugal. I specialize in Web Design and Wordpress development.

Ivor Padilla

I am Ivor, a 26 year old Web Designer raised in Venezuela. I love Envato and that’s why I design websites for ThemeForest. I’m almost a lawyer too but I’m planning work as a freelancer for the rest of my life and of course I’m a Mac!

Michael ( Mixey )

Hi! My name is Michael and I build beautiful websites powered by Wordpress. And I would love to do one for you.

Brandon

I’ve been freelancing fulltime for about 8 years now and I’ve worked on countless projects, ranging from branding projects to top-tier web design gigs.

imaginem

Hi, I’m Mondre, a Freelancer. I work using: Adobe Photoshop, Illustrator, CSS , HTML, PHP , JAVASCRIPT & MYSQL . If you have any questions regarding any of my items, send me a message. Suggestions and theme requests are most welcome, send me a mail via my profile.

kailoon

Hi! My name is Kai Loon, I run LoonDesign and themetation.

• 6 Colors
• Feedburner Integration
• Powerful Theme Option Page
• User Link Feed Ready
• Able to switch sidebar position by a single click
• Auto image resizing
• Flickr Showcase
• Wp-navi and breadcrumb integrated
• Ad Management System
• Social Linking (Digg, StumbleUpon, etc.)
• Modern footer display
• Smooth tabbing system
• SuperFish for dropdown menu ( Both pages and Categories )
• Unique author and search result page
• Unique threaded comment styling
• Trackbacks and comment separated
• 2 Column Tabless (CSS Layout)
• Sidebar Widget Ready
• Gravatar ready
• Valid CSS and XHTML
• Browser compatibility: All Major Browsers
• Related Posts
• Popular Posts
• SEO Friendly
• Print Ready
• Many more!

Compatibles up to

• Up to WordPress version 2.8.5
• 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. Please drop me an email..

• 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.8.5
• 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. 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.5
• 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. 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?