Illuminati Karate, Inc. » Web Development

How to Add Custom Fields to Media in WordPress

Richard Gabriel — Fri, 13 Apr 2012 00:03:32 +0000

Sometimes a WordPress project calls for custom fields on Media. We recently built a custom gallery widget that involved uploading multiple images that would have a caption, a heading, the ability to selectively output the image, and the ability to set the hex code color of the text that was output.

To achieve this, I created a custom field on images that would allow you to input a value to be used as the color for the text and a custom checkbox to indicate to output the image.

There are two steps to this:

Add the custom field to the edit screen,
Process that field when saving / updating the media item.

All of the following code can go into functions.php in your theme’s directory.

Step 1: Adding the Custom Fields to the Edit Screen.

^?View Code PHP

function ik_image_attachment_fields_to_edit($form_fields, $post) {
	//we use this variable to set whether or not the checkbox is currently checked
	//defaults to not being checked
	$checked = get_post_meta($post->ID, "_ik_is_hero", true) ? "CHECKED" : "";
 
	//to add a field to the form, there are a few values to set here
	//label: the label of the field being output
	//input: the type of input being output - can use 'html' as value for more custom control
	//value: the current value of the input
	//helps: the descriptive text shown below the field
	//html: the custom html to use for a field if input is set to 'html' (see: 'ik_is_hero')
	$form_fields["ik_text_color"] = array(
		"label" => __("Custom Text Color"),
		"input" => "text", // this is default if "input" is omitted
		"value" => get_post_meta($post->ID, "_ik_text_color", true),
                "helps" => __("Expects a hex code."),
	);
 
	$form_fields["ik_is_hero"] = array(
		"label" => __("Show In Hero Widget"),
		'input' => 'html',
		'html'  => "{$checked}/>
",
		"helps" => __("If checked, this image will show in the widget."),
	);
 
   return $form_fields;
}
 
// now attach our function to the hook
add_filter("attachment_fields_to_edit", "ik_image_attachment_fields_to_edit", null, 2);

An important note for when using the html input type: be sure to follow this convention for the name and id of your input – 'attachments[the attachment id][the custom field slug]'. Otherwise you’ll have trouble saving the fields with the code below.

Step 2: Updating the Custom Fields on Save.

^?View Code PHP

function ik_image_attachment_fields_to_save($post, $attachment) {
	//for the standard input, we check to see if it's set and, if so, save it
	//if you want to modify or sanitize the data, now is the time to do so
	if( isset($attachment['ik_text_color']) ){
		update_post_meta($post['ID'], '_ik_text_color', $attachment['ik_text_color']);
	}
	//for the checkbox we save the value if it's currently checked
	//if it's not checked there won't be a value set, so we set it to '0'
	if( isset($attachment['ik_is_hero']) ){
		update_post_meta($post['ID'], '_ik_is_hero', $attachment['ik_is_hero']);
	} else {
		update_post_meta($post['ID'], '_ik_is_hero', 0);
	}
	return $post;
}
 
// now attach our function to the hook
add_filter("attachment_fields_to_save", "ik_image_attachment_fields_to_save", null , 2);

Don’t forget to use the fields!

^?View Code PHP

//load the data (assuming you've already loaded the media, in this case post attachments)
$is_checked = get_post_meta($attachment->ID, "_ik_is_hero", true);
$text_color = get_post_meta($attachment->ID, "_ik_text_color", true);
 
//now you can do whatever you want!

I hope this is helpful! Feel free to ask questions in the comments.

WordPress: How to Exclude Categories From the Archive Widget

Richard Gabriel — Tue, 27 Mar 2012 20:28:34 +0000

Updated: 5/2/2012

We love developing in WordPress. For many of our clients, there is no need to reinvent the wheel and WordPress can be a significant time saver.

WordPress is a very thoroughly developed platform – yet every now and again we bump into desired functionality that isn’t readily available, such as excluding categories from the Archive Widget.

Recently, I developed some code to do just that and thought I would share it.

If you want to know how to include categories, instead of excluding them, read my reply to Ian’s comment below.

The default Archives Widget gives you just a few options: you can set the title, use a drop-down or a list, and display the post count next to the month. You get more functionality if you use the wp_get_archives() function, but that won’t always get you what you need (and sometimes you really want to use a widget).

After spending some time poking around in general-template.php (/wp-includes/general-template.php), I found what I was looking for around lines 918-919: two filters, ‘getarchives_where’ and ‘getarchives_join’. These filters are applied to the SQL right before the Archives query is run, so they are the ideal point to do any heavy customization to the data that is displayed there.

