In this tutorial we will cover how to create a WordPress photo blog. We will build the theme as a child theme for the new default WordPress Twenty Twelve theme. This allows us to leverage all of the template files and styles of the theme that the Automattic team created and only customize the templates and styles we need. The theme will show recent photos on the homepage that click through to a photo details page.
Structuring the Photo Entries
We will add our photo entries as ordinary posts, with the images added as featured images. In the main content area we will add a description of the photo to appear on the photo details page. For this example site, make all of the images the same size. To start, add twelve posts with a title, featured image and short description. You can find the creative commons licensed photos we used, on this photography credits page. We resized all of the images to 640 x 425 pixels, but you can pick any common size for your photos. To make things simple, we are going to leave categories and tags blank and post formats set to standard.
Setting Up the Child Theme
The first step in setting up the child theme is to create a new directory in the wp-content/themes folder called “photography-child-theme.” Then create a style.css file and save it to the folder. Put the following comment at the top of the CSS file.
/*
Theme Name: Photography Child Theme
Theme URI: http://wptreehouse.com/photography-theme/
Author: Zac Gordon
Author URI: http://zacgordon.com
Description: This theme was built for the How to Build a Photography Child Theme Tutorial for the WordPress Twenty Twelve theme.
Version: 1.0
Template: twentytwelve
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
@import url("../twentytwelve/style.css");
This markup in the comment block is what shows up in the WordPress admin area when looking at themes as well as when you are browsing the WordPress theme directory on the .org site or from within the admin area. Also, download the graphic below to use as the thumbnail graphic that appears along with the comment information from the CSS file. Save the file to your photography-child-theme folder as screenshot.png. 
Once we have this done we can login to our site and activate the theme from the admin area. If you did everything right, the site should still look the same as when the Twenty Twelve theme is activated. 
Customizing the Homepage
We want the homepage of the site to display six thumbnails of the latest photos in a grid. To do this we are going to create a new home.php template file based on the Twenty Twelve index.php template. The home.php template in WordPress template hierarchy is used for the main listing or index page for blog posts. Since we are entering our photos as Posts, customizing this file will accomplish what we need, while also preventing us from having to change the default fallback index.php file. In your new themes folder create a home.php file and include the following code:
<?php get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<!-- Begin loop for latest photos -->
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article class="photo-entry">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<footer>
<h2><?php the_title(); ?></h2>
<p class="date"><?php the_time('m.d.Y'); ?></p>
</footer>
</a>
</article>
<?php endwhile; ?>
<?php else : ?>
<!-- Message if there are no photos -->
<p><?php _e( 'Please check back soon for more photos!', 'twentytwelve' ); ?></p>
<?php endif; ?>
<!-- End loop -->
<!-- Navigation for older and newer posts -->
<nav class="photo-navigation">
<p class="previous-photos">
<?php next_posts_link('‹ Older photos '); ?>
</p>
<p class="newer-photos">
<?php previous_posts_link('Newer photos ›'); ?>
</p>
</nav>
</div>
</div>
<?php get_footer(); ?>
In general this is a simplified version of the Twenty Twelve index.php file. However, there are a few important changes we made:
- The original theme displayed posts differently depending on their post format (i.e. image, aside, quote, etc.) We hardcoded our loop contents instead for simplicity.
- In the main blog content loop we are displaying the featured image thumbnail instead of an excerpt of the content.
- Below the posts we are displaying links to older and previous photos.
- We removed a lot of conditional code to display different options for when no photos are available to display.
- We modified the CSS (see below) for the homepage to display the content the full width of the page, instead of in one column, and removed the sidebar
In our example site we are displaying six images on the homepage. We can control how many posts display on the homepage by going into Settings > Reading > Blog pages show at most. 
Now that we have the new markup and content for our homepage, we need to modify some styles from the Twenty Twelve theme and add a few of our own. The CSS below contains all of the new styles we will need for this tutorial. They should be fairly self explanatory, although some apply to markup we will cover later in the tutorial. Copy the styles below into your styles.css file underneath the @import for the parent theme styles.
.site-header {
border-bottom: 4px #ededed double;
}
.home .site-content {
width: 100%
}
.site-content article {
border: none;
margin: 0;
}
.site-content .photo-entry {
float: left;
margin-bottom: 10px;
position: relative;
width: 30%;
margin-right: 3%
}
.photo-entry:last-child() {
margin-right: 0
}
.photo-entry footer {
background: #000;
bottom: 26px;
font-size: 12px;
display: none;
left: 0;
padding: 5px;
position: absolute;
}
.photo-entry a:hover footer {
display: block;
}
.photo-entry h2 {
color: #fff;
font-weight: normal;
margin-bottom: 3px;
}
.photo-entry p {
color: #888
}
.photo-navigation p {
clear: none;
float: left;
width: 48%;
}
.photo-navigation .newer-photos {
float: right;
text-align: right;
margin-right: 10px;
}
.photo-detail h1 {
font-size: 22px;
margin: 0 0 10px;
}
.photo-detail p {
margin: 10px 0;
}
.date {
color: #888;
font-size: 10px;
font-style: italic;
}
footer .date {
font-style: normal
}
.nav-single {
border-bottom: 4px #ededed double;
border-top: 4px #ededed double;
display: block;
float: left;
width: 100%;
margin: 10px 0;
padding: 20px 0 10px;
}
@media screen and (max-width: 420px) {
.site-content .photo-entry {
width: 48%;
margin: 0 2% 0px 0;
padding: 4px 0;
}
}
@media screen and (max-device-width : 760px) {
.photo-entry a:hover footer {
display: none;
}
}
You should now begin to have a homepage main content area that displays four thumbnail images with a title and date on hover. Each photo should link to a photo details page. 
Now, let’s work on the photo details page template.
Making a Photo Details Page Template
Since our photo entries are just posts, the corresponding template file is the single.php file, which is the default template for displaying single posts. Our goal is to create a page with a title, date, large photo, description, comments and thumbnail links to previous and next photos. We will also want a sidebar to display information about the owner of the site. 
Create a new file named single.php in your photography-child-theme directory. Then add the following code.
<?php get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<!-- Display the main photo -->
<article class="photo-detail">
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('M. d, Y'); ?></p>
<?php the_post_thumbnail('large'); ?>
<?php the_content(); ?>
</article>
<!-- Thumbnail navigation for prev and next posts -->
<nav class="nav-single">
<span class="nav-previous">
<?php $prevPost = get_previous_post(true); if($prevPost): ?>
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail <p>‹ Previous</p>", TRUE); ?>
<?php endif; ?>
</span>
<span class="nav-next">
<?php $nextPost = get_next_post(true); if($nextPost): ?>
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
<?php next_post_link('%link',"$nextthumbnail <p>Next ›</p>", TRUE); ?>
<?php endif; ?>
</span>
</nav>
<!-- Display comments -->
<?php comments_template( '', true ); ?>
<?php endwhile; ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Let’s walk through a bit of this, starting with where it says “Display the main photo.” There is nothing really that outstanding here, except that you may notice the the_post_thumbnail() function has a parameter of large set.
<?php the_post_thumbnail('large'); ?>
WordPress allows you to control the size for each default featured image size. You can also control the exact proportions used for the different sized featured images by going to Settings > Media. This can be really helpful for a photo blog. 
The next thing to notice are the previous and next post links. The first thing this section does is check to see if a previous exists. We will only look at the code for the previous posts since the next post code is the same, just with “next” instead of “prev.”
<?php $prevPost = get_previous_post(true); if($prevPost): ?>
This code first checks to see if there is a previous or next post. If there is one, it saves that previous post as the variable $prevPost. Next it gets the thumbnail for the previous image and saves it as the variable $prevthumbnail.
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
The final bit of code here outputs the thumbnail of the previous post and the words “Prev” all as a link to the previous post details page.
<?php previous_post_link('%link',"$prevthumbnail <p>‹ Previous</p>", TRUE); ?>
There is also code in this template to display comments, although we are not really doing anything special here with comments.
<?php comments_template( '', true ); ?>
The last thing to do is add a widget to the sidebar with the following text:
Welcome to the photography blog of Your Name Here. On this site you will find regular postings with photos of nature, buildings and other beautiful scenery. Most of the photos are captured using HDR photography.
It should end up looking like this in the admin area. 
Final Steps
Congratulations! You should now have a simple, working photography blog. In this tutorial we learned how to create a child theme for the WordPress Twenty Twelve theme, looked at how to overwrite templates from the original theme, like with our single.php template, we learned how to create thumbnail based navigation for previous and next posts, and we left room to work with widgets in the sidebar.
If you are planning on using this basic theme for a more complex photoblog, you may look into using isotope for displaying different sized images in a grid. You may also want to add more meta data about photos or group them into categories and apply tags. Your final site will likely also have some pages, like an about or contact page. These topics were out of scope for this tutorial, but are good things to look into. Enjoy the theme and tutorial and please share if you find the tutorial helpful or end up modifying this simple theme into your own photo blog.
The post How to Build a WordPress Photography Child Theme appeared first on Treehouse Blog.