De volgende code is een complete vervanging van de standaard wordpress gallery shortcode. Het verschil met deze en de wordpress shortcode is dat de onderstaande code 100% compatibel met Bootstrap.

<?php
/*
Plugin Name: WordPress Bootstrap Gallery
Plugin URI: http://www.atomicon.nl/wordpress-bootstrap-gallery
Description: WordPress Bootstrap Gallery. This plugin replaces the default gallery shortcode. This shortcode is optimized for Bootstrap 3.x Themes.
Version: 1.0
Author: Yvo van Dillen
Author URI: http://www.atomicon.nl/about
*/

// Remove the existing gallery shortcode
remove_shortcode('gallery');
// Add the new bootstrap gallery shortcode
add_shortcode('gallery', 'wp_bootstrap_gallery');

// The bootstrap gallery shortcode
function wp_bootstrap_gallery($atts)
{
	global $post;
	// did we receive IDs ?
	if (!empty($atts['ids'])) {
		// Check if we received an ordering for the images
		if (empty($atts['orderby'])) {
			// No, default to post__in
			$atts['orderby'] = 'post__in';
		}
		// Push the IDs into the include attribute
		$atts['include'] = $atts['ids'];
	}
	// Fill in the gaps. Extend it with defaults
	extract(shortcode_atts(array(
		'orderby' => 'menu_order ASC, ID ASC',
		'include' => '',
		'id' => $post->ID,
		'itemtag' => 'dl',
		'icontag' => 'dt',
		'captiontag' => 'dd',
		'columns' => 3,
		'size' => 'medium',
		'link' => '', //none, file, empty = attachment
		), $atts));
	// Specify what we are querying
	$args = array(
		'post_type' => 'attachment',
		'post_status' => 'inherit',
		'post_mime_type' => 'image',
		'orderby' => $orderby);
	// Here is where the IDs come back.
	// Did we receive IDs?
	if (!empty($include)) {
		$args['include'] = $include;
	} else {
		$args['post_parent'] = $id;
		$args['numberposts'] = -1;
	}
	// Retrieve the columns
	$columns = (int)$columns;

	// Respect bootstraps boundaries
	if ($columns < 1) {
		$columns = 1;
	}
	if ($columns > 12) {
		$columns = 12;
	}
	// Since bootstrap has 12 columns do a divide
	$column_size = (int)(12 / $columns);

	// Grab all gallery images
	$gallery_images = get_posts($args);

	// Only process if we have images
	if (!empty($gallery_images)) {
		// wrap the entire gallery
		echo '<div class="gallery wp-bootstrap-gallery">' . PHP_EOL;
		// Split the gallery in rows
		$gallery_rows = array_chunk($gallery_images, $columns);

		// Loop through all rows
		foreach ($gallery_rows as $images) {
			echo '<div class="row gallery-row">' . PHP_EOL;
			// Loop through all attachment posts
			foreach ($images as $image) {
				// Get the Caption
				$caption = $image->post_excerpt;
				// Get the Description
				$description = $image->post_content;
				// Fill the description with the attachment title if empty
				if ($description == '') {
					$description = $image->post_title;
				}
				// Grab the Alt-text for the image
				$image_alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true);
				// Render the columns
				echo '<div class="gallery-cell col-md-' . $column_size . '">' . PHP_EOL;
				// Extra wrapper for styling (if you need overflows etc)
				echo '<div class="gallery-image">' . PHP_EOL;
				// do we want to link the image?
				if ($link != 'none') {
					// do we want to link to the raw media?
					if ($link == 'file') {
						// Get the full image size
						$src = wp_get_attachment_image_src($image->ID, 'full');
						// I've used class 'lightbox'
						echo '<a href="' . $src[0] . '" rel="lightbox">';
					} else {
						// Link to the attachment page
						echo '<a href="' . get_permalink($image->ID) . '">';
					}
				}
				// Render the image
				echo wp_get_attachment_image($image->ID, $size);
				// Did we link to the image or attachment page?
				if ($link != 'none') {
					// Close the link
					echo '</a>';
				}
				// Close the wrapper
				echo PHP_EOL . '</div> <!-- /.gallery-image -->' . PHP_EOL;
				// Close the column
				echo '</div> <!-- /.gallery-cell -->' . PHP_EOL;
			}
			// Close the cell
			echo '</div> <!-- /.gallery-row -->' . PHP_EOL;
		}
		echo '</div> <!-- /.wp-bootstrap-gallery -->' . PHP_EOL;
	}
}

Installatie methode 1

1. Kopieer de code die hierboven staat en plaats deze met FTP op je site onder: /wp-content/plugins/wp-bootstrap-gallery.php
2. Log in op je site en navigeer naar: Plugins » Geïnstalleerde plugins
3. Activeer “WordPress Bootstrap Gallery” en de standaard wordpress gallery is gelijk vervangen

Installatie methode 2

1. Download de plugin en sla deze op ergens op je computer.
2. Log in op je site en navigeer naar: Plugins » Nieuwe plugin » Uploaden
3. Selecteer de plugin die je net heeft ge-download en kies “Installeren”
4. Navigeer naar: Plugins » Geïnstalleerde plugins
5. Activeer “WordPress Bootstrap Gallery” en de standaard wordpress gallery is gelijk vervangen