What each of them does is pretty self-explanatory; getarchives_where modifies the WHERE clause of the SQL query and getarchives_join modifies the JOIN clause of the SQL query. Arm yourself with a bit of knowledge as to how WordPress works and these become some powerful tools.

On to the code…

Here are two functions that will update the SQL as desired:

^?View Code PHP

//add custom SQL to the archives widget JOIN clause
function ik_custom_archives_join($sql){
	global $wpdb;
 
	$sql = $sql . "LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id) "; 
	$sql = $sql . "LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id) ";
 
	return $sql;
}

The above code will join in the Category information, to be used for excluding the desired Categories in the following code:

^?View Code PHP

//add custom SQL to the archives widget WHERE clause
function ik_custom_archives_where($sql){
	global $wpdb;
 
	//get categories IDs from slugs
	$exclude_cat_1 = get_category_by_slug("exclude-cat-1");
	$exclude_cat_2 = get_category_by_slug("exclude-cat-2");
 
	//list of categories to exclude
	$exclude_list = $exclude_cat_1->cat_ID . ', ' . $exclude_cat_2->cat_ID;
 
	$sql = "WHERE post_type = 'post' AND post_status = 'publish' ";
	$sql = $sql . "AND $wpdb->term_taxonomy.term_id NOT IN ($exclude_list)";
 
	return $sql;
}

The above code does a couple of things:

Loads the category data by slug (recommended as it’s hard to predict IDs)
Modifies the WHERE clause to exclude those Categories

With those 2 functions in hand, you just need to add the filters to your theme’s functions.php file:

^?View Code PHP

//add the ik archive filters
add_filter('getarchives_where','ik_custom_archives_where',10,2);
add_filter('getarchives_join','ik_custom_archives_join',10,2);

And that’s it! A simple solution to exclude certain categories from the default Archives widget.

If you know a bit of SQL you can also use this code to make other modifications to the Archives widget, such as custom date ranges, excluding or including custom post types, and more.

Here’s the full code:

^?View Code PHP

//add the ik archive filters
add_filter('getarchives_where','ik_custom_archives_where',10,2);
add_filter('getarchives_join','ik_custom_archives_join',10,2);
 
//add custom SQL to the archives widget JOIN clause
function ik_custom_archives_join($sql){
	global $wpdb;
 
	$sql = $sql . "LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id) "; 
	$sql = $sql . "LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id) ";
 
	return $sql;
}
 
//add custom SQL to the archives widget WHERE clause
function ik_custom_archives_where($sql){
	global $wpdb;
 
	//get categories IDs from slugs
	$exclude_cat_1 = get_category_by_slug("exclude-cat-1");
	$exclude_cat_2 = get_category_by_slug("exclude-cat-2");
 
	//list of categories to exclude
	$exclude_list = $exclude_cat_1->cat_ID . ', ' . $exclude_cat_2->cat_ID;
 
	$sql = "WHERE post_type = 'post' AND post_status = 'publish' ";
	$sql = $sql . "AND $wpdb->term_taxonomy.term_id NOT IN ($exclude_list)";
 
	return $sql;
}

Display Recent Spotify Track with Album Cover using PHP

Richard Gabriel — Fri, 23 Mar 2012 04:32:29 +0000

Many of our clients show their personalities on their websites – from Facebook to Twitter feeds, photo streams and more, they like to integrate a bit of themselves. While hooking up a Social Media feed is no problem, recently we had a unique request to develop a widget that displays the most recently listened to Spotify track with artist information and album cover.

It turns out there isn’t a straightforward way to do this; after a little digging around on the internet, and the help of the Spotify API, we were able to put together a solution that I wanted to share.

There are several steps to this process:

Create a Lastfm account and setup Spotify to scrobble to Last.fm
Pull the Lastfm Recent Tracks RSS feed
Look-up the desired Track using the Spotify Metadata API and load the data

First, we need a basic cURL function:

^?View Code PHP

function fetchUrl($url){
     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     curl_setopt($ch, CURLOPT_TIMEOUT, 20);
 
     $retData = curl_exec($ch);
     curl_close($ch); 
 
     return $retData;
}

With that in hand, it’s time to get down to business.

We start by loading the Last.fm RSS feed to get the latest track:

^?View Code PHP

