PHP loop not displaying posts

Question

Context: I've built a loop using PHP to create a dynamic feed of my portfolio posts on my Wordpress site.

Problem: The first five posts are displaying perfectly fine; however, all the other posts following it aren't. I'm unsure what the cause could be but any help would be greatly appreciated. Thank you.

<section id="portfolio">
    <div class="container-fluid"> 
        <div class="row justify-content-center mb-5 pb-5 animatedParent animateOnce" data-sequence="100">
        <?php 
            $portfolioPosts = new WP_Query('cat=8&orderby=date');

            if ($portfolioPosts->have_posts()) {

                $i = 1;

                while ($portfolioPosts->have_posts()) {

                    $portfolioPosts->the_post();

                    if ($i == 1){
                        ?>
                        <div class="col-10">
                            <div class="row no-gutters">
                                <div class="col-12 col-md-12 col-lg-6">
                                    <div class="row no-gutters">
                                        <div class="col-12 animated fadeIn delay-300" data-id="1" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size:100% auto;">
                                            <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio3.png" class="img-fluid image-hover-portfolio"></a><!-- 12:4 -->
                                        </div>
                                    </div>
                                    <div class="row no-gutters">
                                        <div class="col-6">
                                            <div class="row no-gutters">
                                            <?php            
                                                } else if ($i == 2){
                                                ?>
                                                <div class="col-12 animated fadeIn delay-300" data-id="2" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: auto 100%;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio2.png" class="img-fluid image-hover-portfolio"></a><!-- 4:12 -->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="row no-gutters">
                                            <?php            
                                                } else if ($i == 3){
                                                ?>     
                                                <div class="col-12 animated fadeIn delay-300" data-id="3" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                                </div>
                                                <?php            
                                                } else if ($i == 4){
                                                ?> 
                                                <div class="col-12 animated fadeIn delay-300" data-id="4" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                                </div>
                                                <?php            
                                                } else if ($i == 5){
                                                ?>
                                                <div class="col-12 animated fadeIn delay-300" data-id="5" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row no-gutters">
                                    <?php            
                                        } else if ($i == 6){
                                        ?>
                                        <div class="col-12 animated fadeIn delay-300" data-id="6" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                            <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio3.png" class="img-fluid image-hover-portfolio"></a><!-- 12:4 -->
                                        </div>
                                    </div>
                                </div>
                                <?php            
                                } else if ($i == 7){
                                ?>
                                <div class="col-12 col-md-12 col-lg-6">
                                    <div class="row no-gutters">
                                        <div class="col-6 animated fadeIn delay-300" data-id="7" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                            <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                        </div>
                                        <?php            
                                        } else if ($i == 8){
                                        ?>
                                        <div class="col-6 animated fadeIn delay-300" data-id="8" style="background-image:url('https://theartoflight.co/wp-content/uploads/2020/12/web_KOS3273.jpg');background-size: 100% auto;">
                                            <a href=""><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                        </div>
                                    </div>
                                    <div class="row no-gutters">
                                    <?php            
                                        } else if ($i == 9){
                                        ?>
                                        <div class="col-12 animated fadeIn delay-300" data-id="9" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: auto auto;">
                                            <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio3.png" class="img-fluid image-hover-portfolio"></a><!-- 12:4 -->
                                        </div>
                                    </div>
                                    <div class="row no-gutters">
                                        <div class="col-6">
                                            <div class="row no-gutters">
                                            <?php            
                                                } else if ($i == 10){
                                                ?>
                                                <div class="col-12 animated fadeIn delay-300" data-id="10" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                                </div>
                                                <?php            
                                                } else if ($i == 11){
                                                ?>
                                                <div class="col-12 animated fadeIn delay-300" data-id="11" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                                </div>
                                                <?php            
                                                } else if ($i == 12){
                                                ?>
                                                <div class="col-12 animated fadeIn delay-300" data-id="12" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: 100% auto;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio1.png" class="img-fluid image-hover-portfolio"></a><!-- 4:3 -->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="row no-gutters">
                                                <?php            
                                                } else if ($i == 13){
                                                ?>
                                                <div class="col-12 animated fadeIn delay-300" data-id="13" style="background-image:url('<?php the_post_thumbnail_url(); ?>');background-size: auto 100%;">
                                                    <a href="<?php the_permalink(); ?>"><img alt="" src="<?php echo get_template_directory_uri();?>/assets/images/blank-portfolio2.png" class="img-fluid image-hover-portfolio"></a><!-- 4:12 -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php

                        }else{
                            //do nothing
                        }

                        $i ++;
                    }

                } else {
                                    } 

                wp_reset_postdata();

            ?>
        </div>
    </div>
</section>

have you verified how many posts the query actually returns? — ADyson
– ADyson, Commented Feb 1, 2021 at 15:56
Hi @ADyson, Yes, the browser renders five posts displaying. I have about 13 post within the blog category. — Tom
– Tom, Commented Feb 1, 2021 at 15:59
Ok. But have you debugged the code and verified how many posts this specific query actually returns? e.g. you can log the value of $i at the start of the loop to see how high it goes. — ADyson
– ADyson, Commented Feb 1, 2021 at 16:02
Also what's your default "posts per page" setting? Because you aren't varying it in your query. So that might be a factor. developer.wordpress.org/reference/classes/wp_query/… — ADyson
– ADyson, Commented Feb 1, 2021 at 16:09

Angel Deykov · Accepted Answer · 2021-02-01 16:14:14Z

2

You're missing 1 argument in your query(posts_per_page), since it's not set, query is using default value from your Settings->Reading:

$args = [
  'cat' => 8,
  'orderby' => 'date',
  'order'   => 'ASC',
  'posts_per_page' => -1
];

$portfolioPosts = new WP_Query($args);

answered Feb 1, 2021 at 16:14

Angel Deykov

1,2371 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

Thank you @Angel Deykov! Wordpress was defaulting to five posts per page; for reference this is the code I used. $portfolioPosts = new WP_Query('cat=8&posts_per_page=13&orderby=date');

Collectives™ on Stack Overflow

PHP loop not displaying posts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related