Tutorials

Display random image in sidebar using Custom Post Types

I recently created a website for Vancouver’s newest Tourist Attraction, the Pink Bus Tour. Later this summer, Vancouver residents will witness the Pink Bus carrying tourists around the city. A big part of the website was to showcase the highlights of the city. These highlights are simply pages within the CMS and my goal was to randomly display a “highlight” in the sidebar.

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.

Adding pagination to your blog

Most WordPress themes come bundled up with “next page” and “previous page” links allowing you to navigate from older posts or newer posts. (The number of posts displayed on your blog overview and archives can be set in the Settings > Reading section of your admin.)

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.

Removing ellipses from WordPress excerpts

WordPress allows you to display either the full content or excerpts of your posts.

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.

Enhance your WordPress site with Custom Fields

Over the years of converting other graphic designer’s design into WordPress templates, I’ve had to think of ways to keep the code simple and easy for clients to maintain the site once live. Working on a few challenging design lately has given me the opportunity to look at using custom fields.

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:

Continue reading »