function loadSpotifyTracks($username, $count = 1){
	$lastfm_url = "ws.audioscrobbler.com/2.0/user/".$username."/recenttracks.rss";
 
	$trackAttributes = array();
 
	$rss = fetchUrl($lastfm_url);
	$rss = simplexml_load_string($rss);
 
	for($i=0; $i<$count; $i++) {
		$url = $rss->channel->item[$i]->link;
		$title = $rss->channel->item[$i]->title;
		$pubDate = $rss->channel->item[$i]->pubDate;
		$pubDate_time = strtotime($pubDate);
 
		//format is Artist - Track
		$artistData = explode(" – ", $title);
 
		//get track album cover and info
		$trackAttributes[] = getTrackAttributes($artistData[1], $artistData[0]);
	}
 
	return $trackAttributes;
}

The above function will load the Most Recent RSS Feed of the Lastfm account passed, and will loop through $count of them, loading the attributes.

You need to include the following function to be able to load the attributes from Spotify:

^?View Code PHP

//get attributes of track from Spotify
function getTrackAttributes($trackname, $artistname){	
	//default return data
	$retData = array(
		'title' => "",
		'artist' => "",
		'cover' => "",
		'album' => "",
		'trackUrl' => ""
	);
 
	//search spotify, find match by artist and trackname, then pull that data
	$first_url = 'http://ws.spotify.com/search/1/track?q=' . urlencode($trackname);
	$result = fetchUrl($first_url);		
	$xmlObjs = simplexml_load_string($result);
 
	if ($xmlObjs) {
		foreach($xmlObjs as $xmlObj){
			//check to see if the Track and Album name both match,
			//if they do, use the data
			//there's many ways to do this, this is quick and dirty version
			if(strtolower($xmlObj->name) == strtolower($trackname) && strtolower($xmlObj->artist->name) == strtolower($artistname)){
				$albumName = "";
				$trackURL = "#";
				$albumName = $xmlObj->album->name;
				$trackURL = $xmlObj->attributes()->href;
				$uri = end(explode(":", $trackURL));
				$trackURL = 'http://open.spotify.com/track/' . $uri;				
				$coverResults = fetchUrl($trackURL);//load album cover info from track
 
				if($coverResults){
					$parser = xml_parser_create();
					$vals = $index = array();
 
					xml_parse_into_struct($parser, $coverResults, $vals, $index);
					xml_parser_free($parser);
 
					if(count($vals)){
						foreach($vals as $val){
							if($val['tag'] == 'META' && substr($val['attributes']['PROPERTY'], 0, 14) == 'og:image') {
								$coverImage = $val['attributes']['CONTENT'];
							}
						}
					}
				}
 
				//we want the fullsized image, not the thumbnail
				$coverImage = str_replace('thumb', 'image', $coverImage);	
 
				//no image? use the default data
				//you can remove this check if you're ok not having an album cover
				if(strlen($coverImage) > 4){
					//has cover image, use the returned data
					$retData['title'] = $trackname;
					$retData['artist'] = $artistname;
					$retData['cover'] =  $coverImage;
					$retData['album'] = $albumName;
					$retData['trackUrl'] = $trackURL;
				}
			}
		}		
	}
 
	return $retData;
}

Here’s what that wall-of-text does:

Searches for the Track using the Spotify API
If a matching track/album is found, generates a Track URL from the match’s URI
Loads that track’s info from the Spotify API and grabs the image from the result

A few notes:

You will want to cache your requests. It’s polite (and they’ll probably cut you off, otherwise).
You’ll probably want some fallback display data. Sometimes an exact match isn’t found. The above code isn’t perfect.
You might want to think about loading this via AJAX – the page can hang a second while waiting for the info to load.

Here is the complete code, in one box:

^?View Code PHP

function fetchUrl($url){
     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     curl_setopt($ch, CURLOPT_TIMEOUT, 20);
 
     $retData = curl_exec($ch);
     curl_close($ch); 
 
     return $retData;
}
 
