Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Create a Photo Album Gallery in WordPress without a plugin

Last updated on by
Follow WPBeginner on YouTube
How to Create a Photo Album Gallery in WordPress without a plugin

In the past, we have shown you how to add a gallery in WordPress with a lightbox effect. That article only covers the surface of the WordPress functionality. Recently, we had a client that wanted us to create a photo gallery organized by monthly albums. They wanted the user to be able to click on the album photo to see all posts listed in that month’s album. Each photo should have it’s own individual page with information about the photographer and their URL. Normally people would resort to plugins like NextGen Gallery or another to accomplish something like this. We wanted to avoid using a third party plugin therefore we decided to use the core-functionality that WordPress offers to create something that works. In this article, we will show you how to create a monthly photo album gallery in WordPress without a plugin.

Note: This is a relatively advanced tutorial that brings a lot of WordPress concepts together. You must have a fair knowledge of WordPress and HTML/CSS to follow this.

What we are trying to make:

Before we begin, lets take a look at what the final outcome is suppose to look like:

When the user click on the Albums page, they will see an archive in a grid display where each album starts out with it’s distinguishing cover and all the photos in it. The idea was to have one album per month.

Photo Album Grid

If the user clicks on the album’s cover photo, they will be taken to a page just for that album where you can give the user some background information as well as listing all the photos in that album.

If the user clicks on the photo, then they will be taken to the single photo page where they will see the Title of the Photo. Photographer’s name and their site’s URL.

How we are going to make it?

As you can see from the description above, all of the features required can be done using the built-in WordPress functionality. We can treat each monthly album as a post, so each album can have its own single page with some background info etc. Each image will be treated as an attachment (thus getting it’s own single page). We will use the built-in featured thumbnails for album cover photo. You can use the default posts, if the whole site’s purpose is this photo album gallery, but if you have a blog as well, then this needs to be created in a custom post type.

Lets create a Photo Album Gallery

First thing you should do is create a site-specific plugin (or even a project-specific plugin).

If you are going to use Custom Post Types for your project, then you should generate the codes and paste it in your site-specific plugin. You can also watch our video on how to create Custom Post Types.

Next thing you need to do is register additional image sizes in WordPress for the grid display.

Example would be:

add_image_size( 'album-grid', 225, 150, true );

After the additional image sizes, lets add some additional fields to the Media uploader. This will allow you to add Photographer’s Name and their URL when you upload each image. This is the reason why we wrote an article about it two days ago.

How to add additional fields to the WordPress Media Uploader

Once you have done this, lets go ahead and add some albums (posts). Upload all images that you want to attach to that album. Then attach a distinctive cover photo and set it as a featured image. You can add the background info in the content area of the post.

Now that you have a few albums in the backend, lets put the code to display it.

Let’s say that your custom post type was called albums. So you will create a template file called archive-albums.php. Paste the header codes, the footer codes, sidebar and other design elements that you want. Create a post loop. Inside that post loop, we are going to display all attachments from a post except the thumbnail which will link to the single image page. We will also add the featured post thumbnail (album cover photo) separately and link that to the single post page (album page).

We decided to style the grid images using the list element. The code looks like this:

<li class="album-grid"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('album-grid'); ?></a></li>

<?php if ( $post->post_type == 'albums' && $post->post_status == 'publish' ) {
		$attachments = get_posts( array(
			'post_type' => 'attachment',
			'posts_per_page' => -1,
			'post_parent' => $post->ID,
			'exclude'     => get_post_thumbnail_id()
		) );

		if ( $attachments ) {
			foreach ( $attachments as $attachment ) {
				$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
				$title = wp_get_attachment_link( $attachment->ID, 'album-grid', true );
				echo '<li class="' . $class . ' album-grid">' . $title . '</li>';
			}
			
		}
	}
?>

Source: How to Get All Attachments except for Featured Image

The main CSS style that you really have to worry about is the class .album-grid

.album-grid{width: 225px; height: 150px; float: left; list-style: none; list-style-type: none; margin: 0 18px 30px 0px;}

This would allow each image to be placed appropriately in the grid, and we will get the style how we want it.

Next thing you need to do is create a single-attachment template. This will be the page where the user will be taken to, so they can view each individual image. They will see the image title, photographer’s name and photographers URL here. You can follow our tutorial on How to Create a Custom Single Attachments Template in WordPress.

Feel free to style the single template however you like.

