0

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.

0

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

  • Thank you, that explains how can I improve the counter. What I'm looking for is to remove the extra content being generated due to my faulty for loop (I guess). Any insight on that? – Nimsrules Sep 19 '14 at 4:02
  • See my edit :-) – Pieter Goosen Sep 19 '14 at 4:28
  • Even after moving wp_reset_postdata() after endwhile, I'm getting the content generated 8 times where 8 = $count_posts – Nimsrules Sep 19 '14 at 5:11
  • I am currently at work, so can't test anything. But I would suggest to use only one query, using two is definitely your problem here. As I suggested, use the build in counters. Just one note, if you use a custom query, as you did, and the variable assigned to WP_Query is $locationsLoop as it is in your case, your loop counter can be accessed by $locationsLoop->current_post – Pieter Goosen Sep 19 '14 at 5:36
  • 1
    That did it.. Thank you so much Pieter. I removed both my for loops and replaced $i and $j with $locationsLoop->current_post, although I had to keep both the WP_Querys because of the separate divs structure. – Nimsrules Sep 20 '14 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.