-1

I have an existing for loop, which is necessary for the design and layout. Inside this for loop I need show post by post.

This is my code.

<?php for($i=$val;$i<=$cdn;$i++) { ?>
<div class="desc dsc<?php echo $dsc++; ?>" style="display: none">
    <div class="team-details">
        <div class="name">
            <?php echo get_the_title();?><span><?php the_field('designation'); ?></span>
        </div>
        <?php get_template_part( 'post', 'content'); ?>
    </div>
</div>
<?php } ?>

I need to get each post inside this for loop without affecting the structure. Please help

This is my full page code

<?php //Template Name: File get_header(); get_template_part( 'weblizar', 'breadcrumbs'); ?>
<div class="container">
    <h2 class="title wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s">Meet our Team</h2>
    <div class="content team-content wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'post', 'content'); endwhile; else : get_template_part( 'nocontent'); endif; get_template_part( 'post-author'); ?>
        <div class="clearfix"></div>
        <?php //comments_template( '',true); ?>
        <div class="clearfix mar_top2"></div>
    </div>
    <section>
        <div class="team-list-wrapper clearfix wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
            <?php wp_reset_query(); ?>
            <!-- Set Category Name to Portfolio-Item -->
            <?php query_posts( array ( 'post_type'=>'our-team', 'posts_per_page' => -1 ) ); ?>
            <!-- Start WordPress Loop -->
            <?php $count=0; $dsc=0 ; $ids=0 ; ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php if ($count==0) : ?>
            <ul id="co-team">
                <?php endif; ?>
                <?php if ($ids==3) : $val=0 ; $cdn=3 ; endif; ?>
                <?php if ($ids==7) : $val=3 ; $cdn=6 ; endif; ?>
                <?php if ($ids==11) : $val=7 ; $cdn=10; endif; ?>
                <?php if ($ids>11) : $val = 11; $cdn =14; endif; ?>
                <li class="nav team-list">
                    <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id());?>" title="<?php echo get_the_title();?>" alt="<?php echo get_the_title();?>">
                    <div class="hover-item ids<?php echo $ids++; ?>">
                        <div class="actv-desc">
                            <div class="team-details">
                                <div class="name">
                                    <?php echo get_the_title();?><span><?php the_field('designation'); ?></span>
                                </div>
                                <?php get_template_part( 'post', 'content'); ?>
                            </div>
                            <?php $id=g et_field( 'facebook'); $id1=g et_field( 'twitter'); $id2=g et_field( 'linkedin'); $id3=g et_field( 'gplus'); $id4=g et_field( 'youtube'); if(!empty($id) || !empty($id1) || !empty($id2) || !empty($id3) || !empty($id4) ) { ?>
                            <div class="social-medias-holder">
                                <ul class="social-medias">
                                    <?php if( get_field( 'facebook') ): ?>
                                    <li><a href="<?php the_field('facebook'); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                                    </li>
                                    <?php endif; ?>
                                    <?php if( get_field( 'twitter') ): ?>
                                    <li><a href="<?php the_field('twitter'); ?>"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                                    </li>
                                    <?php endif; ?>
                                    <?php if( get_field( 'linkedin') ): ?>
                                    <li><a href="<?php the_field('linkedin'); ?>"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                                    </li>
                                    <?php endif; ?>
                                    <?php if( get_field( 'gplus') ): ?>
                                    <li><a href="<?php the_field('gplus'); ?>"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
                                    </li>
                                    <?php endif; ?>
                                    <?php if( get_field( 'youtube') ): ?>
                                    <li><a href="<?php the_field('youtube'); ?>"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                                    </li>
                                    <?php endif; ?>
                                </ul>
                            </div>
                            <?php } ?>
                        </div>
                    </div>
                </li>
                <?php $count++; ?>
                <?php if ($count==4 ||$wp_query->found_posts==0) : ?>
                <?php $count=0; ?>
            </ul>
            <style>
                .desc{
                    background: #000;
                   }
            </style>
            <?php echo $cdn; for($i=$val;$i<=$cdn;$i++) { ?>
            <div class="desc dsc<?php echo $dsc++; ?>" style="display: none">
                <?php echo $post_id; ?>
                <div class="team-details">
                    <div class="name">
                        <?php echo get_the_title($post_id);?><span><?php the_field('designation',$post_id); ?></span>
                    </div>
                    <?php get_template_part( 'post', 'content'); ?>
                </div>
            </div>
            <?php } ?>
            <?php endif; ?>
            <?php endwhile; ?>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
        </div>
        <!-- Tab panes -->
    </section>
