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.

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.

How to Create a Photo Album Gallery in WordPress without a plugin is a post from: WPBeginner which is not allowed to be copied on other sites.

via WPBeginner http://www.wpbeginner.com/wp-tutorials/how-to-create-a-photo-album-gallery-in-wordpress-without-a-plugin/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+wpbeginner+%28WordPress+for+Beginners%29