There are different methods I use for this kind of function and it depends on the need and how the template is laid out. You can check out the 3 methods that I use below. I hope you find it useful in your projects.

Method 1: This code displays the 10 latest posts. You can place this code anywhere on your template. For more info on wp_get_archives() you may want to check out the codex

<ul>
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>

Method 2: This is just basically the loop except that we defined a number of posts to be shown using the query_posts() function. You may want to read more on query_posts()

<?php query_posts('showposts=5'); ?>
<ul>
<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>
</ul>

Method 3: This is I think the best way to display the recent posts since it’s very simple and you can customize the way the posts are displayed. You can use this code anywhere on your template. Read more about the get_posts() function.

<?php
$recentposts = get_posts('numberposts=12&category=4');
	foreach ($recentposts as $post) :
	setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>

Display Recent Comments

I found this piece of code somewhere around the web but I don’t know who the original source is. So the credit goes to him or her. This piece of code will display the 7 most recent comments.

<?php
global $wpdb;
$sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
comment_post_ID, comment_author, comment_date_gmt, comment_approved,
comment_type,comment_author_url,
SUBSTRING(comment_content,1,30) AS com_excerpt
FROM $wpdb->comments
LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
$wpdb->posts.ID)
WHERE comment_approved = '1' AND comment_type = '' AND
post_password = ''
ORDER BY comment_date_gmt DESC
LIMIT 7";
$comments = $wpdb->get_results($sql);
$output = $pre_HTML;
$output .= "\n<ul>";
foreach ($comments as $comment) {
$output .= "\n<li>".strip_tags($comment->comment_author)
.": " . "<a href=\"" . get_permalink($comment->ID) .
"#comment-" . $comment->comment_ID . "\" title=\"on " .
$comment->post_title . "\">" . strip_tags($comment->com_excerpt)
."&hellip;</a></li>";
}
$output .= "\n</ul>";
$output .= $post_HTML;
echo $output;?>

Display Categories

There are different ways in displaying categories and most of the time I like the categories to be displayed in a simple list.

<h4>Categories</h4>

<ul>
<?php wp_list_categories('use_desc_for_title=0&title_li=&show_count=0'); ?>
</ul>

Display Archives as Simple List

Method 1: This will display the archives in a month list. I usually place this on the sidebar. Learn more about wp_get_archives.

<h4>Archives</h4>
<ul>
	<?php wp_get_archives('type=monthly'); ?>
</ul>

Method 2: This will display all the posts in a simple list. I usually use this on an archives page template.

<ul class="archives">
<?php
$myposts = get_posts('numberposts=-1&offset=0');
foreach($myposts as $post) :
?>
<li><small><?php the_time('d.m.y') ?></small> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

<?php endforeach; ?>
</ul>

Display Tagclouds

This will display the tags in a tagcloud. This is the simplest on how to use it. For more details you may check out wp_tag_cloud() from the WordPress codex.

<?php wp_tag_cloud('smallest=8&largest=22'); ?>

Display Blogroll

This will display the links in a simple plain list. More on wp_list_bookmarks.

<ul>
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>

While I know that these are not all of the most commonly used WordPress snippets, I hope this post will still help out people who want to learn WordPress. I have written this post so it can serve as a reference for me and by all means you can make it your reference too. But if you want to learn more on WordPress functions you can always go to the Codex or you can get a copy of WordPress for Dummies.

How it works

When the page is initialized, a script will hide all of the images. While all of the images on the page are loading, an animated preloader will take it’s place creating the “image loading” effect. After all the images on the page is loaded, a script will kick in and start fading in the images from the first instance to the last one. This method works with any image from any source or path. To achieve the whole preloader effect the image must be wrapped inside a div with a class. We need the extra markup for a placeholder for our animated preloader image.

• View the Demo
• Download the Source Files

Getting started

You need the jQuery library by John Resig. The older versions work but I suggest you always use the current release.

