Hello reader's! Today we discuss about "Creating Photo album gallery to your WordPress."

Recently, we had a person who wanted us to create a photo gallery combine with albums. He wanted that if any user click on the album then he able to see photo of all posts listed in that months album. Every photo should have its own individual content page which contain information about the photographer.
Generally most of the people used plugins like NextGen Gallery or another to accomplish something like this. But I wanted to avoid using the third party plugin so I finily decided to use the core-functionality that WordPress provides to create something that kinds of work. In my this article, I will show you that how to create a monthly photo gallery in WordPress without using a plugin.

Before creating photo gallery, lets take a quick look about, what the final outcome is, that we suppose to look like:

When a user go through the Pictures selection, he will be viewing the archive in a grid where every record starts along with its main protect and all the photographs in it. My idea is to possess one record a month.
When a user click on the Albums menu, he will see an archive in a grid display where each album starts out with its main cover and all the photos in it. My idea was to have one album per month.

When user important for the protect image associated with record, he should be taken to the page just at that record where you can give the user listing all the photographs within related record.
In other words, If user clicks on the cover photo of album, he will be taken to a page just for that album where you can give the user listing all the photos in related album.

If the user clicks on the solitary image, then he should be taken to this solitary image page where he will understand the Identify of the Picture and Photographers label.
In other words, If the user clicks on the single photo, then he will be taken to the single photo page where he will see the Title of the Photo and Photographers name

Now thing is that, how we are going to make it?

As you can see in all description above, all of the features required can be completed using the WordPress built-in functionality. Each monthly album can be done by a post thus every cover album image has its own page along with some background info. Every image should be treated as an attachment thereby, getting its own single page. For album cover photo we use the built-in feature thumbnails. If the entire site's purpose is photo album gallery one can use the default posts, but if you also have a blog then it should be created in a custom post type.

Create a Photo Album Gallery

If you are going to use custom post type for display gallery then add the below code into your function.php

<?php
/**
 * Post type: GALLERY
 */
add_;action( 'init', 'twentyten_;gallery_;content_;init' );
function twentyten_;gallery_;content_;init() {
    $labels = array(
        'name'                          => _x( 'GALLERY', '' ),
        'singular_;name'                 => _x( 'GALLERY', '' ),
        'menu_;name'                     => _x( 'GALLERY', '' ),
        'name_;admin_;bar'                => _x( 'GALLERY', '' ),
        'add_;new'                       => _x( 'Add New', '' ),
        'add_;new_;item'                  => __;( 'Add New GALLERY', '' ),
        'new_;item'                      => __;( 'New GALLERY', '' ),
        'edit_;item'                     => __;( 'Edit GALLERY', '' ),
        'view_;item'                     => __;( 'View GALLERY', '' ),
        'all_;items'                     => __;( 'All GALLERY', '' ),
        'search_;items'                  => __;( 'Search GALLERY', '' ),
        'parent_;item_;colon'             => __;( 'Parent GALLERY:', '' ),
        'not_;found'                     => __;( 'No GALLERY found.', '' ),
        'not_;found_;in_;trash'            => __;( 'No GALLERY found in Trash.', '' )
    );

    $args = array(
        'labels'                        => $labels,
        'menu_;icon'                     => 'dashicons-format-gallery',
        'public'                        => true,
        'publicly_;queryable'            => true,
        'show_;ui'                       => true,
        'show_;in_;menu'                  => true,
        'query_;var'                     => true,
        'rewrite'                       => array( 'slug' => 'gallery' ),
        'capability_;type'               => 'post',
        'has_;archive'                   => true,
        'hierarchical'                  => false,
        'menu_;position'                 => 22,
        'supports'                      => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' )
    );

    register_;post_;type( 'gallery', $args );
}


add_;action( 'init', 'twentyten_;gallery_;category_;taxonomy_;init', 0 );

