Here are the steps required to integrate cufón in your wordPress site:

Step 1 – Get cufón
Visit the cufón website and download the YUI-compressed version of cufón. Save this js file in a js folder in your wordPress theme.

Step 2 – Generate your font file
Follow the steps on the Cufón website and add the generated js file to your js folder in your wordPress theme. You’ll be required to upload your font files and thus you need to have purchased them as well as verified that your fonts are legal to use in font embedding. Upload your js folder in your wordPress theme via FTP.

Step 3 – Add the code to your wordPress template
To use cufón, simply add the following lines of code to your header.php file.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/your_cufon_generated_font_file.js"></script>
<script type="text/javascript">
 Cufon.replace('h1');
 Cufon.replace('h2');
</script>

These few lines of code will convert all of your h1 and h2 into my selected font. That’s it.

Barbara laid the ground work and designed the header, navigation and gave me a good indication of how she wanted the site to work, but I was given carte blanche on how to make the portfolio work. After looking at numerous portfolio examples, I came across the stunning work of Koldo Barroso. Koldo’s illustrations are simply marvelous and I could look at them all day. His portfolio section is simple, yet very elegant. On closer examination of his site, I noticed that he uses Slimbox to display his gallery pieces which is just a slimmed down version of the original Lightbox.

A few clicks later, I read a few tutorials on how to use Slimbox and decided to use it to build it Barbara’s portfolio section. If you’re familiar with WordPress plugins, you’ll know that beyond how to install and activate, instructions are usually fairly slim when it comes to how to use them. Since I just finished the site and the steps I took are still fresh in my mind, I thought I’d walk you through on how to set your own gallery using the Slimbox Plugin.

Step 1:
Download the Slimbox plugin, upload it to your plugins folder and activate it.

Step 2:
Get your portfolio images ready. During the design process, I came to the decision of making my large images 500px x 405px and the thumbnails 110px x 80px. In my WordPress admin, under Media, I set the size of my thumbnails to 110px and 80px. I then proceeded to create all of the portfolio images and uploaded them using WordPress’s media tool. During this process, WordPress automatically created corresponding thumbnails and added a -100×80.jpg extension to them. The thumbnails weren’t exactly as Barbara had hoped for, so I downloaded them all, she tweaked them in Photoshop ensuring the the same names were kept, I then re-uploaded them to the server and replaced the old ones.

Step3:
Once the images in the media library, it was time to add them to the WordPress Websites Page. I opted for a unordered list of items to display the thumbnails.

Using the image insert tool, I selected the image to show, fine-tuned the title of the image, ensured that the file url was selected, selected the thumbnail size and clicked insert into post.

Which gave me the following line of code.

<ul class="thumbnails">
<li>
<a href="http://www.domainname.com/wp-content/uploads/image1.jpg"><img title="Portfolio Piece 1" src="http://www.domainname.com/wp-content/uploads/image1-100x80.jpg" alt="Portfolio Piece 1" width="100" height="80" /></a>
</li>
</ul>

In order to activate the lightbox, I then inserted rel=”lightbox” to the anchor tag.

<ul class="thumbnails">
<li>
<a href="http://www.domainname.com/wp-content/uploads/image1.jpg" rel="lightbox"><img title="Portfolio Piece 1" src="http://www.domainname.com/wp-content/uploads/image1-100x80.jpg" alt="Portfolio Piece 1" width="100" height="80" /></a>
</li>
</ul>

In order to display the caption under the image a title must also be added to the anchor tag.

<ul class="thumbnails">
<li>
<a href="http://www.domainname.com/wp-content/uploads/image1.jpg" rel="lightbox" title="Portfolio Piece 1"><img title="Portfolio Piece 1" src="http://www.domainname.com/wp-content/uploads/image1-100x80.jpg" alt="Portfolio Piece 1" width="100" height="80" /></a>
</li>
</ul>

This code now works perfectly, but you probably want to display more than one image. All you need to do is repeat the process and modify the relative attribute. Instead of using rel=”lightbox” I used rel=”lightbox-website” on all anchor tags. Modifying the relative attribute this way activates the previous and next links on the images.

<ul class="thumbnails">
<li>
<a href="http://www.domainname.com/wp-content/uploads/image1.jpg" rel="lightbox-website" title="Portfolio Piece 1"><img title="Portfolio Piece 1" src="http://www.domainname.com/wp-content/uploads/image1-100x80.jpg" alt="Portfolio Piece 1" width="100" height="80" /></a>
</li>
<li>
<a href="http://www.domainname.com/wp-content/uploads/image2.jpg" rel="lightbox-website" title="Portfolio Piece 2"><img title="Portfolio Piece 2" src="http://www.domainname.com/wp-content/uploads/image2-100x80.jpg" alt="Portfolio Piece 2" width="100" height="80" /></a>
</li>
</ul>

