Varying div class in WordPress

  • Hi folks i’m not sure if this is the right place to ask this as i’m unsure if it can be targeted specifically.

    I’m trying to build a WordPress Theme from scratch and i’m getting on pretty well so far, but i’ve run into a bit of an issue when trying to out put a portfolio archive with portfolio items in a specific design style.

    Basically i want 4 small then 1 large portfolio item in columns .. I’ll post the basic html that i want to output but i just don’t know how to target the loop to change the div classes at a certain count.

    Any direction on where to start would be great .. desired html below.

    Thanks

    1
2
3
4
5
6
7
8
9
10
11
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-6 col-sm-12" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-6 col-sm-12" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
  <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>
 <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> </div>

    If you notice, the 3rd and 6th are different .. Any direction on where to even start reading would be great !

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello,

    Here is an example of how you could accomplish this sort of thing in the loop : 

    
$counter = 0;
while ( have_posts() ) : the_post();

    $counter++;
    if( $counter % 3 === 0 ) :
	?>
        <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> <!-- output your content --> </div>
    <?php else : ?>
        <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> <!-- output your content --> </div>
    <?php endif; ?>

<?php endwhile; ?>

    Basically you’re just incrementing a counter with every post that is being output. If the counter is divisible by 3 ( every third post ) you output one thing, if it’s not divisible by 3, you output another thing (3 can be replaced with another value of course).

    A small variation, without using an extra variable for the counter :

      
while ( have_posts() ) : the_post();

    if( ($wp_query->current_post + 1) % 3 === 0 ) :
	?>
        <div class="col-md-3 col-sm-12" style="position: absolute; left: 0px; top: 0px;"> <!-- output your content --> </div>
    <?php else : ?>
        <div class="col-md-3 col-sm-6" style="position: absolute; left: 0px; top: 0px;"> <!-- output your content --> </div>
    <?php endif; ?>

<?php endwhile; ?>

    $wp_query->current_post always holds the index of the current output post in the main loop. It starts with 0, that’s why we need the +1.

    I hope this helps a little bit.

    Regards,
    Karim.

    • This reply was modified 7 years, 10 months ago by karimeo.

    your ‘desired html’ does not match your verbal description;

    what exactly are you trying to create?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Varying div class in WordPress’ is closed to new replies.