Like Google always do, in beta. The good thing about using Google font directory is that there is no copyright issue, I’m pretty sure Google may take care of those before publishing their typeface.

It is very time saving and very easy to implement into your design.

Link to the stylesheet:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

Call a CSS:

h1 {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}

Use it on your site:

<h1>Making the Web Beautiful!</h1>

As simple as that, only 3 steps to remember and some typefaces’ name. Currently there are only 18 typefaces ready in Google font directory, I definitely hope to see more.

Easy Portfolio

A very simple portfolio template in white gray, with a javascript scrolling feature based on jQuery (see live preview). The meaning of the minimalist design is to give your content the focus it deserves, so people can know very fast what is the purpose of the website.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

Minimo

A simple and attractive one page portfolio showcase theme. Included is a form mail script, so the entire site works out of the box, simply add your destination email address. Works in all major browsers, features some nice CSS3 properties yet degrades gracefully for older browsers.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

Design Agency

A minimal template with 3 color variations best suited for Business and Portfolio sites.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

Mint Design – Minimal Portfolio Company Blog Template

A minimalist template in white and gray color. One page + Multi page website ALL IN ONE . You have the option to use it however you want.

Live Demo and Details l $17 for regular license or $15 for prepaid customers

Minimalist Portfolio

This template aim to be minimalist, mostly black and white. It include a project’s showcase on the frontpage, a cool portfolio design and a working contact form.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

Vilisya – Minimalist Business Template 3

Comes in 6 color option, Vilisya has a minimalist and elegan look. It’s suitable for your professional corporate website, portfolio website, or personal website.

Live Demo and Details l $22 for regular license or $20 for prepaid customers

SilverFolio

Clean and Minimalist type of personal portfolio created with 960 pixel wide container. Easy and simple to customize commented css style sheet clean codes.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

SimpleFolio

A unique portfolio, ideal for all kind of uses, for a company or a freelancer. It comes with JQuery Slider and IE 6 PNG transparency.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

Minimalistic – Portfolio & Business

A simple and minimalistic portfolio or business theme. It has the flexibility to be either a 1 page website or as many as you need if you don’t want the sliding pages.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

216|Portfolio

This minimalist template comes in 2 different background with jQuery Image Magnify script.

Live Demo and Details l $14 for regular license or $12 for prepaid customers

Here are a few which I personaly think a good hack to develop a website other than a weblog using Wordpress.

Feature entries / Specific categories update

This is useful when it comes to a web magazine or a business blog.

<?php
wp_reset_query();
query_posts(’showposts=’5&cat=Feature’);
if (have_posts()) : while (have_posts()) : the_post();
?>

<h1><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h1>
<?php the_content(); ?>

<?php endwhile; endif; wp_reset_query(); ?>

The wp_reset_query(); is to destroy the specific query. Since it reset the query, you are free to add as much as you want on your design.

Widgetize

This is, almost certainly a feature never missed. But how to write a good one and understandable? Name it and style it. The widget code looks like this:

if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Sidebar’,
‘before_widget’ => ‘<div class=”sidebox”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

On the ‘name’ => give it a name on each and every widget you designed. Some theme has more than 5 widgetized areas.

Theme options

Themeforest blog has a great tutorial about how to create a theme option. However, how you develop it is the key.

What can a theme option possibly do? Here are list of what I did after the tutorial.

• Enable disable – Almost any thing, from breadcrumb, social icons and etc.
• Feature slider with category name and number of entries
• Twitter username and it’s number of update or enable/disable the update
• Changing stylesheet

It may seems hard to create on, but it definitely easier if you understand how it work, even you’re a PHP noob, like me Below I compiled a list of auto-generated checkbox, text form, textarea and select input.

$settings = array(
‘desc’ = “Something about the description’,
)

$themename = “WP theme option”;
$shortname = “mythemename”;
$options = array (

array(
“name” => “Function name”,
“id” => “a_message”,
“std” => $settings['_message'],
“type” => “textarea”,
“note” => “A message.”,
),
array (
// More function //
),

);
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo ‘<div id=”message” class=”updated” style=”position: absolute; top: 0px; right: 0px;”><p><strong>Settings saved</strong></p></div>’;
if ( $_REQUEST['reset'] ) echo ‘<div id=”message” class=”updated” style=”position: absolute; top: 0px; right: 0px;”><p><strong>Settings reset</strong></p></div>’;
?>

