0

I have a quite specific problem, I created a query that currently has to display the first post differently from the rest and everything seemed to work, but there is a problem that displays the title twice can some help? This is my code:


                // args
                $args = array(
                    'showposts'     => 5,
                    'post_type'     => 'post',
                    'orderby'       => 'date',
                    // 'order'          => 'ASC',
                    'meta_query'    => array(
                        'relation'      => 'OR',
                        array(
                            'key'       => 'type_id',
                            'value'     => 'News',
                            'compare'   => 'LIKE'
                        ),

                    )
                );


                // query
                $the_query = new WP_Query( $args );
                ?>
                <?php if( $the_query->have_posts() ): 
                    $i = 0; 
                    while ($the_query->have_posts() ) :
                    $the_query->the_post();
                    if ( $i == 0 ) : ?>
                <div class="card mb-3">
                    <a href="<?php the_permalink(); ?>" ><img src="<?php the_post_thumbnail_url() ?>" class="card-img-top"></a>
                    <div class="card-body">
                        <h2 class="card-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                        <p class="card-text"><small class="text-muted"><?php the_time('F jS, Y'); ?></small></p>
                        <p class="card-text"><?php the_excerpt(); ?></p>
                    </div>
                <?php endif; 
                    if ( $i != 0 ) : 
                ?>
                <div class="secoundposttak">
                    <?php endif; ?>
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php the_field('thumbnail'); ?>" />
                        <?php the_title(); ?>
                    </a>
                </div>

                <?php $i++;
                    endwhile;
                endif; ?>

                <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>

enter image description here

1

Try this. The code has comments where modified.

<?php 

    // args
    $args = array(
                'showposts'     => 5,
                'post_type'     => 'post',
                'orderby'       => 'date',
                // 'order'          => 'ASC',
                'meta_query'    => array(
                    'relation'      => 'OR',
                    array(
                        'key'       => 'type_id',
                        'value'     => 'News',
                        'compare'   => 'LIKE'
                    ),

                )
            );


    // query
    $the_query = new WP_Query( $args );
            ?>
    <?php if( $the_query->have_posts() ): 
                $i = 0; 
                while ($the_query->have_posts() ) :
                    $the_query->the_post();

                    // First post
                    if ( $i == 0 ) : ?>
                        <div class="card mb-3">
                            <a href="<?php the_permalink(); ?>" ><img src="<?php the_post_thumbnail_url() ?>" class="card-img-top"></a>
                            <div class="card-body">
                                <h2 class="card-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                                <p class="card-text"><small class="text-muted"><?php the_time('F jS, Y'); ?></small></p>
                                <p class="card-text"><?php the_excerpt(); ?></p>
                            </div>
                        </div> <!-- Add this to close div with class card mb-3 -->
                    <?php endif; 


                    // Other posts
                    if ( $i != 0 ) : 
                    ?>
                        <div class="secoundposttak">
                        <?php //endif;  <-- Not needed, move it  below (before $i++ )   ?>
                            <a href="<?php the_permalink(); ?>">
                                <img src="<?php the_field('thumbnail'); ?>" />
                                <?php the_title(); ?>
                            </a>
                        </div>

                    <?php endif;    // <-- Add this for  if ( $i != 0 ) :  ?>



                    <?php
                        $i++;
                endwhile;
           endif; ?>

            <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>

Also pay attention to suggestion at the end of answer by @Krzysiek Dróżdż♦ . I hope this may help.

0

It shows title twice, because your code should do exactly that...

You can clearly see it, if you format it correctly:

// args
$args = array(
    'showposts'     => 5,
    'post_type'     => 'post',
    'orderby'       => 'date',
    // 'order'          => 'ASC',
    'meta_query'    => array(
        'relation'      => 'OR',
        array(
            'key'       => 'type_id',
            'value'     => 'News',
            'compare'   => 'LIKE'
        ),
    )
);


// query
$the_query = new WP_Query( $args );
?>
<?php 
    if ( $the_query->have_posts() ): 
        $i = 0; 
        while ( $the_query->have_posts() ) :
            $the_query->the_post();
?>

            <?php if ( $i == 0 ) : ?>
               <div class="card mb-3">
                   <a href="<?php the_permalink(); ?>" ><img src="<?php the_post_thumbnail_url() ?>" class="card-img-top"></a>
                   <div class="card-body">
                       <?php // here you print the title for first item only ?>
                       <h2 class="card-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                       <p class="card-text"><small class="text-muted"><?php the_time('F jS, Y'); ?></small></p>
                       <p class="card-text"><?php the_excerpt(); ?></p>
                   </div>
           <?php endif; ?>

           <?pho if ( $i != 0 ) : ?>
               <div class="secoundposttak">
           <?php endif; ?>

           <a href="<?php the_permalink(); ?>">
               <img src="<?php the_field('thumbnail'); ?>" />
               <?php // and here you print title for every item, so for first item too - so you get it twice ?>
               <?php the_title(); ?>
           </a>
       </div>

       <?php
           $i++;
           endwhile;
       endif; ?>

  <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>

Now you can clearly see, that you print something special for first item in loop, but you also print normal title for every item in the loop - so for the first item you will print both of them...

And to be honest, it’s a very risky and messy way of enclosing html - it will be very easy to create unclosed tags, if you will code this way. As you already have problems with getting which part is printed when...

  • Thank you for your help, I can not quite understand what exactly you mean by "unclosed tags". Honestly, this is the first time I started to learn php and wordpress itself, it seemed to me the best way to learn is create your own theme from scratch. And as for the problem, thank you for help in solving it. – Jakub Krzyżanowski May 4 at 14:10
  • @JakubKrzyżanowski Jakub, you’ve already had problem with printing something twice. What would happen if you printed twice not only the title, but the closing </div> tag? You have to take a lot more care about the clarity of your code, so you prevent such problems. Also... You don’t need to use custom $i variable to keep track of loop index - there is current_post field already in wp_query object. – Krzysiek Dróżdż May 4 at 14:21

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.