how to modify the wordpress main loop?

Question

i have a single page website built on wordpress (twenty-thirteen-child template). header content footer. and 3 posts categories :category A category B category C. i need to split the content into these 3 categories/sections -like this

<div class="section_top">
  all the posts from category A
</div>
<div class="section_mid">
  all the posts from category B
</div>
<div class="section_bot">
  all the posts from category C
</div>

i got a little confused when i started to read about the wordpress main loop ,query_posts and WP_Query,eventually i have this code replacing the main loop ,so my questions are :

1 is this the correct way to do it?

2 how to give each section a unique class since i need to style each section diffrently?

here is the code (index php(in child theme)

        <div id="primary" class="content-area">

    <div id="content" class="site-content" role="main"> 

<?php

$args = array('category__in' => array(catA,catB,catC));
$category_posts = new WP_Query($args);
if($category_posts->have_posts()) : 
  while($category_posts->have_posts()) : 

     $category_posts->the_post();

?>

  <div id="<?php
  foreach((get_the_category()) as $category) {echo $category->cat_name . ' ';}?>"
     class="post-item">
              <div class="post-info">
        <h2 class="post-title">
        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php the_title(); ?>
        </a>
        </h2>
      </div>
      <div class="post-content">
      <?php the_content(); ?>
      </div>
    </div>


<?php
  endwhile;
else: 
?>
  Oops, there are no posts.
<?php
endif;
?>

user2019515 user2019515 · Accepted Answer · 2014-01-04T04:28:55

The problem with how you're trying to solve it is that all posts are still shown chronologically, so this could happen:

Category A post 12/01
Category B post 09/01
Category A post 05/01

What I'd recommend: make 3 different WordPress loops querying each category separately like so:

<div class="section_top">
   WordPress loop for all the posts from category A
</div>
<div class="section_mid">
  WordPress loop for all the posts from category B
</div>
<div class="section_bot">
  WordPress loop for all the posts from category C
</div>

Example of such a loop:

// The Query
$the_query = new WP_Query('category_name=categoryA');

// The Loop
if ( $the_query->have_posts() ) {
        echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<li>' . get_the_title() . '</li>';
    }
        echo '</ul>';
} else {
    // no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

Difference between get_the_...() and the_...()

When you use functions like get_the_title() you are able to store them in a PHP variable like so:

$title = get_the_title();
echo strtoupper($title); //do something with it later

When you use functions like the_title() then the title is immediately printed on the page, so there's no need for an echo statement:

the_title();

Notice: the_permalink() has a function get_permalink(), the function get_the_permalink() does not exist. Don't ask my why ;)

how to modify the wordpress main loop?

1 Answers