Removing website header and footer from inframe embedded in an app

Question

I have built the following Wordpress website: https://bofin.com/terms-conditions/

My client wants to embed this terms and conditions page in an app so that we only ever have one copy to update. BUT we need to be able to remove the website header and footer when it is displayed in the app.

Any thoughts?

I have found this script but I am not sure what steps I need to take to implement it and what I need to add to include excluding the footer.

    <script>
    $(document).ready(function(){
        var url = window.location.href;
        if(url.search('inapp=true') === true){
            $('header').css('display', 'none');
        }
    });
</script>

This is and html question, but you could "hide" some items depengin on the screen resolution [link](https://stackoverflow.com/questions/16550485/hide-div-tag-on-mobile-view-only) — javdromero, Mar 10 '21 at 21:43
You could use a url parameter to conditionally hide the header and footer. — WPhil, Mar 10 '21 at 22:02
Thanks so much @javdromero! Unfortunately, I still need the elements to appear in the mobile version of the website, just not in the app. — Shelley Finch, Mar 10 '21 at 22:03
Then @Phil answer is a valid option, pass a parameter on the url that you are using — javdromero, Mar 10 '21 at 22:40

score 0 · Answer 1 · answered Mar 10 '21 at 22:18

0

I found some custom CSS that you may be able to apply to your page:

header#masthead {
display: none;
}
footer#colophon {
display: none;
}

See here for the WordPress support page that talks about it.

I'm not sure what plan you need to be on to implement this but it may be worth trying

answered Mar 10 '21 at 22:18

Alex Duthie

34
1
9

Thank you! Will give this a try :) – Shelley Finch Mar 10 '21 at 22:37
Let me know how it goes! :) – Alex Duthie Mar 11 '21 at 00:33

WPhil · Answer 2 · 2021-03-10T23:08:35.743

For example in singular.php, add a conditional parameter which hides the header and footer when "minimal" is affixed to the url. e.g example.com?minimal and the page url is in the allowed list

<?php

    $allowed_minimal = array(
        "/terms-conditions/"
    );
    $url = $_SERVER['REQUEST_URI'];
    $hide_header_footer = isset( $_GET['minimal'] ) && in_array( $url, $allowed_minimal ) ? true : false ;

    if ( $hide_header_footer ) {
        get_header();
    }
?>

<main id="site-content" role="main">

    <?php

    if ( have_posts() ) {
        while ( have_posts() ) {
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        }
    }
    ?>

</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php
    if ( $hide_header_footer ) {
        get_footer();
    }
?>

Removing website header and footer from inframe embedded in an app

2 Answers2