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 😮
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();
?>
You have got (almost) your whole page in the loop, so for each post it will repeat everything.
Close the
whileafter you want to end your posts, not at the end of our page.You need to stop it after:
<!-- NEWS END -->