Now the only thing left in the list is to create an individual albums page. Again assuming that your custom post type is called albums, you will need to create a single-albums.php file. Copy all the header, footer, sidebar, or any other design elements that you want.

In the loop element basically do the same thing that we did with the archive-albums template. Before you add the featured image and the attachments grid though, you need to add the album title and description. Which can be done by simply adding the code like this:

<h1><?php the_title(); ?></h1>
<div class="entry-content"><?php the_content(); ?></div>

//Insert grid code below this line

Ta da, we are done. We just created a monthly photo album gallery in WordPress without using any plugin. Let us know if you have any questions.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • ramah

    hi, I created custom post type gallery album. then I create a page-gallery.php (to display those photo albums) and a single-gallery.php to load individual image. but when I do loop (I’m using wordpress standar post type & image attachment codex) within those both of templates, the page is blank. in you opinion, what’s general cases? -or probably anyone would be kind to explain clearly?

    • http://www.wpbeginner.com Editorial Staff

      If the page is blank, then most likely there is an error somewhere. Please turn on wp_debug to locate the error.

  • Angel

    Hi,
    how could this be modified to work with custom taxonomies?

    thanks,
    Angel

    • http://www.wpbeginner.com Editorial Staff

      Not quite sure about your question. Taxonomies are a way to sort the content. To actually have the content, you need a post type.

  • Kirsty

    Hi there,

    Can a similar thing be used to recreate this site

    http://www.heredesign.co.uk?

    • http://www.wpbeginner.com Editorial Staff

      Yes. You would have to use jQuery for the slider and use Ajax to display the output like that.

  • Kristjan V

    Hello,

    I have i big problem, how can i see the grid view? What must i type to url to see it? Please help..

    Best regards,
    Kristjan

    • http://www.wpbeginner.com Editorial Staff

      You would have to type the URL of your custom post type archive (which would be the name of the custom post type that you registered during the process).

  • Anne

    The one thing that would have been good to see is an example or Demo of how the gallery you just created looks.

    • http://www.wpbeginner.com Editorial Staff

      Unfortunately, since this is a project we did for a client, we couldn’t reveal the link. But the mockup screenshot should explain exactly how the gallery looked.

  • Annie

    Just one question: when using the built in featured thumbnail, once you set it’s size, it’ll create an image with that size for all images uploaded on each post. Is there a way WP will create that image size only for the photo we select to use as featured? Some albuns will have over 200 images, so it’ll take up a lot of space for images we won’t be using.
    Thanks!

    • http://www.wpbeginner.com Editorial Staff

      Don’t think that is an option yet.

    • http://www.wpbeginner.com/ wpbeginner

      Unfortunately, that is not an option just yet. So yes I do understand your concerns.

  • http://www.nightocoder.com/ Rawaf

    Great tutorial , I liked it and I will try test it, but please have you any demo for check it ..

    thank you

    • http://www.wpbeginner.com/ wpbeginner

      No Demo of this yet.

  • noumaan_

    This is really nice. jQuery Lightbox For Native Galleries will work with this grid too?

    • http://www.wpbeginner.com/ wpbeginner

       @noumaan_ It should :)

  • http://www.onlinemonetizing.info/ joeytribbiani

    Could you show a demo screenshot so that the readers can see what the final result would look like?

    • http://www.wpbeginner.com/ wpbeginner

      @joeytribbiani Unfortunately, the client’s site is not live yet. But when it is, we will share it with you guys.

  • http://www.infogenra.com/ rajkanuri

    any demo which will help me to understand better..

  • http://kematica.com/ kematica

    Excellent article, one thing that I would add because I couldn’t find it in the other article “How to add additional fields to the WordPress Media Uploader”, would be the ability to add a “rel” attribute to each image. Doing it that way even if you have multiple galleries in one page, would “divide” the galleries with rel=”cats” vs rel=”dogs” and so on, then you can have things better organized, plus the user wouldn’t see image 1 of 50, when only 10 are for cats and 40 for dogs.

    • http://www.wpbeginner.com/ wpbeginner

      @kematica I’m pretty sure you can add an additional rel field. Then sort by custom meta fields.

      • rpm777

         @wpbeginner Quick question. Do i create a page in the Admin page panel and assign it the template “archive-albums.php”? I’m having a hard time getting the albums to display, let alone as a grid.
         
        Thanks

        • http://www.wpbeginner.com/ wpbeginner

           @rpm777 No because these albums are a custom post type. Your archive slug should already display these.  Read the note: This is an ADVANCED level tutorial.