How to Build a Single Page Portfolio Theme – Part 5 – Adding a New Blog Page Template

Because we’re using the sticky posts for the carousel we’ll need to create a new page template with a loop that’ll exclude the sticky post from the output.

So…

Lets begin by creating a new page template for the blog posts.

Blog-page-template.php

Create a new document and call it blog-page-template.php with that done we’ll need to declare it a useable template file and add a loop that will output our blog posts without showing the sticky posts that we’re using for our carousel on the home page.

	<?php
/*
Template Name: Blog Posts Template
*/
?>
<?php get_header(); ?>

			
	<section class="blog">
    	<header>
			<div class="wrapper">
            	<h2>Blog</h2>
        	</div>
        </header>
			<div class="wrapper">
				<div class="left-content">
			
		<?php /* CREATE A NEW BLOG SECTION.
				 *****************************************************/
		 		/*  WITHOUT STICKY POSTS PLEASE... */
				$the_query = new WP_Query( array( 'post__not_in' => get_option( 'sticky_posts' ) ) );?>
 
		<?php if ( $the_query->have_posts() ) :
 
			$post = $posts[0];
			 
		  ?>
				<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
	 
				<article id="post-<?php the_ID(); ?>">
					<header>
						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
						<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
						<p>Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?></p>
					</header>
					<section>
					
	 				<?php $content = get_the_content(); echo wp_trim_words( $content , '30' ); ?>
					
					</section>
					<footer>
						<p><?php the_tags('Tags: ', ', ', '<br>'); ?> Posted in <?php the_category(', '); ?> &bull; <?php edit_post_link('Edit', '', ' &bull; '); ?> <?php comments_popup_link('Respond to this post &raquo;', '1 Response &raquo;', '% Responses &raquo;'); ?></p>
					</footer>
				</article>
	 
				<?php endwhile; ?>
	 
				<nav>
					<p><?php posts_nav_link('&nbsp;&bull;&nbsp;'); ?></p>
				</nav>
	 
				<?php else : ?>
	 
				<article>
					<h1>Not Found</h1>
					<p>Sorry, but the requested resource was not found on this site.</p>
					<?php get_search_form(); ?>
				</article>
	 
				<?php endif; ?>
                </div> <!-- /.left-content -->
                <?php get_sidebar(); ?>
 
		   <?php wp_reset_query(); ?>  
			</div><!-- /.wrapper -->
	   </section> <!-- /.blog -->
 
        
<?php get_footer(); ?>

Style.css

Next we want to open up our style.css and add some generic style for our blog, I want these to be a two column layout.

/* Blog Section
-------------------------------------------------- */
section.blog .wrapper > article {
    float: left;
    width: 47.5%;
}
section.blog .wrapper > article:nth-of-type(1) {
	margin-right: 5%;
}
section.blog .wrapper > nav {
    clear: both;
}

Now to use our template, create a new page, call it “Blog”. Then select the “Blog Post Template” from the template dropdown list in the page attributes.

Finally adding our navigation, we’ve added id’s to the sections of the site we’ve just created so we can use these in our navigation. Go to the WordPress admin page, under Appearance/Menu.

When we have our menu page open, “Create a new menu”, Name it “Menu 1”, select the links tab and remove the current url “http://” and replace it with our div id’s used on our sections that we added earlier in this tutorial.

We want our navigation to look like this… Notice I also added a link to our blog page template!.

With those added lets select which menu they should appear under. Choose “Manage Locations” from the dropdown menu for Header Menu, select our Menu 1 and save the changes.