Repeated Header in a next.js page using iframe and BBPress

[Wm-M-Thompson]

Summary

I am new to the tech stack of this issue. I am new to Next.JS and I am new to BBPress. But this is the tech stack of my "WEC MFG" website, https://excellencematter.net. My page.tsx for the interaction menu option has the <iframe> which contains the bbpress functionality.

Now, here is the bug. After a new user account is registered and the new user logs in, the web page is a mess. It looks as if the iframe nests an entire website so that it produces a look where the whole webpage has two navigation bars. I hope I am describing this accurately. Please view the screen shot.

I have done some work with adding "snippets", custom pages and "Additional CSS". But so far the problem has been resistant to my efforts. I need help. I will provide the code you need to detect this bug and solve this problem. Please help.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0trtbjg6ukyudwntawqv.png

Additional information

No response

Example

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0trtbjg6ukyudwntawqv.png

[harshagarwalnyu]

This is a WordPress/BBPress issue, not a Next.js bug. The double nav bar appears because after a new user logs in, BBPress redirects the browser to the full WordPress site URL (e.g., https://excellencematter.net/forums/). The <iframe> src updates to that URL, which loads the complete WordPress theme including header and navigation — nested inside the existing Next.js page that already has its own nav.

Root cause: BBPress login redirects set the iframe source to a full WordPress page, not a bare content-only endpoint.

Fix: Create a stripped WordPress page template for iframe use

1. In your WordPress theme, create page-iframe.php:

<?php
/* Template Name: Iframe-safe */
get_header(); // omit this line to skip the WP nav
?>
<div id="primary" class="content-area">
  <main id="main" class="site-main">
    <?php
    while ( have_posts() ) :
      the_post();
      the_content();
    endwhile;
    ?>
  </main>
</div>
<?php
// get_footer(); // omit footer too

2. In WordPress admin, assign this template to your BBPress forum page.

3. Add a redirect filter so post-login lands on the stripped page:

add_filter('bbp_login_redirect', function($url) {
    return add_query_arg('iframe', '1', $url);
});

Then conditionally skip header/footer based on ?iframe=1 in header.php:

if (empty($_GET['iframe'])) {
    // render nav
}

Alternative (CSS-only, no PHP changes needed):

Add this to your WordPress "Additional CSS" or a child theme:

/* Hide header/nav when page is inside an iframe */
@media screen {
  html:has(> body.iframe-context) .site-header,
  html:has(> body.iframe-context) #masthead { display: none; }
}

Then inject document.body.classList.add('iframe-context') via a small script that checks window.self !== window.top.

The PHP template approach is cleaner for a permanent setup. The CSS approach works if you can't modify PHP files.

[GitNimay]

This is a duplicate of a discussion you have already posted. The full answer covering the root cause, the bbp_login_redirect filter fix, the CSS suppression approach, and the safe programmatic refresh workaround was provided in the earlier thread.

To avoid fragmentation, please continue the conversation there so any follow-up answers stay in one place. If you have new information to add, such as your page.tsx code, your WordPress theme's functions.php, or your Additional CSS, paste it into the original thread and that will make it much easier to give you a precise fix.

[wanhei1]

This appears to be a duplicate of #94065. I've posted a detailed answer there with three solutions:

1. Custom WordPress template without get_header() for iframe embedding
2. CSS injection to hide the duplicate header inside the iframe
3. Dedicated BBPress embed route (cleanest approach)

Plus a fix for the login redirect issue using WordPress's login_redirect filter.

See the full answer: #94065 (comment)