How to create a WordPress custom page template for blog the post list

Hi, we are going to learn WordPress blog template post loop development , as wordpress is mainly used for blogging so there must have to a blog template for showing the posted blog.

Now start to create the blog template step by step

develop wordpress blog template

develop wordpress blog template

First there is two way to make a blog page

  1. you can go to admin panel and go to appearance ->customize->and chose a post page,
  2. and the second one is to make a custom page template for blog and after creating the page link the template for showing the page,

I will show the second one by creating a blog template and will display the blogs

Step 1

Take a html design and create a page inside your theme folder and paste the html

example: template_blog.php

Step 2

now place header, footer, and sidebar template of wordpress theme in its position by using the code
<?php get_header(); ?>, <?php get_footer(); ?> and <?php get_sidebar(); ?> and get the page content by using <?php if(have_posts()): while(have_posts()): the_posts(); endwhile; endif; ?> with template name.

the code will be like

<?php
/*
* Template Name: Blog Page
*/

?>

<?php get_header(); ?>

<div class="container">

<?php if(have_posts()): while(have_posts()): the_posts(); ?>

<div class="row">

<div class="col-md-8">

<!-- blog post area -->

</div>

<div class="col-md-4">

<?php get_sidebar(); ?>

</div>

</div>

<?php endwhile; endif; ?>

</div>

<?php get_footer(); ?>

 

Step 3

Now create the post loop with argument and get the title, excerpt and featured image and the permalink

Example:

$args = array(
'post_type' => 'home_non_veg_menu',
'order' => 'DESC',
'posts_per_page' => -1,
);
query_posts( $args );
// The Loop
$counter = 0;
if ( have_posts() ) :
while(have_posts()) :
//the post for declaration
the_post();

?>

<h2><?php the_title(); ?></h2>

<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID));  ?>" class="img-responsive" />

<?php the_excerpt(); ?>

<a href="<?php the__permalink(); ?>" >Read More</a>

<?php

endwhile;
endif;
wp_reset_query(); ?>

 

Step 4

Now we have the full code for making the template

Now the full code for make the blog template for wordpress is:

template_blog.php (inside theme root folder)

<?php
/** Template Name: Blog Page*/
?>
<?php get_header(); ?>
<div class="container">   
<?php if(have_posts()): while(have_posts()): the_posts(); ?>    
<div class="row">        
<div class="col-md-8">           
<?php  $args = array( 'post_type' => 'home_non_veg_menu',  'order' => 'DESC', 'posts_per_page' => -1,   ); 
query_posts( $args ); 
// The Loop   
$counter = 0;   
if ( have_posts() ) : 
while(have_posts()) :    
//the post for declaration   
the_post();
?>   
<h2><?php the_title(); ?></h2>   
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID));  ?>" class="img-responsive" />   
<?php the_excerpt(); ?>   
<a href="<?php the__permalink(); ?>" >Read More</a>   
<?php endwhile;   endif;   wp_reset_query();    ?>        
</div>        
<div class="col-md-4">              
<?php get_sidebar(); ?>        
</div>    
</div>    
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>

Now we have created the blog template and its rady for display the posts.

Thanks for reading

Share The Post On -

  1. Thanks a lot ‘bandar togel’

  2. For Now I am doing the development and design both , if in future i will inform

  3. Code Mystery says:

    Thanks everyone for showing interest on the site 🙂

  4. A very useful site with too many valuable content.

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.