First, let’s create the HTML page. We need to include the jQuery library in the header of the page. And let’s wrap each image with a div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Visual Image Preloader using jQuery</title>
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3563/3381408848_9c746f35f6.jpg?v=0" alt="Image 1"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3657/3381403740_19457662b3.jpg?v=0" alt="Image 2"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3454/3381399248_82bf005381.jpg?v=0" alt="Image 3"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3586/3381393310_8f4b015827.jpg?v=0" alt="Image 4"/>
	</div>
</body>
</html>

Adding the script

Let’s create the fake preloader script and insert it on the header.

<script type="text/javascript">
	$(function () {
		$('img').hide();//hide all the images on the page
	});

	var i = 0;//initialize
	var int=0;//Internet Explorer Fix
	$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
		var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
	});

	function doThis() {
		var images = $('img').length;//count the number of images on the page
		if (i >= images) {// Loop the images
			clearInterval(int);//When it reaches the last image the loop ends
		}
		$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
		i++;//add 1 to the count
	}
</script>

Let’s test what we have so far. The images will only start to fade in once the entire document is loaded. That is how the event handler window.bind() works.

Adding the animated preloader

Now let’s add the animated preloader. You may generate your own loader image here. Let’s create a new CSS file in our favorite code editor.

.image-holder{
	float:left;
	width:500px;
	height:313px;
	padding:10px;
	margin:10px;
	border:1px solid #ddd;
	background:#eee url(loading.gif) 50% 50% no-repeat;
	display:inline;
}

Don’t forget to include the CSS file on your header.

<link rel="stylesheet" href="preloader.css" type="text/css" />

Summary and Conclusion

While I know that this is not a real solution for preloading images, it would still add a very cool effect to your website. This method will preload any image from any source or path. The only setback is you will not see the animated preloader on images not wrapped in a special div. But the good thing is it would still have that fade-in effect.

That’s it! I hope you enjoy the simple demo and tutorial. If you have any questions or suggestions, you may leave your comments below.

So what took me so long to build and launch this new design? It’s not really because of the lack of time or inspiration. In fact I do have a lot of free time for this project. But everytime I finish the design, I take a good look at it today and decide that it’s cool but the next day when I take a look at it again, I have changed my mind about it . I’ve learned the hard way that as a web designer, the hardest client to please is yourself. To prove it to you, I’ve gone through many design revisions before I finally came up with this and to be honest, I’m still not fully pleased with what I came up with. But I decided to stop tweaking the design and finally convert it to code, because if I continue on revising the design, I will not be able to finish anything at all.

Below you will see the evolution of the design in 7 stages:

Stage 1

Stage 1: It started out as a light colored theme. I kinda like this layout. In fact, I’m converting this to a WP theme sometime soon.

Stage 2

Stage 2: This one looks similar to the first one, except images are added on the blog section of the page. Another great WordPress theme idea, I guess.

Stage 3

Stage 3: I woke up one day and I told myself, I wanted that kind of look. Looks good to me but I got tired of looking at it.

Stage 4

Stage 4: This one looks grungy, the kind of look that I’m going for but I hated the colors.

Stage 5

Stage 5: I love this design. But before I can convert it to code, I kinda changed my mind again. I’m gonna inherit this look on some of my future projects so it won’t be wasted.

Stage 6

Stage 6: I’m almost there. I thought I was aiming for grunge but at this stage, I knew what I wanted. I wanted something that looks neat and textured so I got rid of the grunge parts and came up with this.

Stage 7

Stage 7: This is the final design and I think I’m really happy about it. I love how it eveolved from Stage 1 to this. I didn’t see that coming. At least this was a great learning experience for me.

Because I don’t want to go through piles of stages on my future projects again, I created guidelines for myself. If you find these guidelines useful, you may use it at your own risk. :)

Always ask other people’s opinion about the stuff you are working on

I guess this one is a very important thing to remember. If you can’t please yourself, the best way to move on with your design is ask other people’s opinion. Remember that you are not only pleasing yourself but other people too who will be viewing your design.

Do not overdo it

Sometimes when you are working on something interesting, like a personal blog or website, you tend to get addicted to it that you don’t want to stop working on it. You want to put everything into it but most of the times, that’s not really cool. Like for example, you are working a website and you have finished laying it out. You see an empty space on one of the columns and you decide to fill that up with some design or something to fill up the space. Sometimes, spaces are good. It gives the eye some area to rest. Sometimes, you need to pause for a while and take a walk to clear your mind.

