how to display full post with pagination on home page

I am using the ‘Hatch’ theme. I’m familiar with HTML/CSS but not with WordPress, first time working with this.
I have my homepage showing recent posts and that’s good.

However, I want to make a new page called ‘Blog’ where I can show all my full posts, with pagination as well.

I thought I might have to create a template? Or, I tried making a category ‘blog’, but I don’t know how to change the display of that particular category.

I read similar questions, to my understanding I gotta get a loop happening, but I don’t know where.

my site is LizettePhotography.com

home.php code:

<?php
/**
 * Home Template
 *
 * A custom home page template.
 *
 * @package Hatch
 * @subpackage Template
 */

get_header(); // Loads the header.php template. ?>

    <?php do_atomic( 'before_masthead' ); // hatch_before_masthead ?>

    <div id="masthead">

        <?php do_atomic( 'open_masthead' ); // hatch_open_masthead ?>

        <?php $hatch_author_bio = hybrid_get_setting( 'hatch_author_bio' ) ? hybrid_get_setting( 'hatch_author_bio' ) : '1'; ?>

        <div id="author-bio"><?php the_author_meta( 'description', $hatch_author_bio ); ?></div>

        <div id="header-banner" role="banner">

            <?php // Check to see if the header image has been removed
            $header_image = get_header_image();

            if ( ! empty( $header_image ) ) : ?>

                <img src="https://wordpress.stackexchange.com/questions/58333/<?php header_image(); ?>" alt="" />

            <?php endif; // end check for removed header image ?>

        </div>

        <?php do_atomic( 'close_masthead' ); // hatch_close_masthead ?>

    </div>

    <?php do_atomic( 'before_content' ); // hatch_before_content ?> 

    <div id="content">

        <?php do_atomic( 'open_content' ); // hatch_open_content ?>

        <div class="hfeed">

            <?php if ( have_posts() ) : ?>

                <?php $counter = 1; ?>

                <?php while ( have_posts() ) : the_post(); ?>

                        <?php do_atomic( 'before_entry' ); // hatch_before_entry ?>

                        <?php if ( ( $counter % 4 ) == 0 ) { ?>

                            <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?> last">

                        <?php } else { ?>

                            <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">

                        <?php } ?>                                                  

                                <?php do_atomic( 'open_entry' ); // hatch_open_entry ?>

                                <?php if ( current_theme_supports( 'get-the-image' ) ) {

                                    get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'archive-thumbnail', 'image_class' => 'featured', 'width' => 220, 'height' => 150, 'default_image' => get_template_directory_uri() . '/images/archive_image_placeholder.png' ) );

                                } ?>                    

                                <?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>                     

                                <?php do_atomic( 'close_entry' ); // hatch_close_entry ?>                           

                            </div><!-- .hentry -->

                        <?php do_atomic( 'after_entry' ); // hatch_after_entry ?>

                    <?php $counter++; ?>

                <?php endwhile; ?>

            <?php else : ?>

                <?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>

            <?php endif; ?>

        </div><!-- .hfeed -->

        <?php do_atomic( 'close_content' ); // hatch_close_content ?>

        <?php get_template_part( 'loop-nav' ); // Loads the loop-nav.php template. ?>

    </div><!-- #content -->

    <?php do_atomic( 'after_content' ); // hatch_after_content ?>

<?php get_footer(); // Loads the footer.php template. ?>

Okay. I took a look at your site. You seem to using categories to show wedding, portraits, events and blog. I’m going to assume that you do not want the other posts of these categories to appear in your blog. So, the use of category would be appropriate.

Here’s how I would do it.

1. Duplicate the page.php template in your theme file and rename it category-(insert your category id).php. Based on your site, I determined that your blog category id is 4. Thus, category-4.php.

The reason why we are not duplicating the archive.php in your theme is because the blog formatting is not already there. By using page.php we retain the the main page and right side-bar layout.

Note: Check out this page in wordpress codex, for the category template.

2. Open category-4.php in a editor of your choice (I use Editra). Replace everything within the div id “content” with the following code. Then test your site to see if it works correctly. If it does work do the css styling. In the next step, I’ll show you the code to add numbered pagination.

    <!-- Start the Loop. -->


     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <!-- The following tests if the current post is in category 4. -->  
              <!-- If it is, the div box is given the CSS class "post-cat-four". -->  
              <!-- Otherwise, the div box will be given the CSS class "post". -->  
              <? php if ( in_category('4') ) { ?>
           <div class="post-cat-four">  <?php } else { ?>
           <div class="post">  <?php } ?>

          <!-- Display the Title as a link to the Post's permalink. -->  
              <h2><a href="https://wordpress.stackexchange.com/questions/58333/<?php the_permalink() ?>" rel="bookmark" title="Permanent 
              Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

          <!-- Display the date (November 16th, 2009 format) and a link to other posts 
              by this posts author. -->  
              <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

          <!-- Display the Post's Content in a div box. -->  
              <div class="entry">    <?php the_content(); ?>  </div>

          <!-- Display a comma separated list of the Post's Categories. -->  
              <p class="postmetadata">Posted in <?php the_category(', '); ?></p>  
              </div> <!-- closes the first div box -->

          <!-- Stop The Loop (but note the "else:" - see next line). -->  <?php endwhile; else: ?>

          <!-- The very first "if" tested to see if there were any Posts to --> 
              <!-- display.  This "else" part tells what do if there weren't any. -->  
              <p>Sorry, no posts matched your criteria.</p>

          <!-- REALLY stop The Loop. -->  <?php endif; ?>

Note: The code above is from wordpress codex, which I have already adjusted to your category ‘blog’.

3. Add pagination after your loop with this pagination tutorial by WP tut. I have extracted the code for easy reference.

          <?php global $wp_query;
          $total_pages = $wp_query->max_num_pages;

          if ($total_pages > 1){

            $current_page = max(1, get_query_var('paged'));

            echo paginate_links(array(
                'base' => get_pagenum_link(1) . '%_%',
                'format' => '/page/%#%',
                'current' => $current_page,
                'total' => $total_pages,
              ));
          } ?>

You can style the pagination links with the css code provided on the tutorial.

Please note that I did not test out the code. I hope this helps.