WordPress loop – Custom theme – HTML integration

0 Views

I made an HTML page that I would like to integrate in WordPress.

The integration of the theme was done properly until I get to the posts part

Read More

I have a problem with algorithms to display posts so I know it comes from the WordPress loop.

I have done several searches on WordPress loops but I do not understand the different uses.

Here is the HTML code base that I would like automated : 

<div class="oeuvres">
    <div class="line0">
        <div class="oeuvre">
            <img class="img-oeuvre" src="ressources/creations/lisemassages.png" alt="">
            <div class="infos-oeuvre">
               <p>Title</p>
               <p>Content</p>
               <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
            </div>
        </div>
        <div class="oeuvre">
            <img class="img-oeuvre" src="ressources/creations/centredesoi.png" alt="">
            <div class="infos-oeuvre">
                <p>Title</p>
                <p>Content</p>
                <a class="btn-oeuvre" href="" target="_blank">voir le site</a>
            </div>
        </div>
    </div><!--class line0 -->
</div>

<div class="oeuvres">
    <div class="line1">
        <div class="oeuvre">
            <div class="infos-oeuvre">
                    <p>title</p>
                    <p>Content</p>
                    <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
            </div>
            <img class="img-oeuvre" src="ressources/creations/comparepc.png" alt="">
        </div>

        <div class="oeuvre">
            <div class="infos-oeuvre">
                <p>Title</p>
                <p>Content</p>
                <a class="btn-oeuvre" href="" target="_blank">voir nos créations</a>
            </div>
            <img class="img-oeuvre" src="ressources/creations/wine&amp;sound.jpg" alt="">
        </div>
    </div><!--class line1 -->
</div>

My loop is after class “line1” However, I need this class to be dynamic: it must pass “line0” every 2 posts.

How can I change this value when it is outside the loop

Here’s the code i’ve already done, it works but not perfectly. 

 <div class="oeuvres"> 

    <?php $i = 0 ; $line = ""  ; ?>
     //what i've try to do with those variables is to check if $i is pair or impair to change $line value but like i said its outside the loop so it doesnt change anything...... 

    <div class="<?php echo $line ; ?>">
        <?php while(have_posts()) : the_post(); ?>
        <?php // $i++;
        <?php //$line = ($i%0 == 0) ?"line0" : "line1" ;  ?>                                                                           
              <div class="oeuvre">                                                
                 <div class="infos-oeuvre">
                      <?php the_title(); ?>
                      <?php the_content()?>
                      <a class="btn-oeuvre" href="" target="_blank">Voir le site</a>
                   </div>
               </div>
         <?php endwhile; ?>
      </div>                                               
   </div>                                                     
   <?php endif; ?>

Any help or advice would be great !

Thanks

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. You can pass the class manually and do diferentes loops inside every line. Every 2 post, you add tags to the post as line0, line1, line2 and do the query with that.

    <div class="oeuvres">
<div class="line0">
<?php
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    // choose other differentiating parameter, for example tag 
    'tag'                     => 'line0'
);

// The Query
$query = new WP_Query( $args );

// The loop
if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
?>
    <div class="oeuvre">
        <img class="img-oeuvre" src="ressources/creations/centredesoi.png" alt="">
        <div class="infos-oeuvre">
            <p>Title</p>
            <p>Content</p>
            <a class="btn-oeuvre" href="" target="_blank">voir le site</a>
        </div>
    </div>
<?php

endwhile; endif;

// Restore original Post Data
wp_reset_postdata();

?>
</div><!--class line0 -->
</div>

<div class="oeuvres">
<div class="line1">
<?php
// WP_Query arguments
$args = array (
    'post_type'              => 'post',
    // choose other differentiating parameter, for example tag 
    'tag'                     => 'line1'
);

// The Query
$query = new WP_Query( $args );

// The loop
if( $query->have_posts() ): while( $query->have_posts()): $query->the_post(); 
?>

    <div class="oeuvre">
        <div class="infos-oeuvre">
            <p>Title</p>
            <p>Content</p>
            <a class="btn-oeuvre" href="" target="_blank">voir nos créations</a>
        </div>
        <img class="img-oeuvre" src="ressources/creations/wine&amp;sound.jpg" alt="">
    </div>
<?php

endwhile; endif;

// Restore original Post Data
wp_reset_postdata();

?>
</div><!--class line1 -->
</div>