//get attributes of track from Spotify
function getTrackAttributes($trackname, $artistname){	
	//default return data
	$retData = array(
		'title' => "",
		'artist' => "",
		'cover' => "",
		'album' => "",
		'trackUrl' => ""
	);
 
	//search spotify, find match by artist and trackname, then pull that data
	$first_url = 'http://ws.spotify.com/search/1/track?q=' . urlencode($trackname);
	$result = fetchUrl($first_url);		
	$xmlObjs = simplexml_load_string($result);
 
	if ($xmlObjs) {
		foreach($xmlObjs as $xmlObj){
			//check to see if the Track and Album name both match,
			//if they do, use the data
			if(strtolower($xmlObj->name) == strtolower($trackname) && strtolower($xmlObj->artist->name) == strtolower($artistname)){
				$albumName = "";
				$trackURL = "#";
				$albumName = $xmlObj->album->name;
				$trackURL = $xmlObj->attributes()->href;
				$uri = end(explode(":", $trackURL));
				$trackURL = 'http://open.spotify.com/track/' . $uri;				
				$coverResults = fetchUrl($trackURL);//load album cover info from track
 
				if($coverResults){
					$parser = xml_parser_create();
					$vals = $index = array();
 
					xml_parse_into_struct($parser, $coverResults, $vals, $index);
					xml_parser_free($parser);
 
					if(count($vals)){
						foreach($vals as $val){
							if($val['tag'] == 'META' && substr($val['attributes']['PROPERTY'], 0, 14) == 'og:image') {
								$coverImage = $val['attributes']['CONTENT'];
							}
						}
					}
				}
 
				//we want the fullsized image, not the thumbnail
				$coverImage = str_replace('thumb', 'image', $coverImage);	
 
				//no image? use the default data
				//you can remove this check if you're ok not having an album cover
				if(strlen($coverImage) > 4){
					//has cover image, use the returned data
					$retData['title'] = $trackname;
					$retData['artist'] = $artistname;
					$retData['cover'] =  $coverImage;
					$retData['album'] = $albumName;
					$retData['trackUrl'] = $trackURL;
				}
			}
		}		
	}
 
	return $retData;
}
 
//load Spotify Tracks
function loadSpotifyTracks($username, $count = 1){
	$lastfm_url = "ws.audioscrobbler.com/2.0/user/".$username."/recenttracks.rss";
 
	$trackAttributes = array();
 
	$rss = fetchUrl($lastfm_url);
	$rss = simplexml_load_string($rss);
 
	for($i=0; $i<$count; $i++) {
		$url = $rss->channel->item[$i]->link;
		$title = $rss->channel->item[$i]->title;
		$pubDate = $rss->channel->item[$i]->pubDate;
		$pubDate_time = strtotime($pubDate);
 
		//format is Artist - Track
		$artistData = explode(" – ", $title);
 
		//get track album cover and info
		$trackAttributes[] = getTrackAttributes($artistData[1], $artistData[0]);
	}
 
	return $trackAttributes;
}
 
//do something!
$trackAttributes = loadSpotify("username");
 
//only output data if a match is found
if(strlen($trackAttributes['trackUrl']) > 2){
	$output .= '. $trackAttributes['trackUrl'] . '" target="_blank">.$trackAttributes['cover'].'" />';
	$output .= '
			' . $trackAttributes['title'] . '
			by ' . $trackAttributes['artist'] . '
			on ' . $trackAttributes['album'] . '
		';
 
	echo $output;
}

And that’s it! A solution to display recent Spotify track with album cover using PHP.

I hope you find it helpful!

WordPress: Only Show Authors Their Own Posts and Media in the Admin Area

Richard Gabriel — Wed, 18 Jan 2012 01:45:08 +0000

Updated: 5/13/2012

I’ve helped our clients set up a lot of membership sites; one common request is that members are able to submit articles within WordPress.

Out-of-the-box WordPress can get you pretty far but commonly I run into two roadblocks with the default roles:

The Contributor role doesn’t let Contributors see the Media Library
The Author role lets Authors see everyone’s Media & Posts

While more often than not a plugin is the way to go for a full-on membership site, there’s a really quick fix that will let you assign users to the Author role and be able to hide other’s Media & Posts from them.

Edit: Per Winston Small’s comment below, in WordPress 3.2.1 you have to change ‘/wp-admin/upload.php’ to ‘/wp-admin/media-upload.php’.

Paste the following code into your theme’s functions.php file:

^?View Code PHP

//restrict authors to only being able to view media that they've uploaded
function ik_eyes_only( $wp_query ) {
	//are we looking at the Media Library or the Posts list?
	if ( strpos( $_SERVER[ 'REQUEST_URI' ], '/wp-admin/upload.php' ) !== false  
	|| strpos( $_SERVER[ 'REQUEST_URI' ], '/wp-admin/edit.php' ) !== false ) {
		//user level 5 converts to Editor
		if ( !current_user_can( 'level_5' ) ) {
			//restrict the query to current user
			global $current_user;
			$wp_query->set( 'author', $current_user->id );
		}
	}
}