function twentyten_;gallery_;category_;taxonomy_;init() {

    $labels = array(
        'name'                          => _x( 'Gallery Category', 'taxonomy general name' ),
        'singular_;name'                 => _x( 'Gallery Category', 'taxonomy singular name' ),
        'search_;items'                  => __;( 'Search Gallery Category' ),
        'all_;items'                     => __;( 'All Gallery Category' ),
        'parent_;item'                   => __;( 'Parent Gallery Category' ),
        'parent_;item_;colon'             => __;( 'Parent Gallery Category:' ),
        'edit_;item'                     => __;( 'Edit Gallery Category' ),
        'update_;item'                   => __;( 'Update Gallery Category' ),
        'add_;new_;item'                  => __;( 'Add New Gallery Category' ),
        'new_;item_;name'                 => __;( 'New Genre Gallery Category' ),
        'menu_;name'                     => __;( 'Gallery Category' ),
    );

    $args = array(
        'hierarchical'                  => true,
        'labels'                        => $labels,
        'show_;ui'                       => true,
        'show_;admin_;column'             => true,
        'query_;var'                     => true,
        'rewrite'                       => array( 'slug' => 'gallery-category' ),
    );
    register_;taxonomy( 'gallery-category', array( 'gallery' ), $args );
}

?>

also you can add the image resize code into function.php file:

<?php

/**************** Custom Code For Images  ***********************/
add_;action( 'after_;setup_;theme', 'setup' );
function setup()
{
    // add_;theme_;support( 'post-thumbnails' ); // This feature enables post-thumbnail support for a theme   
    add_;image_;size( 'gallery-img-all', 314, 223, true );
}
?>

Now create a page "page-gallery.php" put the below code into this page

<?php
/**
 * Template Name: All Galleries Template
 */
get_;header(); 
global $post;
global $wpdb;


$taxonomies = 'gallery-category';
$get_;terms = get_;terms( $taxonomies );
//echo "<pre>"; print_;r($get_;terms);    ?>



<section class="fade">
    <div class="middle">
        <div class="whitebg"></div>
        <div class="wrapper">
            <div class="title">
                <ul class="clearfix">
                    <li><a>GALLERIES</a></li>
                    <!-- <li>|</li>
                    <li><a href=""><?php echo $term->name; ?></a></li> -->
                </ul>
            </div>
            <div class="gallery">
                <ul class="clearfix gallery_;list">
                <?php

                foreach ( $get_;terms as $get_;term )
                {
                    $term_;link = get_;term_;link( $get_;term );

                    if ( is_;wp_;error( $term_;link ) )
                    {
                        continue;
                    }
                    // We successfully got a link. Print it out.
                    if( $term->term_;id != 1 )
                    {

                        $post_;type = 'gallery';

                        $args = array(
                            'post_;type'         => $post_;type, /*This is where you should put your Post Type */
                            'posts_;per_;page'    => 1,
                            'post_;status'       => 'publish',                  
                            //'paged'           => $page,          
                            'tax_;query'         => array(
                                array(
                                    'taxonomy'      => $get_;term->taxonomy,
                                    'field'         => $get_;term->slug,
                                    'terms'         => $get_;term->term_;id,

                                )
                            )
                        );

                        $query = new WP_;Query( $args );

                        if ( $query->have_;posts() )
                        {   
                            while ( $query->have_;posts() )
                            {                               
                                $query->the_;post();
                                //echo '<li class="'. ( ($get_;term->slug == $term->slug) ? 'active-tab' : '' ) .'"><a href="'.esc_;url( $term_;link ).'">'.$get_;term->name.'</a></li>';
                                $thumb_;img = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'gallery-img-all');
                                $post_;img = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'full');
                                if( $post_;img != '' ) :
                                    echo "<li>";
                                        echo "<a class='fancybox_;' href='". esc_;url( $term_;link ) ."' data-fancybox-group='gallery'  title='". get_;the_;title($post->ID) ."' >";
                                        echo "<div class='share_;outer'></div>"; 
                                        echo "<img src='". $thumb_;img[0] ."' />";
                                        echo "<div class='allgallery'>". $get_;term->name ."</div>";    
                                        echo "</a>";

                                    echo "</li>";


                                endif; // end if                                

                            }

                        }
                        else
                        {
                            echo "No posts fount !!!";
                        }
                        wp_;reset_;postdata();

                    }
                }   ?>          
                </ul>               
            </div>
        </div>
    </div>
</section>
<?php get_;footer(); ?>

the output is:

Now create taxonomy-gallery-category.php page and put the below code into this page:

<?php
/**
 * This page shows list of all tour-region related to particular catgeory
 */
get_;header(); 
global $post;
global $wpdb;

$term =  get_;term_;by( 'slug', get_;query_;var( 'term' ), get_;query_;var( 'taxonomy' ) );
    ?>

<?php global $post;
$get_;dataID = $post->ID;
$img = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'full');
//echo "<pre>"; print_;r($term); echo "</pre>";
$taxonomy = 'gallery-category';
?>

