Winnipeg Web Design

Creating Columns using CSS31 Comment »

Reading time: < 1 minute

Jeffery Way has released another neat Quick Tip which shows us the just another powerful property of CSS3. We have so much to look forward to!

Can you think of any CSS3 properties that don’t get utilized enough? Share them in the comments.

Play PacMan on Google’s Homepage!1 Comment »

Reading time: < 1 minute

Today Google is celebrating the popular PacMan game's birthday is a real cool way. They have embedded their Google Logo in a playable PacMan game.

Maybe I shouldn't have posted this, because now your productivity for the day is ruined.

Copyright Google.

Visit Google’s Homepage

What do you think… cool or annoying?

Google Launches a New Font API0 Comments »

Reading time: 1 – 2 minutes

Google has announced a Font API which is sure to change the way we embed fonts on our websites.

Remember the pains of using sIFR, or FLIR in your website. Going into Flash and changing your font was a real hassle. Along came CSS3 to make it easier using the @font-face rule. Now this is even simpler.

Take a look at Jeffery Way’s screencast from Nettuts and see for yourself.

Using WordPress Custom Fields1 Comment »

Reading time: 2 – 4 minutes

I am going to show how to build a simple way to add a “star” rating at the bottom of a post using WordPress’ Custom Fields. The custom fields are a great way of adding extra bits of information such as paragraphs, images or content which you want to be displayed differently.

Creating a custom field

When adding a new post we want to scroll down to the area called “Custom Fields” and then add a new one. Its good to give this field a useful name as once you have added the custom field you can select it from the drop down box. Next in the value field add what your rating will be. So a value of  “3/5″ is what I used.

Displaying the Custom Field

WordPress has a useful documentation showing how to get started with the custom fields. For this custom field we want to add the following code inside the post loop.

<?php if( get_post_meta(get_the_ID(), 'rating') ){
		$rating = get_post_meta(get_the_ID(), 'rating');
		$rating = explode("/", $rating[0]);
		$good = round($rating[0]);
		$total  = round($rating[1]);

		echo "<h2>This was rated:</h2><p class='rating'>";
		if(!empty($good) && !empty($total) && ($good <= $total) && is_numeric($good) && is_numeric($total) ){
			$i=0;
			while($i < $good){
				echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_on.png'  border='0' />";
					$i++;
			}

			$i = 0;
			while($i < ($total - $good)){
				echo "<img src='http://localhost/wordpress/wp-content/themes/default/images/stars/star_off.png'  border='0' />";
					$i++;
			}
		}else{
			echo "Invalid input for the rating.";
		}

		echo "</p>";
	};
?>

To get the meta data we need to use get_post_meta(); which uses 2 (optional 3rd) values. The first is the post ID, next the key/name of the field and the last optional value is either “true” or “false” to say if you want the information returned as a string.
That script will use the post ID to check if there is any information “rating” that has been set. Next, if it has we assign it to a variable and explode it at the “/”, this means we have the two numbers for the light star and the dark star. After splitting up the rating we run a few checks to make sure that it is valid before we loop through them.

Next we run the two loops that will produce the stars by using the split data and a while loop. And then its done!

As you can see, its very easy to add extra bits of data to your post. This is just one example of how to use the custom fields.

Google Makes Changes: A Lot Like Bing?0 Comments »

Reading time: 1 – 2 minutes

Today Google launched some cool changes which has some people thinking it looks a lot like Bing.

New Logo

Google has changed its logo. It has a lot less bevel and shadows which I think makes it much more clear and crisp.

Google tunes up search results, touches up logo

Left Hand Search Bar

This is the feature that seems to be ripping off Bing. The funny part is that Microsoft has said that most people ignore this feature. Here is a quick look at the sidebar:

Video of the New Google Features