Display Posts by Categories

Question

I am currently in the process of developing a Wordpress theme and I am looking to have different pages where I can display posts from different categories. I have a styling and structure I want to maintain that I have used on the front page. I am having some trouble however.

I have created different pages within the them directory based on categories: page-life, page-travel etc. I am now looking to to display the posts by category on the page. Here is the loop (from my front-page) I want to edit:

  <div class="container">
      <!-- Example row of columns -->
      <div class="row front-posts">

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>


    <div class="line2"></div>

    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

<!-- Start latest post -->
<div class="line2">
<?php $latest_post = get_posts( 'numberposts=9' ); // Defaults args fetch posts starting with the most recent ?>

<?php foreach( $latest_post as $post ) : setup_postdata( $post ); ?>

       <div class="blog_thumb_wrapper">   


    <?php
                    $thumbnail_id = get_post_thumbnail_id(); 
                    $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
                    $thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachement_image_alt', true );
                 ?>
                      <a href="<?php the_permalink(); ?>"> <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?> " class="fontpage_thumb"></a>


           <div class="carousel-caption sml-blogpost">
                        <div class="carousel-caption-text blogpost-text">
                            <a href="<?php the_permalink(); ?>"><p><?php the_time('l, F jS, Y'); ?></p><br>
                            <h2><?php the_title(); ?></h2><br></a>
                         </div>
                      </div>


    </div>
<?php endforeach; ?>
<?php wp_reset_query(); ?>



<!-- End latest post -->
          </div>
    </div><!-- #content -->

I am unsure of how to now edit this loop and structure to just display posts from the specific category I need. Does anyone have any suggestions, it would be great to get some feedback?

Also - the loop used below is one that I have integrated from elsewhere, so there could be some irrelevant parts in there.

Thanks!

Answer 1

Try this code

<div class="container">
  <!-- Example row of columns -->
  <div class="row front-posts">

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>


    <div class="line2"></div>

    <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>

<!-- Start latest post -->
<div class="line2">
<?php 
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array('post_type' => 'post','cat'=> 2,'posts_per_page' => 9, 'paged' => $paged); // Here 2 ('cat'=>2) is the Id of category of post that need to show
$loop = new WP_Query( $args );?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

       <div class="blog_thumb_wrapper">   


    <?php
                    $thumbnail_id = get_post_thumbnail_id(); 
                    $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
                    $thumbnail_meta = get_post_meta( $thumbnail_id, '_wp_attachement_image_alt', true );
                 ?>
                      <a href="<?php the_permalink(); ?>"> <img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php echo $thumbnail_meta; ?> " class="fontpage_thumb"></a>


           <div class="carousel-caption sml-blogpost">
                    <div class="carousel-caption-text blogpost-text">
                        <a href="<?php the_permalink(); ?>"><p><?php the_time('l, F jS, Y'); ?></p><br>
                        <h2><?php the_title(); ?></h2><br></a>
                     </div>
                  </div>


      </div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>



<!-- End latest post -->
      </div>
</div><!-- #content -->

Don't forget to change the category id ('cat'=> 2). Replace 2 with your category id of post that you want to show