how to modify the wordpress main loop? - wordpress-theming

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;
?>

Answer 1

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 ;)