0

As a designer I'm the ***hole who makes different layouts for posts to make a page more different. Due to this, I'm trying to create the following:

enter image description here

This is the code I'm currently trying to fix.

[EDIT] I've got the styles working, but now the content is being duplicated [/EDIT]

<?php
$query = new WP_Query( array( 'post_type' => array( 'innovation_lab' ) ) );


while ( $query->have_posts() ) : $query->the_post();
$i=0;
    if ($i%3==0) echo '

    <div class="row border">

    ';

      echo '      
            <div class="col-lg-6">

                <a href="'; the_permalink(); echo '">';    
                echo '<h1>'; the_title(); echo '</h1></a><p>';


                                    foreach((get_the_category()) as $childcat) {
                                    if (cat_is_ancestor_of(10, $childcat)) {
                                    echo '<a href="'.get_category_link($childcat->cat_ID).'" class="category small">';
                                    echo $childcat->cat_name . '</a>  &nbsp;&#47;&nbsp;  ';
                                    }}


            echo '</p><p>';
            echo excerpt(60);
            echo '</p>';


      echo '';

          echo '<p><a href="'; the_permalink(); echo '" class="btn btn btn-readmore" >Lees meer</a></p>

          </div>

          <div class="col-lg-6">
          <p class="pull-right">';

                         the_post_thumbnail('', array('class' => 'pull-right img-responsive img-samenvatting'));

                         echo '</p></div></div>';




    if ($i%3==2) echo '



    ';

      echo '

                  <div class="row border"><div class="col-lg-6">';


      the_post_thumbnail('', array('class' => 'pull-right img-responsive img-samenvatting'));

      echo '</div>


            <div class="col-lg-6">

                <a href="'; the_permalink(); echo '">';    
                echo '<h1>'; the_title(); echo '</h1></a><p>';


                                    foreach((get_the_category()) as $childcat) {
                                    if (cat_is_ancestor_of(10, $childcat)) {
                                    echo '<a href="'.get_category_link($childcat->cat_ID).'" class="category small">';
                                    echo $childcat->cat_name . '</a>  &nbsp;&#47;&nbsp;  ';
                                    }}


            echo '</p><p>';
            echo excerpt(60);
            echo '</p>';


      echo '';

          echo '<p><a href="'; the_permalink(); echo '" class="btn btn btn-readmore" >Lees meer</a></p>

          </div></div>';


    if ($i%3==3) echo '</div>'; 


    $i++;
endwhile;


?>

PS: Please don't judge my PHP..

  • This question is about generic PHP/HTML/CSS not specific to Wordpress, so it is out of the scope of this site. Anyway, here my advice: use the same layout (HTML markup) but apply different CSS stlye to even/odd rows. – cybmeta May 14 '14 at 14:56
  • "Please don't judge my PHP" -- well... that spoils the fun. :) The PHP is the problem though, and as already noted pure PHP is off topic. – s_ha_dum May 14 '14 at 14:59
  • @cybnet & s_ha_dum , This is WordPress related as it's important for theming, right? I guess I'm not only frontend designer wishing to use this.. – rwzdoorn May 14 '14 at 15:11
0

Ok solution found. I forgot to use the {} and now it works. Here goes:

<?php
$query = new WP_Query( array( 'post_type' => array( 'custom_post_type' ) ) );

$i = 0;
while ( $query->have_posts() ) : $query->the_post();
    if ($i%2==0){ 

    echo '1st post here';


    }

    if ($i%2==1){   

    echo '2nd post here';       

          }

    $i++;

endwhile;

?>
  • 2
    You can also use if else, instead of two if's – pascalvgemert May 14 '14 at 18:28

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.