The simplest way to create your own wordpress gallery

Using the wordpress gallery shortcode

Customise wordpress' built in gallery

The wordpress built-in gallery is awesome, but I recently needed to customise it. I came across a very comprehensive tutorial over here, but it just got too complicated.

The gallery function basically outputs some code that looks like [gallery ids="1,2,3"]. I just needed to grab these.

// Remove the shortcode function that is already there
// Add our new one
add_shortcode('gallery', 'djave_gallery_shortcode');

// Define the new gallery function
function djave_gallery_shortcode($atts) {
	// Define some variables
	global $post;
	// Grab the shortcode atts - the important one here is 'ids'
	// Also, set a default image size
		'id' => $post->ID,
		'ids' => "",
		'image_size' => 'medium',
	), $atts));
	// Turn the ids into an array we can loop over
	$image_ids = explode(",", $ids);
	// Loop over the array
	foreach($image_ids as $image_id):
		// Grab each image attachment
		$img = wp_get_attachment_image($image_id, $image_size, false);
		// Add it to the return data
		$retour .= $img;

	// Return that data!
	return $retour;

Wrap tags or divs around images in Wordpress gallery

You can add any styling you like to the gallery inside of that foreach loop - like wrapping the images with divs or adding the captions, and you could even call it a second time if you wanted to add thumbnails or reuse the same images.

jQuery Plugin

A while ago now I created a Flash text cypher for a job I was working on. This seemed a bit out dated, as no one ever used Flash unless you're making a game or a horrible web banner, so I thought I'd update it to use JavaScript rather than ActionScript.

As the functionality seemed pretty generic, I thought rather than just flatly copy the layout of code from the previous version, why not make a jQuery plugin that can have options and be reused, how hard could it be? A couple of tutorials and a couple of hours later I was all done.

Its called djave_cypher, and you call it like any other plugin, so:

It will just work, but also accepts the following options:

	// The phrase to cypher (defaults to node's contents)
'cypher_text' : this.text(),
// How many times to cypher before the first solve
'start' : 10,
// How many cyphers between the letters solving
'offset' : 5,
// How frequently (milliseconds) the numbers change
'frequency' : 60,
// which div to act on
'target' : this,
// If set to true, will output to console on complete
'console_log' : false

I also figured it would be a great opportunity to use github, which has always (quite frankly) scared me a bit, but I think I'm gradually starting to get the hang of it. So, if you want to grab the plugin, why not head over to github:

Get an image caption using just the src attribute.

I use the types plugin with Wordpress to create user friendly fields which my clients can update.

I recently came across the problem that if I used a custom image field, then the image URL is stored but none of the caption information, as happens with a normal post. Googling ensued.

I have two main issues

  1. I don't have a reference to the image's data
  2. Once I've got that, I need to display the correct bit

After a while of searching I found two great functions:

function get_attachment_id_from_src ($image_src) {
	global $wpdb;
	$query = "SELECT ID FROM {$wpdb->posts} WHERE guid='$image_src'";
	$id = $wpdb->get_var($query);
	return $id;

function wp_get_attachment( $attachment_id ) {

	$attachment = get_post( $attachment_id );
	return array(
		'alt' => get_post_meta( $attachment->ID, '_wp_attachment_image_alt', true ),
		'caption' => $attachment->post_excerpt,
		'description' => $attachment->post_content,
		'href' => get_permalink( $attachment->ID ),
		'src' => $attachment->guid,
		'title' => $attachment->post_title

Now all I need to do is this, :

$landscape_images = get_post_custom_values('wpcf-cs-landscape-img', $post->ID);
foreach ( $landscape_images as $key => $image_url ) {
	$img_id = get_attachment_id_from_src($image_url); 
	$img_info =  wp_get_attachment( $img_id );
	echo $img_info['caption'];