<form method=”post” action=”">

<?php } elseif ($value['type'] == “text”) { ?>
<p>
<h2><?php echo $value['name']; ?></h2>
<input onfocus=”this.select();” name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>” type=”<?php echo $value['type']; ?>” value=”<?php if ( get_settings( $value['id'] ) != “”) { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>” />  <?php echo $value['note']; ?></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “textarea”) { ?>
<p>
<h2><?php echo $value['name']; ?></h2>
<textarea name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>”><?php if ( get_option( $value['id'] ) != “”) { echo stripslashes(get_option( $value['id'] )); } else { echo stripslashes($value['std']); } ?></textarea>
<?php echo $value['note']; ?></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “select”) { ?>
<p>
<h2>?php echo $value['name']; ?></h2>
<select name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>”>
<?php foreach ($value['options'] as $option) { ?>
<option <?php if ( htmlspecialchars(get_option( $value['id'] )) == htmlspecialchars($option)) { echo ‘ selected=”selected”‘; } elseif ($option == $value['std']) { echo ‘ selected=”selected”‘; } ?>><?php echo $option; ?></option>
<?php } ?>
</select></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “checkbox”) { ?>
<p>
<h2>?php echo $value['name']; ?></h2>
<?php if(get_settings($value['id'])){ $checked = “checked=\”checked\”"; }else{ $checked = “”;}?>
<input type=”checkbox” name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>” value=”true” <?php echo $checked; ?> />  <?php echo $value['note']; ?>
</p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “header”) { ?>
<?php } }?>

<div style=”clear: both; padding: 20px; overflow: hidden”>
<input name=”save” type=”submit” class=”button-primary” value=”Save changes” /><input type=”hidden” name=”action” value=”save” /></form>
<form method=”post” action=”"><input name=”reset” class=”button” type=”submit” value=”Reset” /><input type=”hidden” name=”action” value=”reset” /></form>

<?php }
add_action(‘admin_menu’, ‘mytheme_add_admin’);
foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
foreach ($settings as $k=>$v) { $var = $shortname.’_’.$k; if (!empty($$var)) $settings[$k] = $$var; }
function dp_settings($key) { global $settings; return $settings[$key];}
?>

There, I placed all the possibility use of the options. Text, textarea, checkbox and dropdown select. Go wild with your creativity!

Page template

Sometimes, you can’t get away from create a page with a unique design. That’s what most web designer will do, even a blog.

<?php /* Template Name: Template name */ ?>
<?php get_header(); ?>
Your content is here
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Web designers likes to custom design a profile page on their weblog. That is when the page template comes to play.

Custom homepage without setting

Some of us like to use the static option to set a specific homepage. But that will only help query run more and longer. To shorten it and go straight into the custom design, this code:

<?php if(is_home()) { ?>

<?php include(‘custom_design_content.php’); ?>

<?php } else { ?>

<?php get_header() ?>
<div id=”content”>
<?php include(TEMPLATEPATH . ‘/post/feature.php’); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . ‘/post/post.php’); ?>
<?php endwhile; ?><!– END Loop –>
<?php pagination(); ?>
<?php include (TEMPLATEPATH . ‘/post/pagenavi.php’); if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
<?php else : ?>
<?php include(TEMPLATEPATH . ‘/post/none.php’); ?>
<?php endif; ?>
</div><!– END Content –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php } ?>

So if it is on homepage or index page, it will directly show custom_design_content.php instead of the normal blog entries listing.

However, the big down side is that it cannot use static to show a blog entries page.

WordPress 3.0 was said to be better developed and was like a CMS instead of blog engine. Can’t wait for the release now Let’s see if the release helps cut short all the tips and hacks we usually found online.

Email client about the leave

It is important to let the clients know that you’re having a road trip and might not be able to get back to them in a short time. You surely don’t want to make them waiting and wondering what is going on, why there is no reply since the last email, and so on.

Going MIA (Missing In Action) out of a sudden will give a bad impression that you are irresponsible to the client. Therefore I always informed my clients about my trip/leave and make sure that some heavy jobs has been done before I head off for the trip.

It is as simple as 1,2,3: Take some time, finish the heavy job and take the leave.

Have a mobile broadband

I registered a mobile broadband for home use (at the moment) and travel use. Of course I did not online all the way when I was having a road trip. There are time like lunch, dinner or having rest in the room for the day which can be more leisure with Internet on hand. You can check if there is any urgent email too.