^?View Code PHP

//filter media library & posts list for authors
add_filter('parse_query', 'ik_eyes_only' );

The above code will check to see if you are viewing the Media Library or the Posts section of the WordPress admin. If you are, it then checks to see if you are at Level 5 or above (e.g: Editor or Administrator). If you aren’t either of those two then it modifies the query to only include items authored by the current user.

With that code in place you just need to add it to the parse_query filter and you’re off to the races!

I hope this is helpful! Ask any questions in the comments.

How To Add A Lightbox To A WordPress Gallery

Richard Gabriel — Mon, 01 Aug 2011 14:39:25 +0000

Updated: 2/29/12

I wanted to setup a simple lightbox photo gallery on a WordPress site (v3.2.1, tested and working on 3.3.1) and, to avoid installing a slew of plugins, I put together a little gallery shortcode function using the built-in WordPress gallery shortcode as my starting point. I’m a big fan of PrettyPhoto, so I modified the output of the gallery shortcode to include a rel= attribute for PrettyPhoto galleries.

I grabbed the standard WordPress gallery shortcode from line ~758 in wp-includes/media.php and pasted it into my_theme/functions.php for modification. For the more adventurous folks you can override the default WordPress gallery shortcode and then galleries you’ve inserted using the Media Gallery will be lightboxed.

This also gives you a good entry point for making other modifications to the standard gallery output.

Here’s the code I ended up with in functions.php (shortened for readability, you’ll want to copy and past the entire block of code below this into your functions.php file):

^?View Code PHP

add_shortcode('my_gallery_shortcode', 'my_gallery_shortcode_function');
 
function my_gallery_shortcode_function($attr) {
 
	foreach ( $attachments as $id => $attachment ) {
		$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
 
		//add rel="prettyPhoto[pp_gal]"
		//this is my edit
		$link = str_replace('>,'rel="prettyPhoto[pp_gal]" >,$link);
 
		$output .= "<{$itemtag} class='gallery-item'>";
		$output .= "
			<{$icontag} class='gallery-icon'>
				$link
			{$icontag}>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='wp-caption-text gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				{$captiontag}>";
		}
		$output .= "{$itemtag}>";
		if ( $columns > 0 && ++$i % $columns == 0 )
			$output .= '
';
	}
 
	$output .= "
			

		\n";
 
	return $output;
}

My edit was small, I added $link=str_replace('> to the gallery output so that PrettyPhoto can do it’s thing.


Here is the full code to copy and paste into your functions.php file:

^?View Code PHP
add_shortcode('my_gallery_shortcode', 'my_gallery_shortcode_function');
 
function my_gallery_shortcode_function($attr) {
	global $post, $wp_locale;
 
	static $instance = 0;
	$instance++;
 
	// Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;
 
	// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}
 
	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'dl',
		'icontag'    => 'dt',
		'captiontag' => 'dd',
		'columns'    => 3,
		'size'       => 'thumbnail',
		'include'    => '',
		'exclude'    => ''
	), $attr));
 
	$id = intval($id);
	if ( 'RAND' == $order )
		$orderby = 'none';
 
	if ( !empty($include) ) {
		$include = preg_replace( '/[^0-9,]+/', '', $include );
		$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
 
		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( !empty($exclude) ) {
		$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
		$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	} else {
		$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	}
 
	if ( empty($attachments) )
		return '';
 
	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id => $attachment )
			$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
		return $output;
	}
 
	$itemtag = tag_escape($itemtag);
	$captiontag = tag_escape($captiontag);
	$columns = intval($columns);
	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
	$float = is_rtl() ? 'right' : 'left';
 
	$selector = "gallery-{$instance}";
 
	$gallery_style = $gallery_div = '';
	if ( apply_filters( 'use_default_gallery_style', true ) )
		$gallery_style = "
		";
	$size_class = sanitize_html_class( $size );
	$gallery_div = "";
	$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
 
	$i = 0;
	foreach ( $attachments as $id => $attachment ) {
		$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
 
		//add rel="gal[lightbox]"
		$link = str_replace(","\"gal[lightbox]\" ",$link);
 
		$output .= "<{$itemtag} class='gallery-item'>";
		$output .= "
			<{$icontag} class='gallery-icon'>
				$link
			{$icontag}>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='wp-caption-text gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				{$captiontag}>";
		}
		$output .= "{$itemtag}>";
		if ( $columns > 0 && ++$i % $columns == 0 )
			$output .= '
