[Resolved] Same Child theme template page yielding two different results?

[Margot]

I think this issue first came up after I installed Woocommerce. A template page I created for my Child theme displays differently when I publish pages. For some pages it comes out looking correct and in others it looks like there are additional divs and wrappers being placed inside my content:

url*.com/gotham-wedding-accessories/ <-displays correctly
url*.com/zara-wedding-accessories/ <- displays incorrectly

* see below

Not sure if the solution is in the css styling or if it’s something else?

[Tom]

Hi there,

They look identical to me – is there something specific I should be looking at?

[Margot]

Oh yes. Sorry, I should have been more specific. Didn’t mean to make this a ‘spot the difference’ puzzle haha.

I highlighted them in red just now so you can see what I’m talking about.

The space in between the h4 header “Accessories” and the paragraph description on the right hand side is off on the “Zara” page. It looks like the page is applying the top margin setting of 125px (from the .wedding-product-description wrapper) for the paragraph text. But it’s only doing that on new pages that I publish (as seen of the “Zara” page. The “Gotham” page was how it was originally intended to look). The two pages are generated using the same page template though so I can’t understand why they’re being published differently.

[Leo]

Did you remove those pages? I’m see a 404 page when I check them both.

[Margot]

Hi Leo, they’re still up and correct.
Please make sure to follow the aiwebsitesandbox/ directory. It’s in the private link I posted

[Leo]

This CSS is giving that top margin:

.wedding-product-description, .branding-product-description {
    margin: 125px 0 0 0;
    max-width: 600px;
}

Looks like your HTML structure in the two pages are different.

[Margot]

The two pages are generated with the same child theme page template so the HTML *should* be identical but they’re not. For some reason an additional div with the .wedding-product-description class is being generated around the paragraph underneath the h4 for all the new pages I publish. I suspect this started happening after installing woocommmerce but I’m not 100% sure. I don’t want that additional div to be generated. I can post the snippet of that page’s php code if it will help?

[Margot]

For your reference, this is how that section is coded in my page template:

<div class="product-col product-col2">
      <div class="wedding-product-description">
           <h1 id="accessories-header"><?php the_title(); ?></h1>
           <h4 class="wedding-product-subhead">Accessories</h4>
           <p><?php get_template_part( 'content' ); ?></p>
      </div>
</div>

[Leo]

Have you tried disable all plugins to see if any of them is causing the issue?

[Margot]

Yes, tried that. No change. Still the same issue.

[Tom]

What if you replace this:

<p><?php get_template_part( 'content' ); ?></p>

With this:

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

[Margot]

I think I figured out what was happening. When I was creating new pages the plain text area was generating extra divs such as .inside-article .entry-content and .article divs. You couldn’t see it on rich text view but it was messing up the layout. I have to manually delete that on new pages but at least I can work around it to make sure there’s not additional markup.

Out of curiosity is this <p><?php the_content(); ?></p> a preferable string to the <p><?php get_template_part( 'content' ); ?></p>?

Thanks again!

[Tom]

get_template_part( 'content' ) will fetch the contents of the content.php template file, which includes extra HTML markup.

the_content() will only grab the content of the current post – nothing else.

[Margot]

Got it! Thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts