WordPress – DOM Structure Disparity between Homepage and Archives Page

Just started learning WordPress, and I’ve run into a problem I can’t figure out. I’m trying to use WP for the News section of my website. So I want to keep all my styles and structure, but add WP comments, archives, etc. The problem is that WP appears to be interpreting the DOM differently on the Archives page than on the homepage.

Here’s what I intend the basic HTML structure to be with the WP elements added in:

Read More
<div id="wp-main">
    <div class="news">
        <div class="posts">
            <p>POST CONTENT</p>
            <div id="wp-comments>
                <span>WP COMMENTS CONTENT</span>
            </div><!-- #wp-comments -->
        </div><!-- .posts -->
    </div><!-- .news -->
</div><!-- #wp-main -->

.news has its opening tag in header.php, and closing tag before the footer in footer.php. .posts has its opening tag in content.php, and its closing tag after the comments in comments.php. This works great for the homepage:
enter image description here

But the archive page is producing nested .posts within the parent .posts, resulting in a russian-doll effect: enter image description here

I know it’s hard to pin-point a problem when you don’t have access to all the code, but as you know, there’s LOTS of it, so hopefully there is a wordpress expert out there, and I’m just making an obvious mistake 🙂

Related posts

Leave a Reply

1 comment

  1. I figured it out, and I don’t think anyone could’ve made this leap without much more information. In order to show the comments on the homepage I added this code to index.php (in the while loop):

    $withcomments = "1";
    comments_template();
    

    Since my .posts ends AFTER the comments, I had to add that code to the while loop of archive.php as well. I didn’t have the closing tag, since the comments weren’t there.