Nonetheless, if you have a Twitter and your client is following you, they sure know what and where you’re heading to too – talk about interactive with client. Well, the worst senario is no Internet connection at all. That means, time to have real fun on the trip.

Take light work only

Jobs like designing stuffs is a big no-no for me. I prefer to take web-developing job with me on the trip.

I am using a laptop as my working computer and working with the touch pad is not recommended at all, and could possibly lead to a waste of time.

It comes in handy when you just want to do some typing work and there is no proper table around you. Hence I prefer to work on jobs that involved using keyboard (such as writing proposal and coding) more than using mouse (talk about designing) when I am on a road trip.

External battery

When you are on a road trip, that means you will spend most of your time outside. Prepare to be on the road without any electronic devices, not even your mobile phone.

Always remember to get external battery or adapter if possible. Once I finished using the battery of both my laptop and my hand phone, I couldn’t do anything at all besides waiting for the time I get back to my room and charge them. Car charger is a very good companion if you’re driving.

Hopefully you can add in your experience too.

Demo

Link to a JQuery

Encosia wrote about reasons to host JQuery with Google. Well, I did both, I host one in a folder and let Google handle as well. Just to double sure it will works no matter who is down

Host with Google

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>

Slef host

<script type=”text/javascript” src=”jquery.js”></script>

The structure

Pretty simple. We have only 3 DIVs

So here are the 3 DIVs style as:

Fixed the size of the showcase picture
#image {width: 500px; height: 200px; overflow: hidden; cursor: pointer;}
.thumbnails {width: 500px; height: 50px;}
.thumbnails .thumb {margin: 5px 8px;}

The HTML should look something like this:

<div class=”thumbnails”>
<span rel=”001.jpg” class=”image”><img src=”001.jpg” width=”80″ height=”32″ class=”thumb” border=”0″/></span>
</div>
<span rel=”002.jpg” class=”image”><img src=”002.jpg” width=”80″ height=”32″ class=”thumb” border=”0″/></span>

Repeat the thumbnails as much as you want

</div>

This is how it should be look like

The Javascript

