skip to Main Content

I’m using elementor, a page builder for WordPress and I’ve created a short code to display a custom post type loop inside of it…

When I insert the shortcode, it shows up correctly in the editor but when I save it and try and visit the page normally, the code seems to have broken the page and the page just keeps repeating forever… Here’s the page link: http://webserver-meetandengage-com.m11e.net/about-us/ it take a little while to load but you will see it all repeating…

I’m thinking I might not have closed the loop properly or something, but I cant see where I’m going wrong! It’s also worth noting the loop works fine when added directly into a template file.

The loop is here:

<div class="container team-members-container">

    <h2 style="font-weight: bold; text-align: center; margin:70px 0 70px 0;">The Team</h2>

    <div class="row">

        <?php
            $args = array( 
              'post_type' => 'team_members'
              // 'orderby' => 'none'
            );
            $the_query = new WP_Query( $args );
        ?>

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="col-sm-4">  
        <a href="<?php the_permalink(); ?>">

            <?php 

            $image = get_field('photo');

            if( !empty($image) ): ?>

                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

            <?php endif; ?>

            <h2 class="team-name"><?php the_field('name'); ?></h2>
            <p class="team-position"><?php the_field('position'); ?></p>

        </a>
        </div>

        <?php endwhile; wp_reset_postdata(); endif; ?>

    </div>

</div>

and the loop is contained in its own file called team.php. The code in the functions.php file I’m using to create the shortcode is:

function get_team($atts) {
  ob_start();
  get_template_part('inc/team');
  return ob_get_clean();
}
add_shortcode('team', 'get_team');

Creating the shortcode [team] to use in my page editor.

Can anyone see where the problem might be? Thanks for looking 🙂

2

Answers


  1. Try changing if ( have_posts() ) to if ( $the_query->have_posts() )

    The conditional needs to access the $the_query object properly.

    https://codex.wordpress.org/Class_Reference/WP_Query

    Login or Signup to reply.
  2. Try this

     <div class="row">
    
            <?php
                $args = array( 
                  'post_type' => 'post'
                  // 'orderby' => 'none'
                );
                $the_query = new WP_Query( $args );
            ?>
    
            <?php if ( $the_query->have_posts()  ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    
            <div class="col-sm-4">  
            <a href="<?php the_permalink(); ?>">
    
                <?php 
    
                $image = get_field('photo');            
                if( !empty($image) ): ?>
    
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
    
                <?php endif; ?>
    
                <h2 class="team-name"><?php //the_field('name'); ?></h2>
                <p class="team-position"><?php //the_field('position'); ?></p>
    
            </a>
            </div>
    
            <?php endwhile; wp_reset_postdata(); endif; ?>
    
        </div>
    
    </div>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search