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