Springthistle Design - We Make Websites! Custom websites, personal attention, friendly service.

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.

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 type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/functions.js">
   <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/colorbox/jquery.colorbox-min.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.

Linking to your plugin in the dashboard menu area

WordPress is built so that when you create a plugin, you can create a link to the plugin’s management page within the existing WordPress admin menu. The instructions for adding this link in Posts, Pages, Tools and Settings are clear. However, instructions for adding that link just under the Dashboard was hard to find. With some experimentation, I figured it out. (more…)

Son of Suckerfish Modification

While working on a new client site, I needed to modify the three-level son-of-suckerfish css rollover menu to display first and second levels initially and only show third level on rollover. The resulting barebones CSS is below. (more…)

Modifying model associations on the fly in cakephp

CakePHP continues to amaze me. There’s a new feature every time I turn around! Yesterday I experimented with something, and found that it worked. I couldn’t find documentation of it anywhere, so decided to write it down.

If you’ve got a model association defined in your model, you can change it on the fly from your controller.

For example, I’ve got Events and Registrants. Registrants can sign up for an event in step 1, and pay in step 2. At the end of step 1, the registrant is entered into the table as not_yet_paid (paid=0), and at the end of step 2, their row is marked as fully_paid (paid=1). But some people quit after step 1, without completing step 2. When reviewing event sign-up statistics, the client wants, understandably, to be able to separate out those who completed the process from those who didn’t. (Sometimes, if you send a prompt to someone who started but didn’t finish, they will come back and pay, so it’s worth keeping the data rather than just throwing it out.)

The association in my Event model looks like this:

var $hasMany = array(
	'Registrant' => array(
		'className' => 'Registrant',
		'foreignKey' => 'event_id',
		'dependent' => false,
		'conditions' => 'Registrant.paid = 1',
	),
);

Now in my controller, I check for a variable set in the URL by the client user when viewing statistics, and decide based on that whether to change the ‘conditions’:

if ($showunpaid=='unpaidtoo')
	$this->Event->hasMany['Registrant']['conditions'] = null;
else if ($showunpaid=='unpaidonly')
	$this->Event->hasMany['Registrant']['conditions'] = "Registrant.paid = 0";

This way, registered-but-unpaid registrants are never counted and never show up by default, but that can be changed easily from any controller.

Gotta love cake.

Featured post [shortcode]

Over at RhodiaDrive.com, they wanted to be able to sprinkle featured posts in the sidebar using widgets. Via my solution, the authors can choose a post to feature, add a text widget to the sidebar, and enter a simple shortcode. The widget will then display the post’s title and an excerpt of the content with a link to the post page.

Usage:
[ahs_featuredpost id=364]

Want it? Just copy the code below/after the jump into the functions.php file for your current theme and voila! You can then style the elements in the widget, which are all in a div with class=”featuredpost”.

(more…)

Using [shortcodes] in widgets

Want to be able to use WordPress shortcodes in your widgets? Just add the following to functions.php in your active theme:

add_filter('widget_text', 'do_shortcode');