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
First, there is two way to make a blog page
- you can go to the admin panel and go to appearance ->customize->and chose a post page,
- 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 an 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 a 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 making 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 ready for displaying the posts.