You’ll notice that on Barbara’s website, once you view the images in the lightbox, you can read the title of the image but also visit the website by clicking the link.  To do this, you need to add the link to your title.

So you might be tempted to using something like:

title="Portfolio Piece 1 - <a href="http://www.domainname.com" target="_blank">visit website</a>"

But you will soon find out that this doesn’t work. What you need to do is swap some of the characters for their html equivalent. For example, quotes (”) would be " and brackets (<) would be <. So your final code will be something like this:

<ul class="thumbnails">
<li>
<a href="http://www.domainname.com/wp-content/uploads/image1.jpg" rel="lightbox-website" title="Portfolio Piece 1 - &lt;a target=&quot;_blank&quot; href=&quot;http://www.domainname1.com/&quot;&gt;visit website&lt;/a&gt;"><img title="Portfolio Piece 1" src="http://www.domainname.com/wp-content/uploads/image1-100x80.jpg" alt="Portfolio Piece 1" width="100" height="80" /></a>
</li>
<li>
<a href="http://www.domainname.com/wp-content/uploads/image2.jpg" rel="lightbox-website" title="Portfolio Piece 2 - &lt;a target=&quot;_blank&quot; href=&quot;http://www.domainname1.com/&quot;&gt;visit website&lt;/a&gt;"><img title="Portfolio Piece 2" src="http://www.domainname.com/wp-content/uploads/image2-100x80.jpg" alt="Portfolio Piece 2" width="100" height="80" /></a>
</li>
</ul>

Step4:
Once all your thumbnails are in place, you may want to adjust your style.css. Here’s what I used for the Bluecitrus website.