';
	}
 
	$output .= "
			

		
\n";
 
	return $output;
}

Now that you have that all you need to do is be sure you’re including the necessary files:

^?View Code PHP
<link rel="stylesheet" type="text/css" media="all" href="/prettyPhoto/css/prettyPhoto.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">script>
<script type="text/javascript" src="/prettyPhoto/js/jquery.prettyPhoto.js">script>

And be sure to call PrettyPhoto:

^?View Code JAVASCRIPT
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto();
	}); 
script>

Now all you need to do is upload photos to your gallery and use this shortcode on your page:

^?View Code HTML
[my_gallery_shortcode link="file"]

And that’s it!  A quick solution to adding a lightbox to your WordPress gallery.



WordPress: How To Change Comment Excerpt Length
Richard Gabriel — Wed, 27 Jul 2011 18:17:17 +0000
I recently needed to output a list of comments and bumped into a little trouble trying to output the comment excerpt.  Usually I would use the built-in comment_excerpt() function but I only needed 10 words instead of the 20 that is hard-coded.  I put together a little function that I found helpful and thought I would share.
  
I started with get_comment_excerpt() from line ~407 of wp-includes/comment-template.php and pasted it into my_name/functions.php to be modified.
Here’s what I ended up with:

^?View Code PHP
function my_get_comment_excerpt($comment_ID = 0, $num_words = 20) {
	$comment = get_comment( $comment_ID );
	$comment_text = strip_tags($comment->comment_content);
	$blah = explode(' ', $comment_text);
	if (count($blah) > $num_words) {
		$k = $num_words;
		$use_dotdotdot = 1;
	} else {
		$k = count($blah);
		$use_dotdotdot = 0;
	}
	$excerpt = '';
	for ($i=0; $i<$k; $i++) {
		$excerpt .= $blah[$i] . ' ';
	}
	$excerpt .= ($use_dotdotdot) ? '...' : '';
	return apply_filters('get_comment_excerpt', $excerpt);
}



And here’s a little code to output a list of comments using this function:

^?View Code PHP
<ul>
 
	$comments = get_comments();
	foreach($comments as $c) :
?>
<li>
	<a href="$c->comment_post_ID); ?>">
		 /* output 10 words of comment */ ?>
		<p>php echo my_get_comment_excerpt($c->comment_ID, 10); ?>p>		
		<span>php echo $c->comment_author; ?>span>
		<span>php echo date("m/j/Y",strtotime($c->comment_date)); ?> span>
	a>
li>

	endforeach;
?>
ul>

Feel free to ask questions in the comments.



WP e-Commerce Category Product List Shortcode
Richard Gabriel — Wed, 27 Jul 2011 17:35:59 +0000
Update: tested and working on v3.8.8.
While setting up a store using WP e-Commerce I noticed that the Category Product List Shortcode was no longer working for me.  
I cooked up a quick shortcode function using some of their product list code that will query the products by the passed category and output them using the product template.
First, place the following code in my_theme/functions.php:

^?View Code PHP
function my_wpsc_products_shortcode($atts) {
	$number_per_page = get_option('use_pagination') ? get_option('wpsc_products_per_page') : 0;
	$query = shortcode_atts(array(
		'category_id' => isset($atts['cat']) ? $atts['cat'] : 0,
		'limit_of_items' => 0,
		'sort_order' => null,
		'number_per_page' => $number_per_page,
		'page' => 0,
	), $atts);
 
	return wpsc_display_products_page($query);
}
add_shortcode('my_wpsc_category', 'my_wpsc_products_shortcode');

Once that’s done you’ll be able to use [my_wpsc_category cat=6 /], where 6 is the integer ID of the category, on whichever page you want the products displayed on.  
This list will be output using the wpsc-single_product.php template or the wpsc-products_page.php template, depending on whether you have multiple products in the category.
Feel free to ask questions in the comments.



