Layout 'Content' postion removing <main> tags from index.php

Loops & Logic
#1

Hi, I am using the Underscores starter theme and I notice that when I use the Content position this removes the <main> tags from index.php and I can’t see why.

Here is my Index.php:

get_header();
?>

    <!-- Tangible Theme Position -->
	<?php do_action('tangible_layout_before_content') ?>

	<main id="primary" class="site-main">

		<?php the_content() ?>

	</main><!-- #main -->

    <!-- Tangible Theme Position -->
	<?php do_action('tangible_layout_after_content') ?>

<?php
get_sidebar();
get_footer();

When I set a Layout to the Content position these tags are removed:

	<main id="primary" class="site-main">
	</main><!-- #main -->

I don’t see the same issue with Header.php which also has HTML tags around the content positions. Is this expected behaviour or a bug?

Thanks.

#2

This is happening because the position “Content” replaces the current theme’s entire template, in this case index.php. It probably needs to be explained better in the Location tab, where it says:

By default, the layout is applied to the Content position, which is the whole site page.

So it’s not replacing the post content, displayed by the_content() in the above PHP template. Instead, it replaces the whole page content between theme header and footer.

It uses the WP core filter template_include (reference) to replace the theme’s PHP template (index.php, or any other for the matching location) with an internal PHP template (called content.php in the plugin). This calls get_header(), loads the Layout template as the main content, then calls get_footer().

It means that the Layout template replaces index.php completely, and needs to output its own main element. Something like:

<main id="primary" class="site-main">
  <Field content />
</main>

And to output the theme sidebar:

<Template theme=sidebar />

This should be equivalent to the call to get_sidebar() in index.php.

I’ll make a note to improve the description of this theme position, and maybe rename it, to clarify what it does. Since there are positions for Document Head and Foot, it could be called Body, with an explanation that it replaces the entire theme template.

#3

I’ve updated the description:

By default, the layout is applied to the Content position. This replaces the theme template for the matching location, such as index.php, with a minimal wrapper that loads: the theme header, the layout template as main content, and the theme footer.

#4

Okay, thanks for the info. I have fixed this by moving the <main> tags into the required Layouts.

2 Likes