Stay Organized

This one is very important for me because most of the times I get really disorganized. I start the project with a list of to-dos and I end up losing and not following what I wrote.

Keep it Simple

Simplicity is beauty. So don’t make it too complicated.



Well that’s it. This post has to end somewhere. Everytime I’ll be working on a new project I’ll be going back to these guidelines. This design has been tested to work great on all modern browsers except IE6. For all those folks who are still using Internet Explorer 6, please update your browser or just use a better browser.

Google Chrome PNG bug demonstration. Notice the white borders on the soft-rounded square icons.

Same website as seen on Firefox 2 browser. See the difference?

To see the actual bug, simply open taptaptap.com in Google Chrome and click one of those soft rounded square icons. You should be able to see white borders appear on inactive square icons.

Like I said, Google Chrome is still in beta, so it’s just normal to encounter a few bugs. Another demonstration of a CSS bug on Google Chrome is seen when you visit Avalonstar.

It appears that they’ve exchanged text-shadow for text-shitify.

But I must admit, I fell in love with Chrome the first time I saw it. It never fails to give me fast, reliable and organized browsing experience. Google Chrome is fast, just check out the benchmarks here, there and everywhere.

Update: Google Chrome 2 has been released and it fixes the PNG Opacity bug. Thanks to the Google Chrome developers for looking into this one major problem.

A Portrait of my 1 year old son

The Pacifier, a tool to make a baby sleep and stop crying.

Criss David Day

Yes, I do love vectors. Lately, I’ve been creating different illustrations that I will be using for a personal project. Below is an example. It’s an illustration of the Philippine Jeepney, the most common form of public transportation, in the Philippines of course.

Web Standards Compliant Jeepney.

If you’ve noticed on this post, the image has styled captions. A feature the new WordPress 2.6 has. I’m also integrating it on Una, the free WordPress theme that I’ve released lately. And speaking about Una, I’ll be releasing the latest, widgetized updated Una tomorrow, so be ready to download it once it comes out. You may subscribe to my feed so you’ll get updated whenever I make a new post.

To use SyntaxHighlighter, you must enclose your code snippet with a <pre> tag and set a name="code" attribute. But name isn’t allowed for this tag anymore. You can also use the <textarea> tag but shouldn’t that be inside a <form>?

The Quick Solution

So here’s a fast, simple and mean solution that I did to make my XHTML code valid again. I know I’m not the first one who discovered this but I’m just here to share.

First, open shCore.js with your favorite code editor program. Find this line:

if(tags[i].getAttribute('name')==name)

and then replace it with the following code snippet.

if(tags[i].getAttribute('title')==name)

Save your file.

So instead of setting the name attribute, you can now use the title attribute which is 100% valid for the <pre> tag. I’ll be using this simple hack for quite sometime until the SyntaxHighlighter developer comes up with something more pretty.

I would love to hear your comments and suggestions about this hack.

This theme is a little advanced for beginner bloggers but it doesn’t mean they can’t use it. Before you download and install this theme, you might wanna get into the details below to see and know what you’re getting.

Updates

January 14, 2009. You can now download Una on Google Code Project Hosting. You may also report issues thru Google Code Issue tracker.

October 06, 2008. The theme has just won the best free custom theme on the 2008 Philippine Blog Awards. Thanks to the judges who voted for it. I’m really super busy right now but once I’m done with the projects that I have on hand I’ll be updating this theme and fix some bugs and add more features like admin options menu. Thanks to all you folks who have downloaded it!

September 09, 2008. The theme is now Widget ready! For those of you who have downloaded and installed the first release, you may download the latest version and just overwrite the files.

July 07, 2008. The first public release of Una.

Demo and Download

The live demo for this theme is used in this blog. What you see here is powered by Una.

The theme is tested on WordPress 2.5 and WordPress 2.5.1. I haven’t tested it yet on lower versions of WordPress and I’m not planning to. If you want this theme then you better use the latest and safest WordPress package.

The theme uses valid XHTML and CSS so please use valid mark-up in your content.