<script type=”text/javascript”>
jQuery(function() {
jQuery(“.image”).click(function() {
var image = $(this).attr(“rel”);
jQuery(‘#image’).hide();
jQuery(‘#image’).fadeIn(’slow’);
jQuery(‘#image’).html(‘<img src=”‘ + image + ‘”/>’);
return false;
});
});
</script>

We call each clicked “.image” class with “rel” to its image link. So once it clicked, it “hide” the current image then “fadeIn” the clicked image and then changed the default image in the center.

Check out the demo

There are plenty of software that helps you to create a local server. EasyPHP, XAMPP, WAMP and the like. I personally recommend WAMP as it have not crash with any software I have installed in my computer. EasyPHP has some bug on mySQL connection, while XAMP is a little bit advance.

Installing WAMP

First off, install WAMP from http://www.wampserver.com/en/download.php

Make sure you don’t block the Apache when the notification windows pop-up.

Once you have installed it, look into the folder C:/Program Files/wamp/www if you follow the default setting when installing. www folder works like public_html or domain_html on your normal hosting account.

Leave index.php in the folder, it is a handy little index page for you when surf to http://localhost.

Installing Wordpress

Download Wordpress from http://wordpress.org/download

Once you downloaded it, unzip it and copy the whole folder into www folder and you’re set to install the 5-minute installation.

Mac user

Mac user has this little application called MAMP, it works just like WAMP but then, it is 100MB over in size, prepare to spend some times to download them

More thinking when you’re rest

I always try to keep my laptop and my mobile phone close to me when I’m taking a rest or a tea time. Mainly because I might have something pop up in my mind and needed to note them down. In Windows, I always has Wordpad readily open for drafting. As for my mobile phone, I used a QWERTY keyboard ready Nokia E71, which give me convenient to write pretty fast on QuickOffice, then later I will transfer it via bluetooth to my laptop.

Draft everything and anything

Anything will be on the draft list. From point form to a sentence. This is the ensure that I have everything write down already, before they vanish. From there on, I will take a little bit of my time scanning through the points, and see which blog they most suitable to, only then I start to write the full content.

Stop worrying about image, video or link

Sometimes, you suddenly though of a news from a website giving you the information, but you can’t online at the moment or wanted to research one it. Try not to do that, most probably those activities will distract you from drafting and ended up you login to your Facebook chatting with your friends instead. Give yourself a personal legend. I would give myself some note in a blanket and later on. When I’m ready to publish the content, I will know what I need to look for, an image, a video or a piece of URL.

Start with a title

People often say that, title is the most difficult thing to think of when you finished an article. That’s probably because they are keen on traffic and catchy title. If not, I would have another point of view. It is often the title that would give you an insight of what the content going to be, what point will you have in the content. From there on you’ll have all the inspiration to write the content according to the title.

Check and follow through Social Media

Twitter is one of my inspiration source. Eventhough the 140 character limitation, these tweeple sure do good with them. Very oftern a quote or a poverb will send you a big inspiration of an article you would like to see on your blogs. I oftern come across a few twitter update that has a link to another useful site. I say “useful” site because it’s not the content of the url the tweet gave me, but the other article on the url. Explore into it, don’t stop on one link and click the X button.

Surely you’ll have your own idea on how to keep your inspiration from running away. Do share your experience and idea on keeping your inspiration in the comment.

Get advice and give advice

I spend a lot of time in all those webmaster forum. Before this, I wasn’t really a web designer yet, but a designer. Works a lot on logos, t-shirt design and web page design (no coding yet).

I spend time wandering on forums to get advice. It is also one of the way I interactive with those designer/developer who also now in my MSN list. I’ve even have a PHP programmer as my partner years ago, and we still planning to work together.

Do free work

I know it sound bitch. I started off with a lot of spec work, this is, somehow, to polish my design skill too.

While learning new tricks on designing, I also learn to get used to most important technique. Forum and some contest website always a good to go.

Being a freelancer now, I sometimes, calculate my rate too. If the cost of the project is low due to their budget, I would know what and which kind of design I will go for the low budget. It helps me to create an eye on design according to the budget.

Learn one CMS at a time

Even if I’m good in XHTML/CSS, I probably won’t get too much static website to build nowadays. Looking at the prespective that most company likes to update their website on their own, or perhaps, a cooporate blog.

Get more knowledge on CMS, e-Commerce or so. It’s always an added advantage to get lean a CMS script. Wordpress is a good start, since it has the most tutorial on the Internet.

It is not easy to start up to become a freelancer. I get lots of bomb and critic when I started out and still getting them. But that’s is how I grow. The more the client are demanding, the more I know how to handle client and web design trend.

My wife and I are freelance web designers and yet we still survive even without much of internet connection for this 2 weeks.

Work on design, or design something

Design and more design. Either work with the current client’s project or just create a new design, such as a free theme be released for public. If any creative-block strikes in, go have a short break. Take a walk outside or have a cup of coffee in the pantry will do. Have all the time in hand to get inspiration.

Sometimes when I want to take a break from sitting in front of the computer, I will get my sketchbook and start doodling on it. I actually don’t have the habit of sketching before doing the design in computer. But when I do, the result will be an amazing one. Hence, I’ve started to spend quite a lot of time in sketching and mind mapping my proposal when I’m not with computer and Internet.

Take a walk, do some exercise

It is important to let your body sweats some times.

Most of the time, my girlfriend and I are sitting next to each other and worst, don’t talk much when some urgent works approached. So the best thing to do is to take a walk, have some long conversation or work-out together.

Movies, celebrities gossip, music, karaoke

Spend some quality time with the family and watch a movie, either at home or in a cinema.

As a freelancer, very oftern we find a movie title that click, but can’t find a time out to watch it because of “tons of work” ahead.

Clean up your machine, table and all the mess

I’m sure there were lots of “Tomorrow” while working on the desk. It is the time to do all those work. A clean work station can really boost productivity. From whipping the computer to cleaning up all the paper work on the table is a good start.

Learn more script

Even if you’re good in one particular CMS, you probably won’t get only Wordpress to build nowadays. Get more knowledge on CMS, e-Commerce or so. It’s always an added advantage to get more experience on lots of CMS.

I once had a client asked me to design their MODx CMS script, which I have totally no experience at all, I have been working with him for a few project, mainly, Wordpress. You can’t tell if a client would continue working with you if they look ahead with another freelancer and feel more comfortable with them instead. That’s a totaly lost.

I’ve personally downloaded some common CMS and e-Commerce script on my localhost readily to study them once I’m out of Internet.

Social media becoming an important aspect for all business. Whatever site it is, it is crucial to have social media icons ready for users to submit to their favorite social media

Download