Wordpress home.php repeats content?

Question

I am kind of Wordpress noob, but trying to implement my HTML/CSS theme into WP, but I've stumbled upon a weird bug...everytime I add another post, the home.php page duplicates itself after the end of the page :o Here is the HTML/PHP code for my home.php which will be my main page:

<?php 
    get_header();
?>      
        <!-- WRAPPER START -->
        <section id="wrapper">
            <?php 
                if(have_posts()):
                    while(have_posts()):
                        the_post();
            ?>
            <!--  start dynamic part -->
            <!-- NEWS START -->

            <div id="slider">       
                <article>
                    <h2>
                        <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                    </h2>

                    <p class="m-post-info">
                        Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> on 
                        <?php the_date('d-m-Y'); ?> |
                         <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
                    </p>

                    <div>
                        <?php the_content(); ?> 
                    </div>

                    <a id="arrow-left" href="#" title="Previous"></a>
                    <a id="arrow-right" href="#" title="Next"></a>
                </article>
            </div>

            <!-- NEWS END -->


            <!-- MAIN CONTENT START-->

            <section id="main-content">


                <!-- 3COLUMN LAYOUT START -->

                <div id="column-1">
                    <h3>
                        POPULAR ARTICLES
                    </h3>
                    <article class="news-article">
                        <header>
                            <h4>
                                 <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                            </h4>
                            <p class="post-info">
                                Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
                            </p>
                        </header>
                        <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
                        <div class="post-text">
                             <?php the_excerpt(); ?>
                        </div>
                    </article>
                    <article class="news-article">
                        <header>
                            <h4>
                                 <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                            </h4>
                            <p class="post-info">
                                Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
                            </p>
                        </header>
                        <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
                        <div class="post-text">
                             <?php the_excerpt(); ?>
                        </div>
                    </article>
                </div>

                <div id="column-2">
                    <h3>
                        RECENT COMMENTS
                    </h3>

                    <div class="comment">
                        <?php
                        $comments = get_comments('status=approve&number=3');
                          foreach($comments as $comment) :?>
                          <?php $my_id = $comment->comment_post_ID ; $post_id_comms = get_post($my_id); $title = $post_id_comms->post_title;?> 
                        <p class="user">
                            <?php echo($comment->comment_author);?> <span class="text-decoration">says</span><br />
                           </p>
                         <p class="user-text">
                            <?php echo($comment->comment_content);?><br />
                        </p>
                        <?php endforeach;?>
                    </div>
                </div>

                <div id="column-3">
                    <h3>
                        LIFESTREAM
                    </h3>
                    <article class="news-article">
                        <header>
                            <h4>
                                 <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                            </h4>
                            <p class="post-info">
                                Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
                            </p>
                        </header>
                        <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
                        <div class="post-text">
                             <?php the_excerpt(); ?>
                        </div>
                    </article>
                    <article class="news-article">
                        <header>
                            <h4>
                                 <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                            </h4>
                            <p class="post-info">
                                Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
                            </p>
                        </header>
                        <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
                        <div class="post-text">
                             <?php the_excerpt(); ?>
                        </div>
                    </article>
                </div>

                <!-- 3COLUMN LAYOUT END -->

                <!-- SIDEBAR START -->

                <aside id="tab-lists">
                    <?php if(!dynamic_sidebar('telerik-sidebar')): ?>
                    <div>
                        <h5 id="tab1">
                            <span>recent posts</span>
                        </h5>
                        <ul>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                        </ul>
                    </div>
                    <?php endif; ?>
                    <?php if(!dynamic_sidebar('telerik-sidebar2')): ?>
                    <div>
                        <h5 id="tab2">
                            <span>recent posts</span>
                        </h5>

                        <ul>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                            <li>
                                <a href="#">Pellentesque tincidunt, diam eget accumsan</a>
                            </li>
                        </ul>
                    </div>
                    <?php endif; ?>
                </aside>    

                <!-- SIDEBAR END -->

                <!-- BIG POST START -->
                <div id="big-post">
                    <h3>
                        RECENT POSTS
                    </h3>
                    <article>
                        <header>
                            <h2>
                                <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
                            </h2>
                            <p class="post-info">
                                Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> | <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
                            </p>
                        </header>
                        <img src="<?php echo get_template_directory_uri() ?>/images/image-big.png" alt="Picture" title="Example Image 2" width="214" height="214" />
                        <div class="post-text">
                            <?php the_content(); ?>  
                        </div>
                    </article>
                </div>
                <!-- BIG POST END -->

            </section>

            <!-- MAIN CONTENT END -->
        <!-- END DYNAMIC PART -->
            <?php 
                endwhile;
                endif;
            ?>
        </section>

        <!-- WRAPPER END -->

<?php 
    get_footer();
?>

Answer 1

I dont under stand what you mean with duplicates it self.

<article class="news-article">
    <header>
        <h4>
            <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
        </h4>
        <p class="post-info">
            Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
        </p>
    </header>
    <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
    <div class="post-text">
        <?php the_excerpt(); ?>
    </div>
</article>
<article class="news-article">
    <header>
        <h4>
            <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
        </h4>
        <p class="post-info">
            Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
        </p>
    </header>
    <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
    <div class="post-text">
        <?php the_excerpt(); ?>
    </div>
</article>

In my opinion you should have this code section only once:

<article class="news-article">
    <header>
        <h4>
            <a href="<?php the_permalink();?>"><?php the_title(); ?></a>
        </h4>
        <p class="post-info">
            Posted by <a href="<?php the_permalink();?>"><?php the_author(); ?></a> in on <?php the_date('d-m-Y'); ?> |  <a href="<?php the_permalink();?>"><?php comments_number( 'no comment', 'one comment', '% comments' ); ?></a>
        </p>
    </header>
    <img src="<?php echo get_template_directory_uri() ?>/images/image-small.png" title="Riots" alt="Example Image 1" width="75" height="75" />
    <div class="post-text">
        <?php the_excerpt(); ?>
    </div>
</article>

I do it that way in my templates, but I still don't under stand the problem at all.

In a closer look you have to try do do more than one loop on this. Every part that should be more than once or were you like to see your posts you need one loop around.

Answer 2

You have got (almost) your whole page in the loop, so for each post it will repeat everything.
Close the while after you want to end your posts, not at the end of our page.

You need to stop it after: <!-- NEWS END -->