WordPress Gallery Tutorial (as seen on Ma.tt)
February 24, 2009
I’ve seen a lot of people who use WordPress asking how to create a gallery similar to the one on Matt Mullenweg’s website (Ma.tt) using nothing but core WordPress functionality. Fortunately, it’s much easier than it looks and with just a few simple steps you can have a gallery of albums and images up an running in no time. What you’ll end up with is the following:
- A Gallery category
- A custom category template w/a custom field for the “Thumbnail” Album image
- A little extra CSS
- Creation of an Album and added images!
Step 1: Gallery Category
The first step is as simple as making a new Category in WordPress called “Gallery”
Once you have created that category, mouse over the title and look at the bottom left of your browser for the URL. You will need to remember the ID number of the Gallery Category.
The URL should look like http://www.yourdomain.com/wp-admin/categories.php?action=edit&cat_ID=3
Step 2: Creating a Custom Category Template
Thanks to the WordPress template hierarchy we can create custom templates for specific categories we want to display differently. In this case create a new php file in your favorite editor and call it “category-x.php” replacing the “x” with the ID number of your Gallery category from step 1. So if your Gallery ID is 3 your template will be category-3.php.
Next open the theme editor in WordPress and copy all of the code in the “category.php” template. If you don’t have a category.php template then copy the code in the “index.php” template.
If you are not familiar with WordPress templates then the next part might seem tricky so pay close attention. If you are familiar with them this will be a remedial of an explanation.
Paste the code you just copied into the category-x.php file we have open on your computer, all of it. Next, delete the content specific sections. That means that you want to keep the stuff like:
<?php get_header(); ?>
<div id=”content”>
<div id=”contentleft”>
<!– logic and template stuff will go here –>
</div>
<?php include(TEMPLATEPATH.”/sidebar.php”);?>
<!– The main column ends –>
<?php get_footer(); ?>
Your specific layout might use different tags (like <div id=”wrapper”>, etc…) so make sure you keep the base layout stuff and just get rid of the code that creates the content in that template. If this still doesn’t make sense post a link in the Blackbox Support Forum and we’ll try to answer you as soon as we can.
Next, add the following code to your new template, in the case above where the <!– logic and template stuff goes here –> is.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”gallerypost”><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?>” alt=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?> Gallery” height=’150′ border=’0′ align=’left’ style=’margin-left: 5px; margin-right: 5px;’ /></a>
<h1 style=”margin:0px 0px 2px 10px;”><?php the_title(); ?></h1><?php the_excerpt(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
In completion your custom category-x.php template should look like:
<?php get_header(); ?>
<div id=”content”>
<div id=”contentleft”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id=”gallerypost”><a href=”<?php the_permalink() ?>” rel=”bookmark”><img src=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?>” alt=”<?php echo get_post_meta($post->ID, “gallery thumbnail”, true); ?> Gallery” height=’100′ border=’0′ align=’left’ style=’margin-left: 5px; margin-right: 5px;’ /></a>
<h1 style=”margin:0px 0px 2px 10px;”><?php the_title(); ?></h1><?php the_excerpt(); ?>
</div>
<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>
</div>
<?php include(TEMPLATEPATH.”/sidebar.php”);?>
<!– The main column ends –>
<?php get_footer(); ?>
Download a copy of the above template (zip file)
The last step is to upload (via ftp) that custom template to your site: http://www.yourdomain.com/wp-content/themes/theme-you-are-using/
WordPress will know to automatically start using that template for your gallery category now (assuming you used the right ID #).
Step 3: A little Extra CSS
Add the following to our style.css template:
#gallerypost {
background: #FFFFFF;
float: left;
width: 530px;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
}
You might want to adjust the properties to make it look just like you want but that is the jist.
If you want a boarder around the album image add the following to style.css right after #gallerypost. (In this case a blue border).
#gallerypost img {
border: 1 px double #0000FF;
}
Step 4: Create an Album and Add Images
Add a new post and give it a title that describes the images that will be in the gallery.
Upload your images through the WordPress Image uploader.
While in the Image Uploader select the image you want to represent your gallery.
If you are using Firefox, right click the square thumbnail WordPress has created for you and select “Copy Image Location.”
If using IE, click the button below for Link to “File URL” and copy the url.In this case you will need to add “-150×150” right before the file extension so your url should look like this:
http://www.yourdomain.com/wp-content/uploads/2009/02/imagename-150×150.jpg
Switch to HTML mode in your editor in WordPress and enter the gallery shortcode:
[ gallery columns="4" ]
Below the post editing window is a section called “Custom Fields,” type “gallery thumbnail” in the “Name” field and in the “Value” box to it’s right paste the url to the thumbnail you just copied.
Save the post and go look at your site. Now all that is left is to add more “albms” and images and you are off and rolling.
To see an example implementation of this you can look at http://www.vsellis.com/category/gallery/
Leave your commments below or if you need a little help visit us in our support forums.