Download Una on Google Code Repository

You may report any issues you may find on the Google Code issue tracker.

Una WordPress Theme screenshot

Installation

Before you activate this theme, there are a few things you must prepare for.

Mother Set-up

• Go to Settings > Miscellaneous and enter these values for the Thumbnail size. width=195, height=155. And make sure the “Crop thumbnail…” is checked

Required WordPress plugins

• Download the Twitter Tools Plugin. Install and activate. Configure your settings like the image below.
  

  Twitter Tools Settings

• Download the Advanced Excerpt Plugin. Install and activate. Go to the settings and set the Excerpt length to 25 and uncheck the img

The above plugins are not really required to make the theme work, however, if you want to optimize the output or the look of this theme, you must install these plugins.

Setting up your avatar

• Create a 36px by 36px avatar image, save it as avatar.jpg and upload it to wp-content/themes/una/images/

You can now skip this part. Una will automatically fetch your avatar image from Gravatar. If you don’t have a gravatar, the default gravatar will show up.

Setting up twitter on your sidebar

• Open sidebar.php and modify line 5. Change the value of the username to your twitter username

Thanks to Efren for the tip. This one will work automatically now. It will fetch your username from the Twitter Tools settings.

Setting up the footer about info

• Open footer.php and change line 8 to your own self introduction text

Setting up the accompanying image for eash post

This step is optional. The theme will work with or without this one. That’s how flexible and user friendly it is. If you have no image for the post, that’s ok. The theme will run smoothly.

• Create a 580px by 215px image. This will serve as the main image on the main page. While on the Write Post page upload the image using the Add Image button.
• After the image has been uploaded, right click on the thumbnail (in Firefox Browser) and choose Copy Image Location.
• Close the media window and expand the Custom Fields panel. Enter a new key titled post-thumb and paste the image location under the corresponding value.
• Get the direct URL for the original image. Enter a new key titled post-image and enter the direct URL of the image under the corresponding value.

About & Licensing

This theme is absolutely free for the taking. All I’m asking is the footer credits to remain in tact. I request that any distribution of the Una theme out of this website be notified to the author.

Bugs and Known Issues

• Sidebar Widgets is not supported
• Non-transparent comment icons
• Footer not sticking at the bottom

To Do

• Add the caption style for WordPress 2.6
• Add a reply button to the comments

Theme Updates

July 26, 2008

• The theme is now widget ready.

July 07, 2008

• Updated sidebar.php and footer.php so that you don’t have to manually upload your avatar for it to show up.
• Updated sidebar.php so that you don’t have to open the sidebar.pohp file and get your hands dirty. The twitter username will be automatically fetched from the Twitter Tools settings.
• Fixed a few bugs

If you have downloaded the theme and you find any bugs please report it by using the comments section below. I would also love to hear your suggestions! Thanks!

So why did this very simple design took me more than 5 months to build? The answer is really plain and simple. Revisions, revisions and more revisions. I know this sounds crazy but the hardest client in the world to please is yourself. Of course that’s not all. I have been very busy with my work and family.

So, what is this shit all about?

Well, this website will be a place for my ideas, thoughts and a stage to showcase my past and ongoing projects. I will be writing stuff that will be of interest to you like design, web development and Wordpress stuff. In other words, this will be a playground where I will share my random thoughts and things that I discover everyday.

Who are you?

Oh yeah, I forgot to introduce myself. My name is Dino Latoga. I have been weaving web designs for almost 6 years now. I create my designs and layout using mostly Fireworks, Illustrator and Photoshop. I convert my designs into XHTML and CSS using the latest Notepad ++. Before, I used to take the bus when I go to work but right now I only need to make a few steps from my bed to my workstation. I am currently a fulltime freelance web designer and Wordpress theme developer for E.Webscapes, a professional blog design studio owned by the great Lisa Sabin-Wilson. You can check out some of the projects I’ve done under E.Webscapes on their website.

This is a neat design. Are you thinking of giving away this WordPress theme?

Thanks. Yes, I will be giving away for free the very design and WordPress theme that you see here. Right now, it’s not yet available for download but in a few days, maybe tomorrow, the theme will be all yours for the taking.