Today I will show you how to create a simple image gallery in WordPress. WordPress has a built in gallery that works well, but sometimes it just doesn’t fit the bill. There are plug-ins available from the WordPress community but they often contain functionality over and above what you need and you end up hacking it to display the way you want it to.

Follow this step by step guide and you’ll soon have a fully working gallery that you can easily tweak and adjust for multiple uses.

Step One

Before you start, make sure you are working on a development site and always have recent backups should you have to restore.

The first step is to create a new custom post type which will allow us to create a different type of content (Gallery). To keep our functions in a unified area we will create a new directory called gallery which will hold our files (wp-content > themes > yourthemename > gallery). Within this directory create a file called gallery-functions.php and place the following code within it:

// GALLERY CUSTOM POST TYPE
add_action('init', 'gallery_init');
function gallery_init()
{
$labels = array(
'name' => _x('Gallery', 'post type general name'),
'singular_name' => _x('Gallery', 'post type singular name'),
'all_items' => __('All Images'),
'add_new' => _x('Add New Image', 'tutorials'),
'add_new_item' => __('Add New Image'),
'edit_item' => __('Edit Image'),
'new_item' => __('New Image'),
'view_item' => __('View Image'),
'search_items' => __('Search Image'),
'not_found' => __('No Images found'),
'not_found_in_trash' => __('No Images found in Trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => false,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 30,
'supports' => array('title', 'page-attributes', 'thumbnail'),
'has_archive' => 'gallery'
);
register_post_type('gallery',$args);
}

// GALLERY CUSTOM TAXONOMIES
add_action( ‘init’, ‘gallery_create_taxonomies’, 0 );
function gallery_create_taxonomies()
{
// Type
$type_labels = array(
‘name’ => _x( ‘Albums’, ‘taxonomy general name’ ),
‘singular_name’ => _x( ‘Album’, ‘taxonomy singular name’ ),
‘search_items’ => __( ‘Search in Albums’ ),
‘all_items’ => __( ‘All Albums’ ),
‘most_used_items’ => null,
‘parent_item’ => null,
‘parent_item_colon’ => null,
‘edit_item’ => __( ‘Edit Album’ ),
‘update_item’ => __( ‘Update Album’ ),
‘add_new_item’ => __( ‘Add New Album’ ),
‘new_item_name’ => __( ‘New Album’ ),
‘menu_name’ => __( ‘Albums’ ),
);

register_taxonomy(‘gallery-albums’, ‘gallery’, array(
‘hierarchical’ => true,
‘labels’ => $type_labels,
‘show_ui’ => true,
‘query_var’ => true,
‘rewrite’ => array(‘slug’ => ‘gallery-albums’ )
));

}
?>

Step Two

The next step is to include this file within our theme functions so that our theme recognises it, at the moment it wont have taken effect on your theme as it has not been included. From within your WordPress theme open up functions.php (wp-content > themes > yourthemename > functions.php) and anywhere within the file preferably near the top paste the following:

require_once ('gallery/gallery-functions.php' );

Now we have included the file it will have taken effect. If you log in to the administration area of your site (yoursite.com/wp-admin) you will see along the left hand column a section called Gallery as shown below.

gallerynavleft

Step Three

Now we need to create a template for our gallery that will house our widget, within your gallery folder create a new file called gallery-widget.php (wp-content > themes > yourthemename > gallery > gallery-widget.php). Within here we need to display the image and image description. We will have three instances of the image, a thumbnail, a large preview and the original size. They will all be generating the same image but in different sizes with a bit of css. Within your new file paste the following code: