Wordpress loop for posts inside another loop for pages - one page website

Question

I made landing page(onepage) in WordPress.

I display all pages in wordpress loop.

index.php:

    <?php 
    query_posts(array(
        'post_type' => 'page',
        'posts_per_page' => '-1',
        'order' => 'ASC',
        'orderby' => 'menu_order'
        ));

    $tpl_parts = array(
        '5' => 'about',
        '7' => 'team',
        '76' => 'tech',
        '81' => 'services',
        '101' => 'contact',
        );
 ?>

<?php get_header('home'); ?>


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php if(array_key_exists($post->ID, $tpl_parts)) : ?>

                <?php get_template_part('template-parts/'. $tpl_parts[$post->ID], 'template'); ?>

            <?php else: ?>
                    <section id="<?php echo $post->post_name; ?>">
                    <div class="container">
                        <div class="row">
                            <?php the_content(); ?>
                        </div>
                    </div>  
                    </section>
            <?php endif; ?>

<?php endwhile; else : ?>
<?php endif; ?>

I want show posts from category services in page services.

services-template.php:

 <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h2 class="text-left">Services</h2>
                </div>
            </div>
            <?php query_posts('category_name=services'); ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <div class="row box-service">
                <div class="col-sm-6">
                    <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
                </div>
                <div class="col-sm-6">
                    <h3><?php the_title(); ?></h3>
                    <p class="intro"><?php echo get_the_content(); ?></p>
                    <a href="#">More</a>
                </div>
            </div>
            <?php endwhile; else: endif; wp_reset_query(); ?>

        </div>
    </section>

Page services display all posts from services category, but under services page, wordpress loop display posts from category services again, and contact section is removed.

What is wrong in this code ? I add wp_reset_query(); but problem still exist.

Thanks for help.

Answer 1

Ok, I resolve the problem.

I used WP_query class instead query_posts.

 <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h2 class="text-left">Services</h2>
                </div>
            </div>
            <?php $inner_query = new WP_Query( 'category_name=services' ); ?>
            <?php if ( $inner_query->have_posts() ) : while ( $inner_query->have_posts() ) : $inner_query->the_post(); ?>
            <div class="row box-service">
                <div class="col-sm-6">
                    <?php the_post_thumbnail('full', array('class' => 'img-responsive')); ?>
                </div>
                <div class="col-sm-6">
                    <h3><?php the_title(); ?></h3>
                    <p class="intro"><?php echo get_the_content(); ?></p>
                    <a href="#">More</a>
                </div>
            </div>
            <?php endwhile; else: endif; wp_reset_postdata(); ?>

        </div>
    </section>

This is working good.