<section class="fade">
    <div class="middle">
    <div class="whitebg"></div>
        <div class="wrapper">
            <div class="title">
                <ul class="clearfix">
                    <li class="gal_;line"><a href="<?php echo site_;url(); ?>/view-all-galleries/">GALLERIES</a></li>
                    <li>|</li>
                    <li><a><?php echo $term->name; ?></a></li>
                </ul>
            </div>
            <div class="gallery">
                <ul class="clearfix">
                <?php       
                $post_;type = 'gallery';

                $args = array(
                    'post_;type'         => $post_;type, /*This is where you should put your Post Type */
                    'posts_;per_;page'    => -1,
                    'post_;status'       => 'publish',                  
                    //'paged'           => $page,          
                    'tax_;query'         => array(
                        array(
                            'taxonomy'      => $term->taxonomy,
                            'field'         => $term->slug,
                            'terms'         => $term->term_;id,
                            'include_;children' => false
                        )
                    )
                );

                $query = new WP_;Query( $args );
                $round = count($query->posts);

                        if ( $query->have_;posts() )
                        {   
                            while ( $query->have_;posts() )
                            {                               
                                $query->the_;post();
                                $thumb_;img = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'gallery-img-all');
                                $post_;img = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'slider-img');
                                if( $post_;img != '' ) :
                                    echo "<li>";
                                        echo "<a class='fancybox' href='". $post_;img[0] ."' data-fancybox-group='gallery'  title='". get_;the_;title($post->ID) ."' >";
                                        echo "<div class='share_;outer'></div>"; 
                                        echo "<img src='". $thumb_;img[0] ."' />";                                          
                                        echo "</a>";
                                    echo "</li>";
                                endif; // end if                                
                            }
                        }
                        else
                        {
                            echo "No posts fount !!!";
                        }
                wp_;reset_;postdata(); ?>         
                </ul>               
        </div>
    </div>
</section>
<?php get_;footer(); ?>

Create a single-gallery.php and put the code into this:

<?php
/*** The Template for displaying all gallery items.**/
get_;header();
global $post;
global $wpdb;
$term = get_;the_;terms( $post->ID, 'gallery-category' );
$term =array_;values($term);
//echo "<pre>"; print_;r($term); echo "</pre>";
$parent_;url = get_;term_;link($term[0]->slug, 'gallery-category');
$parent_;id =  $term[0]->term_;id;
$cur_;url = get_;permalink();    ?>

<?php global $post;
$get_;dataID = $post->ID;
$img = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'full');

$page = 'single-gallery';
?>
<section>
    <div class="middle">
        <div class="wrapper">
            <div class="homeSlider">
                <div class="flexslider_;gallery slides2">
                      <ul class="slides">
                            <?php
                                $args = array(
                                    'post_;type'         =>'gallery', /*This is where you should put your Post Type */
                                    'post_;status'       => 'publish',
                                    'posts_;per_;page'    => -1,          
                                    'tax_;query'         => array(
                                        array(
                                            'taxonomy'      => 'gallery-category',
                                            'field'         => $term[0]->slug,
                                            'terms'         => $term[0]->term_;id
                                           ))                   
                                );

                                $query = new WP_;Query( $args );
                                //echo "<pre>"; print_;r($query->posts); echo "</pre>"; die;

                                // The Loop
                                if ( $query->have_;posts() )
                                {
                                    while ( $query->have_;posts() )
                                    {
                                        $query->the_;post();
                                        $imgs = wp_;get_;attachment_;image_;src( get_;post_;thumbnail_;id($post->ID), 'full');
                                        if( $get_;dataID != $post->ID )
                                        {
                                        ?>
                                        <li>
                                            <div class="sliderContainer">
                                                <div class='gallery_;image_;big'>
                                                    <div class='image_;outer'>
                                                        <div class='image' id='gal_;image_;'>
                                                            <a href='<?php echo $parent_;url; ?>' class='close-images'></a>
                                                            <img class="fleximage" src='<?php echo $imgs[0]; ?>' alt='' />     
                                                        </div>                          
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <?php
                                    }
                                    }
                                }
                                else{ echo "No posts found !!!"; }
                                wp_;reset_;postdata(); ?>
                        </ul>
                </div>
                <div class="clr"></div>
            </div>
        </div>
    </div>
</section>

<?php get_;footer(); ?>

I hope this log will help you good luck.