CHILD THEME: archive.php

written by: Jeff McNear

---

CHILD THEME: archive.php

The parent file looks like this

<?php
/**
 * The template for displaying archive pages.
 *
 * Learn more: https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package storefront
 */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php
get_template_part( 'loop' );
else :
get_template_part( 'content', 'none' );
endif;
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
do_action( 'storefront_sidebar' );
get_footer();

The modified file will allow for modified behaviors … we start out the same

<?php
/**
 * The template for displaying archive pages.
 *
 * Learn more: https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package storefront
 */
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php if ( have_posts() ) : ?>
<header class="page-header">
<?php the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' );
?>
</header><!-- .page-header -->
<?php while ( have_posts() ) : the_post(); ?>

However we want to first test to see if a featured image has been assigned for a post with a condition – if it meets the condition the image will be placed in a <div> to the left and the title will be placed in a <div> to the right

<!-- TESTING FOR A THUMBNAIL -->
<?php if ( get_the_post_thumbnail( $post_id ) != '' ) { ?>
<div class="archive_left_picture">	
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail( 'medium' ); ?></a>
</div><!-- ends left picture -->

<div class="archive_right_text">
<header class="entry-header">
<h1 class="entry-title"> <a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_title(); ?></a></h1>	
</header><!-- .entry-header -->
<?php the_excerpt(); ?>
<p align="right" style="margin-bottom:.5em;">
<a href="<?php the_permalink(); ?>" rel="bookmark">
... read the full article</a></p>
</div><!-- ends right text -->	
<div class="clear"><hr/></div>

If the post does not meet the condition, the display will be different

<?php   } else { ?>
<!-- WHEN THERE IS NO THUMBNAIL -->
<header class="entry-header">
<h1 class="entry-title"> <a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_title(); ?></a></h1>	
</header><!-- .entry-header -->
<?php the_excerpt(); ?>
<p align="right" style="margin-bottom:.5em;">
<a href="<?php the_permalink(); ?>" rel="bookmark">
... read the full article</a></p>
<div class="clear"><hr/></div>
<?php    } ?> <!-- CLOSING THE CONDITION -->
<?php endwhile; ?>

As before the condition of no related posts will remain the same, and we will keep the same basic HTML markup

<?php else :
get_template_part( 'content', 'none' );
endif;
?>
</main><!-- #main -->
</div><!-- #primary -->

However we will be using a unique widget region for archives (and single posts_

<!-- ALTERNATIVE WIDGET REGION -->
<div id="secondary" class="widget-area">
<?php if ( ! dynamic_sidebar( 'post-sidebar' ) ) : ?>
<?php endif; // end sidebar widget area ?>
</div>
<?php
get_footer();