The highlights in the sidebar were easy to make. They simply consist of an image and a link. The problem was how to pull an image and link at random AND make it easy for the staff at Vancouver Pink Bus to add new images and links once available.

Using a Custom Post Type seemed to be the easiest way to go about this. To create the custom post type, I added the following to my functions.php file:

// Custom Highlight in sidebar
   add_action('init', 'create_highlight');
     function create_highlight() {
       $highlight_args = array(
          'labels' => array(
           'name' => __( 'Highlights' ),
           'singular_name' => __( 'Highlight' ),
           'add_new' => __( 'Add New Item' ),
           'add_new_item' => __( 'Add New Highlight Item' ),
           'edit_item' => __( 'Edit Highlight Item' ),
           'new_item' => __( 'Add New Highlight Item' ),
           'view_item' => __( 'View Item' ),
           'search_items' => __( 'Search Highlight' ),
           'not_found' => __( 'No highlight items found' ),
           'not_found_in_trash' => __( 'No highlight items found in trash' )
         ),
       'public' => true,
       'show_ui' => true,
       'capability_type' => 'post',
       'hierarchical' => false,
       'rewrite' => true,
       'menu_position' => 20,
       'supports' => array('title', 'editor')
     );
  register_post_type('highlight',$highlight_args);
}
add_filter("manage_edit-highlight_columns", "highlight_edit_columns");
add_action("manage_posts_custom_column",  "highlight_columns_display");

function highlight_edit_columns($highlight_columns){
   $highlight_columns = array(
      "cb" => "<input type=\"checkbox\" />",
      "title" => "Title",
   );
  return $highlight_columns;
}
 function highlight_columns_display($highlight_columns){
 switch ($highlight_columns)
 {
   case "description":
   the_excerpt();
   break;               
 }
}

Once this code in place, the highlights were ready to be populated. Now when a new sidebar image is needed, the folks at Vancouver Pink Bus simply upload a new polaroid image, link it to the page (made so much easier now WordPress 3.1 internal linking feature) and that’s it.

The final step is to display, at random, one of these custom post types. This was done by adding the following to my sidebar:

<h3>Highlights Include</h3>
<?php
 $loop = new WP_Query(array(
  'post_type' => 'highlight',
  'posts_per_page' => 1,
  'orderby'=>'rand'
 ));
?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
  <?php the_content(); ?>
<?php endwhile; ?> 

To find out more about Custom Post Types, I highly recommend Justin’s post and Devin’s Portfolio Theme. With both this tutorial and theme, you’ll be on your way to creating multiple Custom Post Types.

• The client has a site, but requires a new one;
• The client has nothing and needs a site.

Regardless of the situation, it’s best to develop the site in a folder that’s hidden from view. I usually like to develop my site in a wp folder. When people navigate to the site I’m working on they will see the current site or a Coming Soon page at www.domainname.com and the WordPress site in development will be at www.domainname.com/wp.

Another good thing to do while you are developing a site, is to set Privacy Settings to the second option “I would like to block search engines, but allow normal visitors“.

When you are ready to launch, giving WordPress its own directory takes only a few minutes.

1. Navigate to Settings > General in your admin. Change the Site url from www.domainname.com/wp to www.domainname.com. DO NOT TOUCH WordPress url. Hit Save.
2. In your FTP, navigate to your wp folder and download the .htaccess and index.php files. (Uploading them to your desktop is fine. You won’t need to keep these once you are done.)
3. Open the index.php in your text editor and change the line that says:
   require('./wp-blog-header.php');
   to
   require('./wp/wp-blog-header.php');
4. Save the file.
5. Delete the old site from your root folder (making a back up might be a good idea) or the Coming Soon page.
6. Upload this revised index.php and the .htaccess files to your root folder.

That’s it. You should now be able to see the site at www.domainname.com and access the WordPress admin at www.domainname.com/wp.

Don’t forget to change the privacy settings back to the first option, allowing Search engine to find your site.

These instructions are also found in the codex.

These links are great, but they can be improved by pagination which clearly indicates how many pages there are. As always there are many WordPress plugins for this, but there’s really no need. I personally prefer to keep plugins to a minimal and thus found the following tutorials very useful.

Kreisi’s tutorial provides you with all of the code that you need to add pagination to your site. Once you’ve read his detailed information take a look at Veron’s post at Sparklette Studio. She made a few modifications and enhancements to the code.

When creating a template for search results, I do find that displaying excerpts rather than a full post improves usability. However if you simply use the excerpt function, you’ll notice that ellipses [...] are added at the end.

Personally I don’t find these useful at all and would prefer to have a link.

An easy way to fix this is by inserting the following code in your functions file:

function custom_excerpt_more($more) {
return '<br /><a href="'. get_permalink() .'">read more</a>';
}
add_filter('excerpt_more', 'custom_excerpt_more');

This will insert a break tag and add a link to the rest of the post.

You can also control the length of your excerpts if you wish. Simply add the following to your functions file.

function custom_excerpt_length($length) {
return 20;
}
add_filter('excerpt_length', 'custom_excerpt_length');

This function will limit your excerpts to the first 20 words.
Be careful though, if your post is less than 20 words, then the link won’t appear.

A big part of the website was the social media aspect. Thus facebook, twitter and youtube feature prominently on the website. There are plenty of WordPress plugins that allow you to display your latest tweets, but I wanted a simpler solution. The following piece of code proved to be just what I needed:

<?php
$username = "yourTwitterUsername";
$limit = "1"; // Number of tweets to pull in.

/* These prefixes and suffixes will display before and after the entire block of tweets. */
$prefix = ""; // Prefix - some text you want displayed before all your tweets.
$suffix = ""; // Suffix - some text you want displayed after all your tweets.
$tweetprefix = "<p>"; // Prefix - some text you want displayed before each tweet.
$tweetsuffix = "</p>"; // Suffix - some text you want displayed after each tweet.

$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=" . $limit;

function parse_feed($feed, $prefix, $tweetprefix, $tweetsuffix, $suffix) {

$feed = str_replace("&lt;", "<", $feed);
$feed = str_replace("&gt;", ">", $feed);
$feed = str_replace("&quot;", "\"", $feed);
$feed = str_replace("&apos;", "'", $feed);
$clean = explode("<content type=\"html\">", $feed);

$amount = count($clean) - 1;

echo $prefix;

for ($i = 1; $i <= $amount; $i++) {
$cleaner = explode("</content>", $clean[$i]);
echo $tweetprefix;
echo $cleaner[0];
echo $tweetsuffix;
}

echo $suffix;
}

$twitterFeed = file_get_contents($feed);
parse_feed($twitterFeed, $prefix, $tweetprefix, $tweetsuffix, $suffix);
?>

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.