Build a custom image slider on your home page using built-in WordPress functions

Image sliders are quite popular and add a nice visual element to any website. You could use a plugin to add one to your site, but wordPress has all of the functionality built-in for you to integrate one in any theme of your liking. If you’re a theme developer, you’ll want to follow along and add this code snippets to your collection.

I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.
Read more…

Writing and Publishing Posts in WordPress

If you are new to WordPress, one of the first thing you’ll need to learn is how to write and publish posts. This short video by Michael Pick covers this topic very elegantly. The video is a few years old and your dashboard may not look exactly the same, but the principles are the same and this should give you a great starting point.

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;
}

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.

Setting up WordPress for development

If you’re like me, chances are, you won’t be building and launching a site in a day. Websites take time to set up, design, populate with content and test. As a web designers you will probably have clients who fall in one of these situations.

  • 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.

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.

How to use Slimbox plugin to display your portfolio in WordPress

If you’ve been following the Bluelime Media website you will know that we’ve partnered with Barbara from BlueCitrus on many occasions to develop websites and as the saying goes, “The son of the cobbler has no shoes“, the BlueCitrus website was in need of a facelift. My latest teaching gig at Langara provided me with the opportunity to design and develop a WordPress site for Barbara. The goal of the class was to teach the students how to use WordPress to create a portfolio. So building a site for Barbara was the perfect project.

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.

Read more…