To begin experimenting with this functionality, I decided to package the composite type and functions that support my ZIP code database into an extension.

The simplest extensions, that is those without C code, consist of three files: a SQL file, a control file, and a Makefile.

The SQL file, zipcodes–1.0.sql in this example, contains our composite type and functions.

-- zipcodes--1.0.sql
CREATE type r_zipcode as (zip varchar, lat float, lon float, city varchar, state varchar, state_abbrev varchar, distance float);

CREATE OR REPLACE FUNCTION calculate_distance(double precision, double precision, double precision, double precision) RETURNS double precision
    AS $_$
   BEGIN
      RETURN 3959.0 * acos(sin(radians($1)) * sin(radians($3)) + cos(radians($1)) * cos(radians($3)) * cos((radians($4) - radians($2))));
   END;
   $_$
    LANGUAGE plpgsql;

CREATE OR REPLACE FUNCTION zip_proximity(character varying, double precision) RETURNS SETOF r_zipcode
    AS $_$
   DECLARE
      home_lat double precision;
      home_lon double precision;
   BEGIN
      SELECT lat, lon INTO home_lat, home_lon FROM zipcodes WHERE zip = $1;
      RETURN QUERY SELECT zip, lat, lon, city, state, state_abbrev, calculate_distance(home_lat, home_lon, lat, lon) AS distance
          FROM zipcodes
          WHERE calculate_distance(home_lat, home_lon, lat, lon) < $2
          ORDER BY distance;
   END;
   $_$
    LANGUAGE plpgsql;

Next the control file, zipcodes.control in this example, contains a comment and a version, these will appear in the database in tables such as pg_available_extensions.

# zipcodes.control
# zipcodes extension
comment = 'zipcodes helper functions'
default_version = '1.0'

Finally the Makefile, simply named Makefile. Additional details on the Makefile, along with an explanation of the available variables, can be found in the Postgres extension building infrastructure documentation.

# Makefile
EXTENSION = zipcodes
DATA = zipcodes--1.0.sql

PG_CONFIG = pg_config
PGXS := $(shell $(PG_CONFIG) --pgxs)
include $(PGXS)

After the files are created, proceed to install the extension with the command make install.

{663} sudo make install
/bin/sh /usr/local/lib/postgresql/pgxs/src/makefiles/../../config/install-sh -c -d '/usr/local/share/postgresql/extension'
/bin/sh /usr/local/lib/postgresql/pgxs/src/makefiles/../../config/install-sh -c -d '/usr/local/share/postgresql/extension'
/bin/sh /usr/local/lib/postgresql/pgxs/src/makefiles/../../config/install-sh -c -m 644 ./zipcodes.control '/usr/local/share/postgresql/extension/'
/bin/sh /usr/local/lib/postgresql/pgxs/src/makefiles/../../config/install-sh -c -m 644 ./zipcodes--1.0.sql  '/usr/local/share/postgresql/extension/'

If you see an error like the following

{664} sudo make install
"Makefile", line 7: Could not find
make: fatal errors encountered -- cannot continue

you may have to use gmake instead of make

Now connect to your database and load your new extension with CREATE EXTENSION

zip_test=# create extension zipcodes;
CREATE EXTENSION

Now you can see which extensions are installed (loaded) in your database with the command \dx.

zip_test=# \dx
                  List of installed extensions
   Name   | Version |   Schema   |         Description
----------+---------+------------+------------------------------
 plpgsql  | 1.0     | pg_catalog | PL/pgSQL procedural language
 zipcodes | 1.0     | public     | zipcodes helper functions
(2 rows)

And you can see what objects your extension provides with the command \dx+ extension name.

zip_test=# \dx+ zipcodes
                                 Objects in extension "zipcodes"
                                        Object Description
--------------------------------------------------------------------------------------------------
 function calculate_distance(double precision,double precision,double precision,double precision)
 function zip_proximity(character varying,double precision)
 type r_zipcode
(3 rows)

Our implementation depends on Custom Fields, so before we start, make sure Custom Fields are selected in your post Screen Options.

Once you’re displaying Custom Fields, let’s go ahead and create one, the Custom Fields area appears on the Edit Post screen. Here I’ve named it Unique Sidebar Content, but you’re welcome to name it what you’d like, this name will be the same across all of your posts.

The value of Unique Sidebar Content for this post is Unique content for post 1. This could be your Google Map, Amazon Product Link, etc.

Now that we have our Custom Field, we modify sidebar.php to display the custom field.

Note: If you are modifying themes, you should do so using child themes. Child themes help to preserve your modifications during upgrades, and makes backing out your changes easier if you break something.
Note 2: The only modifications I’ve made to the vanilla Twenty Twelve sidebar.php are adding lines 4-8.
Note 3: Lines 5 and 6 refer to Unique Sidebar Content, if you’re using a different name, make sure that name is reflected here.
Note 4: If you have no widgets in your sidebar, is_active_sidebar() is false, and our code is never reached.

Your modified sidepar.php should resemble the following.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
        <div id="secondary" class="widget-area" role="complementary">
                <?php dynamic_sidebar( 'sidebar-1' ); ?>
                <?php
                if ( is_single() && get_post_meta( $post->ID, 'Unique Sidebar Content', true ) ) :
                        echo get_post_meta( $post->ID, 'Unique Sidebar Content', true );
                endif;
                ?>
        </div><!-- #secondary -->