Finding the Carrier of a Cell Phone Number in PHP
George Huger — Mon, 20 Jun 2011 03:47:37 +0000
Often web apps need to send SMS messages to their users (for example: balance alerts, reminders, notifications). To send these text messages from within your app, you basically have 2 options:
1) Pay Twilio and Tropo for the use of their APIs, for roughly a penny per message.
2) Send an email directly to their carrier’s mail-to-SMS gateway – a free service most carriers provide, which will translate your email into an SMS sent to their subscribers’ phone
Twilio and Tropo are about as easy as it gets to integrate (REST-like APIs that return JSON/POX), but you pay for every single message and that can add up quickly. So #2 (mail-to-SMS gateways) starts to look pretty good.
But there’s some problems with mail-to-SMS gateways:
1) Each carrier has their own format. For example, T-Mobile’s gateway is number@tmomail.net (for the US), AT&T’s is number@txt.att.net (for most of their customers), and Verizon is number@vtext.net (unless you used to be with Alltel – then its number@message.alltel.com). A big list of mail-to-SMS-gateways is available on Wikipedia.
Bonus:some carriers want the international code prepended (the 1 in front of  the number, for the US), some carriers don’t. (e.g., T-Mobile does,  AT&T doesn’t)
2) Some carriers require authentication (Sprint) or don’t have a mail-to-SMS gateway at all (Google Voice).
3) If the user ports their number to a different carrier you’ll have to detect it and react accordingly.
So you’ll have to figure out what carrier they’re using in order to direct the email and meet whatever requirements – which usually means asking the user to choose their carrier from a list.
There is a better way! What if we could detect the carrier automatically?
It turns out you can. The lovely folks at CloudVox made an API that does exactly that – you give it a phone number, and it tells you the carrier and if its a cell-phone or landline. Its 100% free, with no API keys/credentials required. 
Its hosted at digits.cloudvox.com, along with example calls/responses (full docs are here). It speaks JSON over HTTP.
This gives us a much better user experience:
1) User inputs their number, no carrier dropdown needed
2) We use CloudVox’s API to determine their carrier
3) Try to send them an SMS, and have them confirm ownership in the normal way (i.e., enter a confirmation code)
This will cover most people, and is free outside of the development time. If there was an error (i.e., we couldn’t find the number with CloudVox’s API, or we did but the carrier doesn’t support mail-to-SMS), we can fall back to Twilio or Tropo. We’re still paying a few cents here and there, but the default case is free.
Here’s some example code in PHP, for querying CloudVox’s API:

^?View Code PHP

	/* Finds the carrier for the given phone number using CloudVox's API. Returns the carrier name as a string on success, or false if the carrier couldn't be determined */
	function findCarrier($phoneNumber)
	{
		$carrier = false; // will contain the carriers name as a string if we are able to look it up
 
		// attempt to lookup the number with the CloudVox API
		$requestUrl = 'http://digits.cloudvox.com/' . $phoneNumber . '.json';
		$apiResponse = file_get_contents($requestUrl); // Note: needs code to handle the error case of file_get_contents
 
		if ($apiResponse)
		{
			$responseJson = json_decode($apiResponse);
			if (isset($responseJson->allocation) && isset($responseJson->allocation->carrier_name))
			{
				$carrier = $responseJson->allocation->carrier_name;			
			}
		}
		return $carrier; // will be false or the name of the carrier
	}
 
	if (isset($_GET['phoneNumber']))
	{
		// user has submitted a form via GET, containing a field called phoneNumber
 
		// collect the phoneNumber and remove any non-numeric chars
		$phoneNumber = preg_replace('#[^0-9]#','',strip_tags($_GET['phoneNumber'])); 
		$carrier = findCarrier($phoneNumber);
 
		if ($carrier)
		{
			if (stripos($carrier, 'verizon') !== FALSE)
			{
				sendWithVerizon($phoneNumber);
			}
			else if (stripos($carrier, 'at&t') !== FALSE)
			{
				sendWithATT($phoneNumber);
			}
			else
			{
				// other carrier. you'd really want to fall back to Twilio/Tropo here, and/or log the carrier so you can add it later
				echo "Unknown Carrier: {$carrier}";
			}
		}
		else
		{
			// send SMS via Twilio or Tropo instead
		}
	}
	else
	{
		// show the form
		echo '' . 
			 'Phone Number' .
			 '' .
			 ''
;
	}
?>




Facebook Graph API requires Access Token for Feed Access
Richard Gabriel — Tue, 14 Jun 2011 18:49:58 +0000
On June 3rd, Facebook updated the Graph API to require an access token to pull wall post data from public Facebook pages.  This change can cause scripts to stop working, so here is a quick solution to pull wall post data from public Facebook pages with an access token.
Consider the following code:

^?View Code PHP
function fetchUrl($url){
     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     curl_setopt($ch, CURLOPT_TIMEOUT, 20);
 
     $retData = curl_exec($ch);
     curl_close($ch); 
 
     return $retData;
}


