Tutorial on how to create a WordPress archive template the list of category wise or date wise post

the archive.php file is used to display the date, month or year wise and its also use to show the category wise posts, now in this archive template development we are going to learn to make a archive and custom archive page.

Archive Page

Archive Page

Now Start to make the archive page atep by atep

Step 1

make a archive.php file inside your wordpress custom theme folder, if you want to show custom archive then make archive-<category_slug>.php file

Step 2

get an html template to show the archive loop and copy the html code and paste into your archive.php file or in custom archive file.

Step 3

Now place the custom theme header, footer and sidebar in its position using the code <?php get_header(); ?>, <?php get_footer(); ?>, and <?php get_sidebar(); ?>

Step 4

Make the archive page title dynamic using the code <?php echo get_the_archive_title(); ?>

Step 5

In archive.php or in custom archive file wordpress is use to send only the post loop related to the searched archive so replace the archive post loop by

<?php if(have_posts()): ?>    
<?php while(have_posts()): ?> 
<?php the_post(); ?> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
<div class="blog-post"> 
<h2 class="heading">  
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
</h2> 
</div> 
<div> 
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" /> 
</div> 
<div> 
<?php the_excerpt(); ?> 
</div>            
<div class="overlay"> 
<a id="read-more" href="<?php the_permalink(); ?>">Read More</a> 
</div> 
</div> 
<?php endwhile; ?> 
<?php endif; ?>

Step 6

Now reset the wp query using the code <?php wp_reset_query(); ?>

Step 7

Now here is the full code to make a archive page

<?php get_header(); ?>
<div class="container"> 
<div class="row"> 
<div class="col-md-12"> 
<h1><?php echo get_the_archive_title(); ?></h1> 
</div> <div class="col-md-8"> 
<?php if(have_posts()): ?>     
<?php while(have_posts()): ?> 
<?php the_post(); ?> 
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> 
<div class="blog-post"> 
<h2 class="heading">  
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
</h2> 
</div> 
<div> 
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>" /> 
</div> 
<div> 
<?php the_excerpt(); ?> 
</div>             
<div class="overlay"> 
<a id="read-more" href="<?php the_permalink(); ?>">Read More</a> 
</div> 
</div> 
<?php endwhile; ?>  
<?php endif; ?>  
</div> 
<div class="col-md-4"> 
<?php get_sidebar(); ?> 
</div> 
</div>
</div>
<?php get_footer(); ?>

now test the archive page and its rady for use to show the archive post in your wordpress theme

Thanks for reading.

Share The Post On -

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.