Post data in separate divs with incrementing class using WP_Query

Question

I'm trying to achieve this result (which is the static HTML) and this is what I've gotten so far. Below is the approach I've taken:

• Created a CPT for 'locations'
• Created a custom taxonomy 'region' and associated it with 'locations'
• In the left panel is the list of post title and on the right is the post's content
• The structural problem is that they both are in separate divs
• I also need to add an incrementing class to both the divs which I've done using a 'for' loop
• What I think is the problem in my loops (for and WP_Query)

First I had to declare two similar arrays with different names for WP_Query because strangely I couldn't use a single for the separate divs:

$locationsArray = array(
'post_type' => 'location',
'posts_per_page' => '-1',
'order_by' => 'title',
'order' => ASC
);
$locationsLoop = new WP_Query($locationsArray);

$locationsArray2 = array(
'post_type' => 'location',
'posts_per_page' => '-1',
'order_by' => 'title',
'order' => ASC
);
$locationsLoop2 = new WP_Query($locationsArray2);

The code for the left panel is:

<div class="st_tabs">
  <a href="#" class="st_prev">prev</a><a href="#" class="st_next">next</a>
  <div class="st_tabs_wrap">
    <ul class="st_tabs_ul">
      <?php while($locationsLoop -> have_posts()) : $locationsLoop -> the_post(); ?>
        <?php $count_posts = wp_count_posts('location'); ?>
        <?php for($i=1;$i<=$count_posts->publish;$i++){ ?>

        <li>
          <a href="#tab-<?php echo $i; ?>" rel="tab-<?php echo $i; ?>" class="st_tab st_tab_<?php echo $i; ?>">
            <?php the_title(); ?>
          </a>
        </li>

        <?php } ?>

        <?php wp_reset_postdata(); endwhile; ?>
      </ul>
    </div>
  </div>

The code for right section containing post's content is:

<div class="st_views">
  <?php while($locationsLoop2 -> have_posts()) : $locationsLoop2 -> the_post(); ?>
    <?php for($j=1;$j<=$count_posts->publish;$j++){ ?>

    <div class="tab-<?php echo $j; ?> st_view">
      <div class="st_view_inner">
        <h3 class="title"><?php the_title(); ?></h3>
        <div class="row">
          <div class="large-12">
            <div class="left">
              <?php the_content(); ?>
            </div>
            <div class="right">
              Google Map
            </div>
          </div>
        </div>
      </div>
    </div>

    <?php } ?>

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

I hope you can figure out where am I mistaken by comparing the target and current result.

Answer 1

The main query has a loop counter build in which you can access via $wp_query->current_post. This counter starts at zero, so you would most probably add one to that count, something like $wp_query->current_post + 1

Also, you don't need to separately count posts, that is also an already build in function which you can access with $wp_query->found_posts. This will return the total amount of posts in the query

EDIT

wp_reset_postdata() should be used after the loop, not inside, so you should move wp_reset_postdata() to after endwhile