^?View Code PHP
$profile_id = "1234567890";
 
$data['feed_data'] = fetchUrl("http://graph.facebook.com/{$profile_id}/feed");

Before the recent changes, this was all you needed to load a Facebook page’s feed.  You could load a public page’s feed by simply pulling from graph.facebook.com/{profile_id}/feed.  With the recent changes you just have to make a small modification and you’re good to go.
Here is the updated code:

^?View Code PHP
$profile_id = "1234567890";		
 
//App Info, needed for Auth
$app_id = "0001234567890";
$app_secret = "abc123ebf123f3g5g6j";
 
//retrieve auth token
$authToken = fetchUrl("https://graph.facebook.com/oauth/access_token?type=client_cred&client_id={$app_id}&client_secret={$app_secret}");
 
$data['feed_data'] = fetchUrl("https://graph.facebook.com/{$profile_id}/feed?{$authToken}");

Be sure to use https instead of http, needed for OAuth.  You’ll also need to create a simple Facebook app to get an App ID and Secret key.  Once done, just swap out the variables in the above script for the proper values and you’re off to the races!



Submitting a Contact Form via AJAX From Your Facebook Page
George Huger — Thu, 03 Dec 2009 03:57:08 +0000
Note: this post over over 2 years old and may need modifications.
We recently created a contact submission form on a client’s Facebook page, and were not satisfied with the default user experience. For starters, the form opened a new window, and there was no way to redirect the user back to a confirmation message on the Facebook page. 
We decided to submit the form via AJAX instead, and show the confirmation message directly on the Facebook page. This way the user would not have to leave the Facebook page, resulting in a smoother user experience. We couldn’t find a good explanation of how to do this on Google, so after figuring it out I decided to go ahead and write it up. 
The following example will show you how to submit a basic contact form using AJAX from within your Facebook page. All HTML and Javascript that follows should be pasted directly into the “Edit FBML” screen on Facebook.
Here’s the example form HTML we’ll use for the rest of this article. It’s just two text fields (name and email) and a submit button:

^?View Code HTML

     
          Name:
          
     
     
          Email:
          
     
     
     


There’s three things you should take note of:

The form’s action attribute is set to a page on mywebsite.com, not facebook.com (replace mywebsite.com with your own domain)
The submit button has an onSubmit event that calls a function submitAjaxForm, which we’ll define shortly
At the end of the form is an empty paragraph tag. We’ll use this space to display messages to the user.

On our server, form_submit.php is a simple PHP script that logs the submissions, and sends back a message for the user letting them know the submission was successful. It might look something like this:

^?View Code PHP

     log_submission($_POST['name', $_POST['email']);
     echo "Thank you for your submission!";
?>

Of course, your script will be more sophisticated than this one, and doesn’t have to be written in PHP. Its on your server, so you can handle logging the submission however you like. Just make sure the output is valid FBML.
With the form HTML added to your Facebook page and the logging script in place, the only thing left is adding the Javascript to submit the form via AJAX and show the confirmation message.
Note: Facebook does not allow you to use any Javascript function you like, for security purposes. Instead they’ve created a library of Javascript functions for accessing the DOM, AJAX, and event binding called FBJS. These functions are used in the example below.
We’ll now define the submitAjaxForm() function we referenced earlier in our submit button’s onSubmit event:

^?View Code JAVASCRIPT
<script>

Note: The opening and closing HTML comments embedded in the Javascript are important, so leave them intact.
The example is fairly self explanatory, but here’s what’s happening:

Declare a new Ajax object, which is one of the FBJS classes. We then set its response type to FBML (Ajax.RAW and Ajax.JSON are also accepted).
Define a callback function to handle the response from the server. In this case, our function simply takes the response from the server and displays it in the #ajaxMessage paragraph we defined earlier.
Update the user to let them know their data is being submitted using FBJS’s setInnerFBML function.
Collect the form field’s values into an array named queryParams, using FBJS’s getElementById and getValue functions. Although getElementById is similar to the standard Javascript function, it accounts for the random slugs Facebook injects into div id’s for security (View Source on a Facebook page and look at the div ID’s to see this in action).
Send the AJAX request, using FBJS’ Ajax.post function. The second argument is optional, and should be an array containing the query parameters.
“return false;” prevents the form’s normal submit behavior

That’s all there is to it! If you have any questions or if I should clarify a section, let me know in the comments.