loop - WordPress Image Slider Looping Title Not Working

In my index page there are two slider one is working fine but the second one is giving some problems.

FIRST ONE

<?php 
global $post;
$i=0;
$args = array('post_per_page' => -1, 'post_type' => 'slider-items', 'page' => $paged, 'order' => 'ASC');
$myposts = get_posts($args);

foreach( $myposts as $post ) : setup_postdata($post);

    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-items');
    $i++;

 ?>

                <!-- Slider Item -->
                <div class="owl-item main_slider_item">



                    <div class="main_slider_item_bg" style="background-image:url(<?php echo $large_image_url[0]; ?>)"></div>
                    <div class="main_slider_shapes"><img src="<?php echo get_template_directory_uri() ?>/images/main_slider_shapes.png" alt="" style="width: 100% !important;"></div>
                    <div class="container">
                        <div class="row">
                            <div class="col slider_content_col">
                                <div class="main_slider_content">
                                    <h2></h2>
                                    <h2><?php the_content(); ?></h2>
                                    <div class="button discover_button">
                                        <a href="#" class="d-flex flex-row align-items-center justify-content-center">discover<img src="<?php echo get_template_directory_uri() ?>/images/arrow_right.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>





                </div>

                <?php 
endforeach;
 ?>

SECOND ONE

<?php 

global $small_post;
$x=0;
$small_args = array('post_per_page' => -1, 'post_type' => 'bottom-slider-items', 'page' => $small_paged);
$small_myposts = get_posts($small_args);

foreach( $small_myposts as $small_post ) : setup_postdata($small_post);

    $small_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($small_post->ID), 'bottom-slider-items');
    $x++;

 ?>

                            <div class="owl-item testimonials_item d-flex flex-column align-items-center justify-content-center text-center">
                                <div class="testimonials_content">
                                    <div class="test_user_pic" style="background-image:url(<?php echo $small_image_url[0]; ?>)"></div>
                                    <div class="test_name"><?php echo get_the_title(); ?></div>
                                    <div class="test_title">Company CEO</div>
                                    <div class="test_quote">"</div>
                                    <p><?php the_content(); ?></p>
                                </div>
                            </div>

<?php 
endforeach;
 ?>

---

When I call get_the_title() it shows me the title of first loop. I have added three sliders post in the first one and the second loop showing title of the last one. Please help.

In my index page there are two slider one is working fine but the second one is giving some problems.

FIRST ONE

<?php 
global $post;
$i=0;
$args = array('post_per_page' => -1, 'post_type' => 'slider-items', 'page' => $paged, 'order' => 'ASC');
$myposts = get_posts($args);

foreach( $myposts as $post ) : setup_postdata($post);

    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'slider-items');
    $i++;

 ?>

                <!-- Slider Item -->
                <div class="owl-item main_slider_item">



                    <div class="main_slider_item_bg" style="background-image:url(<?php echo $large_image_url[0]; ?>)"></div>
                    <div class="main_slider_shapes"><img src="<?php echo get_template_directory_uri() ?>/images/main_slider_shapes.png" alt="" style="width: 100% !important;"></div>
                    <div class="container">
                        <div class="row">
                            <div class="col slider_content_col">
                                <div class="main_slider_content">
                                    <h2></h2>
                                    <h2><?php the_content(); ?></h2>
                                    <div class="button discover_button">
                                        <a href="#" class="d-flex flex-row align-items-center justify-content-center">discover<img src="<?php echo get_template_directory_uri() ?>/images/arrow_right.svg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>





                </div>

                <?php 
endforeach;
 ?>

SECOND ONE

<?php 

global $small_post;
$x=0;
$small_args = array('post_per_page' => -1, 'post_type' => 'bottom-slider-items', 'page' => $small_paged);
$small_myposts = get_posts($small_args);

foreach( $small_myposts as $small_post ) : setup_postdata($small_post);

    $small_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($small_post->ID), 'bottom-slider-items');
    $x++;

 ?>

                            <div class="owl-item testimonials_item d-flex flex-column align-items-center justify-content-center text-center">
                                <div class="testimonials_content">
                                    <div class="test_user_pic" style="background-image:url(<?php echo $small_image_url[0]; ?>)"></div>
                                    <div class="test_name"><?php echo get_the_title(); ?></div>
                                    <div class="test_title">Company CEO</div>
                                    <div class="test_quote">"</div>
                                    <p><?php the_content(); ?></p>
                                </div>
                            </div>

<?php 
endforeach;
 ?>

---

When I call get_the_title() it shows me the title of first loop. I have added three sliders post in the first one and the second loop showing title of the last one. Please help.

• loop
• globals
• slideshow
• get-the-title

Share Improve this question edited Jan 13, 2019 at 22:20 butlerblog 5,14133 gold badges2828 silver badges4444 bronze badges asked Jan 13, 2019 at 15:21 Mohammad AsifMohammad Asif 1333 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

As you are using two loops in a page, that's why you need to reset your query.

1. wp_reset_postdata() -> best used after custom or multiple loops created with WP_Query
2. wp_reset_query() -> best used after a query_posts loop to reset a custom query
3. rewind_posts() -> best for re-using the same query on the same page

Get more details from here https://digwp/2011/09/3-ways-to-reset-the-wordpress-loop/

I Uses this and this worked.

and in the last i added

Now, again i used in the 2nd slider and works like charm, Thanks Mohammad Tajul Islam for the great suggestion.