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

Posted on 25th August, 2014 59 Comments

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

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

menu step1

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.

menu step2

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

JamesVen

21st, Oct, 20

Ceexax ntmwkt [url=https://ciamedusa.com/#]cialis generic canada[/url] which is undisturbed outrageous and in use genetically <a href="

xxx

18th, Dec, 20

I really like your blog.. very nice colors & theme. Did you make this website yourself or did
you hire someone to do it for you? Plz respond as I’m looking to construct my own blog and would
like to find out where u got this from. kudos

Markus Warchal

30th, Dec, 20

I all the time emailed this webpage post page to all my contacts, since if like to read it next my links will too.|

hey

07th, Jan, 21

Taxi moto line
128 Rue la Boétie
75008 Paris
+33 6 51 612 712  

Taxi moto paris

If you are going for most excellent contents like I do, only pay a quick visit this site every
day since it gives feature contents, thanks

Lanora Hoppesch

04th, Feb, 21

Great site to read. Worth the time. Do YOU know a College Student? More assistance with their class assignments needed than ever before. Tell them about Essays Unlimited. They can assist with this problem.

Abacroli

14th, Feb, 21

cheap medical insurance plans – viagra dosage Olpwioa
cialis bph dosage
viagra generic substitute: [url=https://www.withoutbro.com/]viagra online[/url]

Dog Breed

25th, Feb, 21

Great blog! Is your theme custom made or did you download it
from somewhere? A theme like yours with a few simple adjustements would really make my blog stand out.
Please let me know where you got your design. Thanks

Togel Online Terpercaya

26th, Feb, 21

Write more, thats all I have to say. Literally, it seems
as though you relied on the video to make your point.
You definitely know what youre talking about, why waste your intelligence on just posting videos to your blog when you could
be giving us something informative to read?

Situs Keluaran Togel

26th, Feb, 21

Attractive section of content. I just stumbled upon your blog and
in accession capital to assert that I acquire in fact enjoyed account your blog posts.

Any way I will be subscribing to your feeds and even I achievement you access consistently fast.

oxvow.com

27th, Feb, 21

The delivery is really fast. I bought it on Double Eleven and it will arrive the next day. The time is exactly the same as the mobile phone, but I don’t want to talk about the strap. After wearing it for a day, there will be a lot of small scratches.

web site

10th, Mar, 21

I simpoy could not leave your websie prior to suggesting that I extremely loved the standard information a person provide on your visitors?
Is going to bbe back continuously in order to inspect new posts
web site

tetracycline cost

18th, Mar, 21

I have been surfing online greater than 3 hours today,
but I never found any fascinating article like yours. It is lovely
value sufficient for me. In my opinion, if all website
owners and bloggers made excellent content as you probably did, the web might be a lot more useful than ever before. http://antiibioticsland.com/Tetracycline.htm

AlainaIKobel

31st, Mar, 21

I’m not positive the spot you are getting your information, however good topic.
I must spend a little while studying more or training more.
Many thanks for magnificent info I used to be looking for this info for my
mission.

Here is my web blog – AlainaIKobel

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]