How to create a custom template for blog post

By default wordpress displays its posts on home page but this is not always desirable. What if you want to display a static page on home page and display your posts on separate page as www.yourdomain.com/blog/ , 

WordPress Page Templates are the answer

WordPress provides a clever way to do this called Custom Page Templates.When building out a custom “Blog” section for your WordPress site, sometimes it’s easiest to create a custom page template that you can customize that allows you to set the page location (such as http://yourdomain.com/blog), as well as your very own title and description that are displayed at the top of the blog section.

Follow the 6steps and you will have a separate blog template:

Step 1. Copy index.php to blog_template.php

Create a new php file  blog_template.php and copy the contents from index.php. This is to maintain the current theme structure of your wordpress.

 

Step 2. Create Page Template

Now convert the blog_template.php in to a template. You can do it by copying the following code at the top of your blog_template.php .

/*
Template Name: Blog_Template
*/

 

3. Use Custom Query for Posts

Now we need to get the posts using query .  Place the following code below get_header() .

<?php query_posts(‘post_type=post&post_status=publish&posts_per_page=10&paged=’. get_query_var(‘paged’)); ?>

the above code will fetch 10 posts in a page with pagination.

 

4. Add  Pagination

Place the pagination code after the wordpress query loopas :

<div class=”navigation”>
<span class=”newer”><?php previous_posts_link(__(‘« Newer’,'example’)) ?></span> <span class=”older”><?php next_posts_link(__(‘Older »’,'example’)) ?></span>
</div>

 

5. Reset the Query

Once you’ve output all your posts and navigation, you can usewp_reset_query() to reset the query_posts() results that you created earlier. In lamens terms, you’ve now reset the query to what it was before you calledquery_posts()

 

6. Create a page and apply the template:

Now create a new page with title Blog

 

Now the important part apply the template we created to new blog page.

 

 

If you feel above 6 steps are complex to go with by any means at the end of the 5th step, Dont worry  your  blog_template.php  is ready to go as below  . You can directly copy the code below for blog_template.php.

 

<?php get_header(); ?>

<div id=”content”>

<?php query_posts(‘post_type=post&post_status=publish&posts_per_page=10&paged=’. get_query_var(‘paged’)); ?>

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

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

<div id=”post-<?php get_the_ID(); ?>” <?php post_class(); ?>>

<a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail( array(200,220) ); ?></a>

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

<span class=”meta”><?php author_profile_avatar_link(48); ?> <strong><?php the_time(‘F jS, Y’); ?></strong> / <strong><?php the_author_link(); ?></strong> / <span class=”comments”><?php comments_popup_link(__(’0 comments’,'example’),__(’1 comment’,'example’),__(‘% comments’,'example’)); ?></span></span>

<?php the_excerpt(__(‘Continue reading »’,'example’)); ?>

</div>

<?php endwhile; ?>

<div class=”navigation”>
<span class=”newer”><?php previous_posts_link(__(‘« Newer’,'example’)) ?></span> <span class=”older”><?php next_posts_link(__(‘Older »’,'example’)) ?></span>
</div>

<?php else: ?>

<div id=”post-404″ class=”noposts”>

<p><?php _e(‘None found.’,'example’); ?></p>

</div>

<?php endif; wp_reset_query(); ?>

</div>

<?php get_footer() ?>

 

 

You May Like: