0

I am using a content page to render elements from my "Loop", I would like to count the post to get my current position as this would determine the size of the card I display. My (html, css cards you can see the bootstrap cards to understand what I mean) cards have variable width, with the first, second and third cards taking the majority of the space.

My code is below (for content.php):

    <?php if ($count == 0) { ?>
      <div class="row bg-white banner">
       <div class="col col-sm-8 remove-left-margin">
          <img src="./img/banner.png" class="banner-article-image" />
       </div>
       <div class="col-sm-4">
          <div><p class="banner-article-topic"><?php the_category(); ?></p></div>
          <div><h2 class="banner-article-title"><b><?php the_title(); ?></b></h2></div>
          <div><p class="banner-article-par"><?php the_content(); ?></p></div>
          <div><p class="banner-article-date"><?php the_date(); ?></p></div>
       </div>
     </div>
   <?php } ?>

   <?php if ($count > 2) { ?>
    <div class="row">
    <?php if ($count % 2 != 0) { ?>
        <div class="col col-sm-6 custom-margin">
            <div class="left-card-article">
                <div class="row">
                    <img src="./img/sample-3.jpg" class="img-responsive card-article-image" />
                </div>

                <div class="row card-article-body">
                    <div><p class="left-article-topic"><?php the_category(); ?></p></div>
                    <div><h4 class="left-article-title"><b><?php the_title(); ?></b></h4></div>
                    <div><p class="left-article-date"><?php the_date(); ?></p></div>
                </div>
            </div>
        </div>
    <?php } ?>

    <?php if ($count % 2 == 0) { ?>
          <div class="col col-sm-6 custom-margin">
            <div class="right-card-article">
                <div class="row">
                    <img src="./img/sample-4.jpg" class="img-responsive card-article-image" />
                </div>

                <div class="row card-article-body">
                    <div><p class="right-article-topic"><?php the_category(); ?></p></div>
                    <div><h4 class="right-article-title"><b><?php the_title(); ?></b></h4></div>
                    <div><p class="right-article-date"><?php the_date(); ?></p></div>
                </div>
            </div>
        </div>
      <?php } ?>
    </div>
<?php } ?>

This is a sample of my content.php, how can I pass the $count variable from index.php which is shown below (only the loop):

<div class="container body-margin" style="margin-top: 8em;">
<?php
    $count = 0;
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      get_template_part( 'content', get_post_format() );
      $count++;
    endwhile; endif;
?>
</div>

Would appreciate any help, thank you.

  • except $count variable you can use global $wp_query object. It have $post_count variable. So you directly write the code like $wp_query->post_count > 2 or $wp_query->post_count % 2 == 0 into the separate file. – Chinmoy Kumar Paul Feb 1 '19 at 9:53
0

The simplest solution (as in requiring the least work) would be to just make $count a global variable.

So in index.php you'd have:

global $post;
$count = 0;

And in content.php you'd just need to use $global $post; to access it:

<?php
global $post;

if ($count == 0) { ?>

However, I think this is the wrong approach. Your situation is that you effectively have 3 different templates and you want to choose which to display based on the current post count. The current post count is irrelevant to the individual templates. It's something that should be determined in the loop.

So what I'd suggest is creating 3 different template files for each type of card. Then inside index.php choose which to display based on the current number. This way you don't need to pass variables between templates.

So index.php would look like this:

$count = 0;

if ( have_posts() ) : while ( have_posts() ) : the_post();
    if ( $count == 0 ) {
        get_template_part( 'content', 'banner' );
    } 

    if ( $count > 2 ) {
        echo '<div class="row">';

        if ( $count % 2 != 0 ) {
            get_template_part( 'content', 'left-card' );
        } else if ( $count % 2 == 0 ) {
            get_template_part( 'content', 'right-card' );
        }

        echo '</div>';
    }

    $count++;
endwhile; endif;

Then you would split content.php into content-banner.php, content-left-card.php, and content-right-card.php with the template for each type of card.

PS: I just copied your if statements for $count, but it looks to me like this loop would not output anything at all for the 2nd & 3rd posts. I'm not sure if that's intentional, but if it isn't, $count > 2 should probably be $count > 0.

| improve this answer | |
  • Thanks a lot, I didn't add this <?php if ($count < 3 && $count > 0) { ?> it's for the second and third, felt like it would be a code dump just wanted to pass the main idea. – Mark20 Feb 1 '19 at 9:54
  • @Mark20 Ok, in that case just make sure you include that in your code, and create templates for any other layouts that would be used for those counts. If this helped you can mark the answer as accepted to let others know your question has a solution. – Jacob Peattie Feb 1 '19 at 11:13

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.