HostOnNet Blog

How to create a custom Category Archive Template in WordPress

Looking for Linux Server Admin or WordPress Expert? We can help.

I have already shared a detailed information for creating child theme with Underscore starter theme. In this post, i will tell you how do I create custom template for Category Archive page with Underscore child theme

STEP 1 : Go to wp-content > themes > (your current theme). You should see a file there named archive.php.

Open it and find the below line

get_template_part( 'template-parts/content', get_post_type() );

Replace with

get_template_part( 'template-parts/content-archive', get_post_type() );

STEP 2 : Copy-paste the below code in text edtior and save it as content-archive.php in template-parts folder (col-md* class will only work if you have added bootstrap)


<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package new
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
	<div class="col-md-3">
	<a href="<?php the_permalink(); ?>"><?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,260), array("class" => "img-responsive home-thumb")); } ?></a>
	</div>

	<div class="<?php echo (has_post_thumbnail())?'col-md-9':'col-md-12'?>">
		<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
		<?php the_excerpt(); ?>
	</div><!-- .col-md-9-->
</div><!-- .entry-content --><hr>
</article><!-- #post-<?php the_ID(); ?> -->

Here is the screenshot of my archive page

archive page

About Sibi Antony

Bootstrap and Android LOVER. I've been creating things for the web for over 10 years, from the period of flash and table based layout web sites till mobile and tab friendly web sites.
Posted in Wordpress

Leave a Reply

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.