Colorbox with WordPress

I’ve used this method a bunch of times and have decided it’s high time to document the process. It’s my favorite method for using colorbox with the built-in WordPress gallery. Detailed steps after the jump.

  1. Download colorbox.
  2. Figure out which of the four existing design you’d like to use (or write your own) and grab the following files, which are in different directories in the colorbox zip you downloaded:
    • jquery.colorbox-min.js
    • colorbox.css
    • images/

    Put all three into a directory named colorbox inside of your theme folder’s js/ directory.

  3. Download and install the plugin called Cleaner Gallery. On the settings page for this plugin (Appearance > Cleaner Gallery), set the following settings:
    • Gallery Settings: Image Link: Large
    • Gallery Settings: Captions: Use the image title as a caption if there is no caption available
    • Javascript Settings: Image Script: Thickbox – this doesn’t require that you use thickbox, but it makes some changes to the [gallery] output that you need for colorbox also.
  4. Add a new file called functions.js in the theme’s js/ directory and put the following code into it: 
    $(document).ready(function(){
	$('.gallery a:has(img)').colorbox();
	$(".colorbox").colorbox();
});

    This will be sure that the colorbox script is used in the image gallery and also on any link that has the class “colorbox”, so you can add it to other images and links.

  5. Make changes to the header.php of the theme so that it calls in jquery and the colorbox js and css. E.g.: 
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/colorbox/colorbox.css"  type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/functions.js"></script>

    I usually like to put the colorbox css before my main theme’s stylesheet, in case I want to make any simple modifications to the defaults. Also, be sure to call in your javascript in the above order.

That’s it, except perhaps for some additional stylesheet-tweaking.

Some examples:
My portfolio
Congregation Emanuel

posted Mar 4 2010