</div>
<div id="foot-btn">
    <div class="container">
        <div class="hi-icon-wrap hi-icon-effect-6 " title="Join FIFI"> <a href="http://www.studiofifi.com/careers/" id="open-event" class="hi-icon hi-icon-contract ">Contract</a>
        </div>
        <div class="arrow_box"> <a href="http://www.studiofifi.com/careers/" class="up-arrow"> Join FIFI</a>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
    $('.tooltip').tooltipster({
       animation: 'grow',
       delay: 200,
       theme: 'tooltipster-punk',
       trigger: 'hover'
    });


    $('.ids0').click(function() {  $('.dsc0').toggle( "slow" );   });
    $('.ids1').click(function() {  $('.dsc1').toggle( "slow" );   });
    $('.ids2').click(function() {  $('.dsc2').toggle( "slow" );   });
    $('.ids3').click(function() {  $('.dsc3').toggle( "slow" );   });
    $('.ids4').click(function() {  $('.dsc4').toggle( "slow" );   });
    $('.ids5').click(function() {  $('.dsc5').toggle( "slow" );   });
    $('.ids6').click(function() {  $('.dsc6').toggle( "slow" );   });
    $('.ids7').click(function() {  $('.dsc7').toggle( "slow" );   });
    $('.ids8').click(function() {  $('.dsc8').toggle( "slow" );   });
    $('.ids9').click(function() {  $('.dsc9').toggle( "slow" );   });
    $('.ids10').click(function() {  $('.dsc10').toggle( "slow" );   });
    $('.ids11').click(function() {  $('.dsc11').toggle( "slow" );   });
    $('.ids12').click(function() {  $('.dsc12').toggle( "slow" );   });
    $('.ids13').click(function() {  $('.dsc13').toggle( "slow" );   });
    $('.ids14').click(function() {  $('.dsc14').toggle( "slow" );   });
    $('.ids15').click(function() {  $('.dsc15').toggle( "slow" );   });
    //         
          });
</script>
<?php get_footer(); ?>
0
2

If you're looking to get the post id to say add it to a div use the_ID()

<div id="post-<?php the_ID(); ?>">
1

Move the toggle-able code inside the main loop; put it inside the hover-item div. Get rid of all of the counting variables - $dsc, $ids, $cdn. Something like this:

<li class="nav team-list">
    <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id());?>" title="<?php echo get_the_title();?>" alt="<?php echo get_the_title();?>">
    <div class="hover-item ids">
        <div class="actv-desc">
            <div class="team-details">
                <div class="name">
                    <?php echo get_the_title();?><span><?php the_field('designation'); ?></span>
                </div>
                <?php get_template_part( 'post', 'content'); ?>
            </div>
            <div class="social-medias-holder">
                <!-- this stuff -->
            </div>
        </div>

        <div class="desc" style="display: none">
            <div class="team-details">
                <div class="name">
                    <?php echo get_the_title();?><span><?php the_field('designation'); ?></span>
                </div>
                <?php get_template_part( 'post', 'content'); ?>
            </div>
        </div>
    </div>
</li>

Change the class for the .hover-item.ids1 (ect) to not have a number on it, just:

<div class="hover-item ids">

Update the script at the bottom to get rid of all the repeated stuff, and rewrite it like this:

$('.ids').click(function() { 
    var $toggleable = $(this).find('.desc');
    $toggleable.toggle( "slow" );
});

You'll probably need to change how your css styles work because of how the html structure is changing.

2
  • Doesn't help me to get the layout I need. I need the first row(4 posts) to show the description in the second row(common description area).
    – codieboie
    Nov 11 '16 at 4:11
  • 1
    It can be done using this markup, absolutely. That's a css question though. You don't need to get the post id or use a second loop to display a second row of information just under the first.
    – Jen
    Nov 11 '16 at 15:48
0

You should seperate the number you're 'echoing' from the loop. here's an example from a recent site I've built:

<?php $startnum = 1;
$the_query = new WP_Query( array( 'cat' => 2 ) );
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="section-number-<?php echo $startnum; ?>">

  <h1>the_title()</h1>
  <div>the_content()</div>

</div>
<?php 
$startnum++;
endwhile;
wp_reset_postdata(); ?>
0

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.