ul.thumbnails {width:520px; list-style:none; margin:0; padding:0;}
.thumbnails li {float:left; margin:5px 4px 5px 3px;}
.thumbnails img  {width:110px; height:80px; padding:5px; vertical-align:bottom;}
.thumbnails a {border:1px solid #D4D4D4; background:#FFF; display:block; margin-bottom:5px; float:left;}
.thumbnails a:hover img {background:#F9F9F9;}

You can see the final results here.

You’ll find custom fields in your admin panel under all post and page text areas. These custom fields allow you to add extra information, technically termed meta-data, and allows you to add jazz up your posts or pages. Here are a few examples of how custom fields can be used:

Add a style to your header

Navigating through the various topic of one of our latest projects, “The Challenge Series” you’ll notice that the sustainability section has a green title, while history is orange, policy red and design concepts blue.

This was achieved by doing the following:
1. Adding a custom field called Colour and assigning it a value of green, orange, red of blue.

2. Editing the code in my index.php as follows:

<h1 class="<?php $key="Colour"; echo get_post_meta($post->ID, $key, true); ?>"><?php the_title(); ?></h1>

3. Setting up the appropriate styles in my CSS as follows:

h1.orange {background:#F26F21 }
h1.green {background:#5D9632}
h1.red {background:#B22217}
h1.blue {background:#00728E}

Insert an image outside your content area

During the build of the latest version of the Crisis Centre website, the design required that a unique image be inserted in the top right hand corner of each page. Inserting the image within the main content entry would have required me to fiddle with the padding of my paragraph tags. Instead I opted to use a custom field and added this piece of code to my index.php template:

<div id="photo"><img src="<?php bloginfo('template_directory'); ?>/images/photos/<?php $key="photo"; echo get_post_meta($post->ID, $key, true); ?>" alt="" border="0" /></div>

This line of code, simply pulls the image specified in the custom field and inserts in a div tag which has its own unique style.

Although custom fields, can get a bit tricky, especially when using more than one per entry, they allow you to enhance your site and give you much more design freedom.

The following examples are just code snippets that you can add to your sidebar.php template file. These snippets will not work if your website use sidebar widgets. (That’s not exactly true, but it’s a bit more complicated.)

The first example is very simple and can be seen live on the kitsilano.ca website.

First you’ll need to edit your sidebar.php template and add the following lines of code:

<h2>Follow Us</h2>
<ul>
<li class="rss">
<a href="[insert your rss link here]">Get our Feed</a>
</li>
<li class="twitter">
<a href="[insert your twitter link here]">On Twitter</a>
</li>
</ul>

Next you can adjust the styling by adding this piece of code to your style.css

#sidebar li.rss {background:url(images/rss.gif) 0 50% no-repeat;}
#sidebar li.twitter {background:url(images/twitter.gif) 0 50%  no-repeat;}
#sidebar li.rss a, #sidebar li.twitter a {padding-left:20px;}

The icons will also have to be uploaded in your templates’ images folder. You can use your own icons or grab the ones that I’ve used by downloading the zip file.

The second example may look a bit more complex, but is just as easy and can be seen on the mudcreative.com sidebar.

First insert these lines of code in your sidebar.php:

<div id="social_media">
<h2>Follow Us</h2>
<ul>
<li><a href="[insert your link to linked in here]"><img src="<?php bloginfo('template_directory'); ?>/images/linkedin.png" alt="View our linked in profile" width="32" height="32" border="0" /></a></li>
<li><a href="[insert your link to twitter here]"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="On Twitter" width="32" height="32" border="0"></a></li>
<li><a href="[insert your link to rss feed here]"><img src="<?php bloginfo('template_directory'); ?>/images/rss.png" alt="Via our RSS feed" width="32" height="32" border="0" /></a></li>
<li><a href="[insert your link to facebook here]"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="On Facebook" width="32" height="32" border="0"></a></li>
</ul>
</div>

Next, add the following to your style.css

#social_media {
width:200px;
background:#F2F7F7;
border:1px solid #ACD0D1;
padding: 0 0 5px 0; margin-bottom:10px;
}
#social_media ul {list-style-type:none; margin:0 0 0 6px; padding:0;}
#social_media ul li {display:inline; padding: 0 6px 0 0;}

Depending on what your stylesheet already contains, you may need to make a few tweaks, but it should be pretty straightforward. Here is zip file with the code snippets and icons. Have fun.

This site is definitely worth bookmarking and investigating further.

Possibly because of my stubbornness I tried all sorts of  CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.

I asked Ben to look at my code and in my coda-slider.js file, he simply changed

.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />')
.after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');

to this:

.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'"
onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />')
.after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');

Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.

In case anybody is interested in re-creating this example, here are the files are zipped up for you to play with.

What’s this CSS?
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.

As the major browsers continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Websites where the content of HTML documents was clearly separated from the document’s presentation layout.

To solve this problem, the World Wide Web Consortium (W3C) created STYLES. Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute.

So what’s the advantage?
Styles are normally saved in an external file which allows us to change the appearance and layout of all the pages in a Website, simply by editing one single document! This saves us loads of time which means money for our clients.

Style sheets also allow us to reduce the amount of HTML code which means smaller file size which load faster and better search engine ranking.

How is code reduced?
Let’s take the following example. Below is a screenshot of a typical navigation.

The old way of coding this nav bar using tables would be as follows:

1. <table cellpadding="0" cellspacing="0" border="0">
2. <tr>
3. <td><img name="image1" src="images/home_over.gif"
4. alt="home" border="0" /><a href="#" onmouseover="image2.src='images/about_over.gif';"
onmouseout="image2.src='images/about.gif';"><img name="image2" src="images/about.gif" alt="about" border="0" /></a></td>
5. <td><a href="#" onmouseover="image3.src='images/services_over.gif';"
6. onmouseout="image3.src='images/services.gif';"><img name="image3" src="images/services.gif" alt="services" border="0" /></a></td>
7. <td><a href="#" onmouseover="image4.src='images/portfolio_over.gif';" onmouseout="image4.src='images/portfolio.gif';"><img name="image4" src="images/portfolio.gif" alt="portfolio" border="0" /></a></td>
8. <td><a href="#" onmouseover="image5.src='images/news_over.gif';"
onmouseout="image5.src='images/news.gif';"><img name="image5" src="images/news.gif" alt="news" border="0" /></a></td>
9. <td><a href="#" onmouseover="image8.src='images/contact_over.gif';" onmouseout="image8.src='images/contact.gif';"><img name="image8"
src="images/contact.gif" alt="contact" border="0" /></a></td>
10. </tr>
11. </table>

Using css the same navigation is reduced to these few lines:

1. <ul id="nav1">
2. <li><a class="home" href="#"><span>home</span></a></li>
3. <li><a class="about" href="#"><span>about</span></a></li>
4. <li><a class="services" href="#"><span>services</span></a></li>
5. <li><a class="portfolio" href="#"><span>portfolio</span></a></li>
6. <li><a class="news" href="#"><span>news</span></a></li>
7. <li><a class="contact" href="#"><span>contact</span></a></li>
8. </ul>

If you’re not convinced that the result is the same, take a look at the example in action or download the files.

How is search engine ranking improved?
Search engine spiders see the same thing we do, words. Open any browser window, click on View and Source (IE) or Page Source (Firefox) and take a look at the code. A Search engine friendly site should be easy to read. If your website is full of code which doesn’t mean much to you, chances are it won’t mean anything to search engine spiders either.