Need help creating category and tag template pages WordPress
I though I knew how to do this, but I guess not. Here's my code below that I'm using for category.php and tag.php. It's pulling all posts in, as opposed to the specific category or tag that was clicked on the site:
<?php
/**
* category template
*
*/
?>
<?php get_template_part('templates/header'); ?>
<div itemscope itemtype="http://schema.org/blogPost" style="position:relative;width:100%;height:365px;background:#ccc url(<?php the_field('main_blog_image',2); ?>) !important;background-repeat: no-repeat !important;background-size: cover !important;">
<div class="container">
<div class="row">
</div>
</div>
</div>
<div class="white-page">
<div class="container">
<div class="row">
<h2 class="main-blog-title">posts filed under <span class="blue-font"><?php single_tag_title(); ?></span></h2>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'order'=> 'post_date', 'orderby' => 'post_date', 'post__not_in' => $sticky, 'paged' => $paged );
$the_query = new WP_Query( $args ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="main-blog-summary" itemscope itemtype="http://schema.org/Blog">
<!-- this is pulling the image ID field to allow me to show smaller images when needed -->
<?php
global $post;
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium', false );
?>
<a href="<?php the_permalink(); ?>"><div class="main-post-image" style="background:rgba(0, 0, 0, 0) url(<?php echo $src[0]; ?>) !important;background-repeat: no-repeat !important;background-size: cover !important;"></div></a>
<div class="main-post-text">
<h2 class="main-post-title"><a style="color:#000;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="main-post-date">By <span itemprop="dateCreated"><?php the_author_firstname(); ?></span> on <span itemprop="dateCreated"><?php the_time('F j, Y'); ?></span></div>
<div class="main-post-excerpt" itemprop="blogPost"><?php the_field('post_intro'); ?></div>
<a href="<?php the_permalink(); ?>"><div class="main-post-button">Keep Reading</div></a>
</div>
</div>
<div class="clear" style="height:2.29em;"></div>
<?php endwhile; ?>
<!-- end of the loop -->
<div class="navigation"><p><?php posts_nav_link(' or you can ','«« go forward in time','go back in time »»'); ?></p></div>
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
</div>
<?php wp_link_pages(array('before' => '<nav class="pagination">', 'after' => '</nav>')); ?>
<?php get_template_part('templates/footer'); ?>
Answers (2)
Hariprasad Vijayan answers:
Hi,
When you create a category.php or tag.php, you don't need to create separate WP_Query for pulling post.
Refer these template files,
[[LINK href="https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfourteen/category.php"]]https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfourteen/category.php[[/LINK]]
[[LINK href="https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfourteen/tag.php"]]https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentyfourteen/tag.php[[/LINK]]
And when you need to add additional filters like order or orderby to the query, you can use pre_get_posts action hook.
[[LINK href="https://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts"]]https://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts[[/LINK]]
Hope it help.
Arnav Joy answers:
Try this
<?php
/**
* category template
*
*/
?>
<?php get_template_part('templates/header'); ?>
<div itemscope itemtype="http://schema.org/blogPost" style="position:relative;width:100%;height:365px;background:#ccc url(<?php the_field('main_blog_image',2); ?>) !important;background-repeat: no-repeat !important;background-size: cover !important;">
<div class="container">
<div class="row">
</div>
</div>
</div>
<div class="white-page">
<div class="container">
<div class="row">
<h2 class="main-blog-title">posts filed under <span class="blue-font"><?php single_tag_title(); ?></span></h2>
<?php if ( have_posts() ) : ?>
<!-- pagination here -->
<!-- the loop -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="main-blog-summary" itemscope itemtype="http://schema.org/Blog">
<!-- this is pulling the image ID field to allow me to show smaller images when needed -->
<?php
global $post;
$src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium', false );
?>
<a href="<?php the_permalink(); ?>"><div class="main-post-image" style="background:rgba(0, 0, 0, 0) url(<?php echo $src[0]; ?>) !important;background-repeat: no-repeat !important;background-size: cover !important;"></div></a>
<div class="main-post-text">
<h2 class="main-post-title"><a style="color:#000;" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="main-post-date">By <span itemprop="dateCreated"><?php the_author_firstname(); ?></span> on <span itemprop="dateCreated"><?php the_time('F j, Y'); ?></span></div>
<div class="main-post-excerpt" itemprop="blogPost"><?php the_field('post_intro'); ?></div>
<a href="<?php the_permalink(); ?>"><div class="main-post-button">Keep Reading</div></a>
</div>
</div>
<div class="clear" style="height:2.29em;"></div>
<?php endwhile; ?>
<!-- end of the loop -->
<div class="navigation"><p><?php posts_nav_link(' or you can ','«« go forward in time','go back in time »»'); ?></p></div>
<!-- pagination here -->
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
<div class="clear"></div>
</div>
</div>
</div>
<?php wp_link_pages(array('before' => '<nav class="pagination">', 'after' => '</nav>')); ?>
<?php get_template_part('templates/footer'); ?>