<?php endif; ?>

After you’ve made these changes, load some posts that you’ve edited to include the Custom Field.

Success!

WIDGET APPROACH

If you want more flexibility in where in your sidebar the unique content will appear, or you just don’t want to edit sidebar.php, you can achieve the same result with a widget and the help of the PHP Code Widget Plugin.

The steps relating to the creation of your Custom Fields remain the same, however instead of modifying sidebar.php, you would create a PHP Code Widget containing the following.

<?php
if ( is_single() ) :
     global $post;
     if ( get_post_meta( $post->ID, 'Unique Sidebar Content', true ) ) :
          echo get_post_meta( $post->ID, 'Unique Sidebar Content', true );
     endif;
     wp_reset_postdata();
endif;
?>

Now you’ll be able to rearrange your sidebar’s custom content as you can any other widget.

One solution proposed on Fancybox’s Tips & Tricks page, is to apply the lightbox only to those <a> tags whose href attribute ends with .jpg, .png or .gif:

$("a[href$=.jpg],a[href$=.png],a[href$=.gif]").fancybox();

This may work for many situations, but it could have unintended consequences depending on your content, so I chose a different approach.

The lightbox I ended up going with is Colorbox, but many others exist, and this article should apply to a majority of them with minimal modification.

If you’ve read any of my other articles you know I usually prefer to avoid using plugins, especially for these simple tasks.

Once you’ve downloaded the lightbox of your choice, choose a location to place the javascript and accompanying stylesheet, in this example I’ve placed both in /js. Then place the following in functions.php. This example uses a child theme, if you’re not, you should replace get_stylesheet_directory_uri() with get_template_directory_uri().

function tgc_scripts_method() {
    wp_register_script( 'jquery.colorbox',
                        get_stylesheet_directory_uri() . '/js/jquery.colorbox-min.js',
                        array( 'jquery' ) );
    wp_enqueue_script( 'jquery.colorbox' );
}

add_action( 'wp_enqueue_scripts', 'tgc_scripts_method' );

Next you’ll need to add the relevant css and javascript to header.php, as in functions.php above, this assumes a child theme. If you’re using a parent theme, replace the stylesheet_directory parameter with template_directory in the bloginfo function.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_directory' ); ?>/js/colorbox.css" />
<script>
    jQuery(document).ready(function () {
        jQuery('a[rel="colorbox"]').colorbox({ rel:"nofollow" });
    });
</script>

Last, we need to modify our <a> tags to include a rel attribute with the value of colorbox. We do this by adding a filter to the_content. This avoids having to update each post or modify the database. Additionally, if we change our mind on which lightbox we want to use, or how we’re invoking it, the modifications will be a lot simpler.

The regular expression we will use targets <a> tags which link to an image (.jpg, .png, or .gif) and where the link text is an <img> tag of the same image. For example:

<a href="image.jpg"><img src="image-1024x701.jpg"/></a>

Here is what you’ll need to add to functions.php

function tgc_colorbox_content_filter( $content ) {
        $url_regex = '/(<a .*href="(.*)\.(jpg|png|gif)")(.*><img .*src="\2.*\.\3".*><\/a>)/i';
        $url_replace = '$1 rel="colorbox" $4';

        return preg_replace( $url_regex, $url_replace, $content );
}

add_filter( 'the_content', 'tgc_colorbox_content_filter' );

As I’ve mentioned in previous articles, you’re strongly encouraged to tackle this using child themes.

First we begin by inspecting the current theme with Firebug. Since the navigation bar is the element we’re interested in, that’s the one we’ll inspect with Firebug. We’re interested in the layout as seen in the image below.

As it turns out, the height of the navigation bar is 43px, that gives us all the information we really need to know to move the navigation bar.

Here’s what our child theme’s style.css looks like.

/*
Theme Name: iamtgc Theme Development
Description: Child theme for the Twenty Eleven theme
Author: tgc
Template: twentyeleven
*/

@import url("../twentyeleven/style.css");

#branding { padding-top: 43px; }

#branding #searchform { padding-top: 43px; }

#access { position: absolute; top: 0; }

And here’s what our new theme looks like once it’s activated.

Once you begin populating the fields, your changes are reflected in the code window. As you may notice, the URLs you’re Pinning will need to be URL encoded.

In order to implement this code generation in WordPress, we’ll get the URL of the webpage the pin is on using

<?php echo urlencode( get_permalink() ); ?>

The URL of the image to be pinned using the post’s full sized featured image.

<?php echo urlencode( wp_get_attachment_url( get_post_thumbnail_id() ) ); ?>

And for the optional Description of the Pin, we’ll use the post’s title

<?php echo urlencode( get_the_title() ); ?>

When we put it all together, here’s what the relevant excerpt of our loop-single.php will look like. If you want to include the Pin Count along with the “Pin It” button, you can change the count-layout attribute to either horizontal or vertical.

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php the_title(); ?>
     <a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php echo urlencode(wp_get_attachment_url(get_post_thumbnail_id())); ?>&description=<?php echo urlencode( get_the_title()); ?>" class="pin-it-button" count-layout="none">Pin It</a>
     <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
</h1>

<div class="entry-meta">
<?php twentyten_posted_on(); ?>
</div><!-- .entry-meta -->