Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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="<?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. ?>
share|improve this question
    
Hi, welcome to WPSE! I think your question doesn't fit this site format, please take a look at the FAQ. After that, you will have to start here: codex.wordpress.org/Main_Page#Learn_How_to_Use_WordPress –  brasofilo Jul 13 '12 at 2:04
    
The question is on topic and – for someone who just started with WordPress – very good. Maybe a little bit localized, but Hybrid based themes aren’t soo rare. –  toscho Jul 13 '12 at 2:31
    
hi. yes, i just started learning wordpress. i did learn joomla so then i learnt a bit of php. im sure its just a simple code adding, or something. i can work the logic in my head but im just confused where to put codes and stuffs. thanks. –  Elizabeth Rimbo Jul 13 '12 at 8:35
    
@toscho : Danke, it was a programmaholic interpretation, my bad ;) Elizabeth, recently I compiled some WordPress diagrams that may be of use. And there's this fine infographic by Yoast: The anatomy of a WordPress theme. –  brasofilo Jul 13 '12 at 13:14
add comment

1 Answer

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="<?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.

share|improve this answer
    
hmm.. firstyly, the page url shows id=15 so i think it's 15 ? I saved it as category-15.php, but the page doesn't wanna use it. I tried using the slug name as well. –  Elizabeth Rimbo Jul 25 '12 at 7:33
    
Did you try id 4? The category id and page id are different. You are supposed to use category id. Edit: Never mind, I saw that you got it to work already. :) –  Logen Jul 28 '12 at 16:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.