Remove header and footer on a specific page

  • Resolved lauratraveler

    (@lauratraveler)


    8 years, 11 months ago

    Hey, I’m trying to remove the header and the footer on one of the pages – https://www.travelersuniverse.com/coloring-book

    So I added <?php if( !is_page('page id') ) :?> in the header.php and footer.php

    So far so good, but I’m not sure if I placed it correctly or I’m missing some important source code from the page – I still want this page to show in Google, etc, like any other page. I just don’t want it to display the header and the footer

    I’m using Page Builder but although the row is set to full width, it’s not full width.

    If I remove the <?php if( !is_page('page id') ) :?> from the footer.php, the row goes full width. But it still displays a white space before and after the row and I don’t want this. I want the row to go all the way to the top of the page.

    So I guess something is not quite right.

    Thanks!

Viewing 15 replies - 1 through 15 (of 20 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    make sure you do not block out the part of header.php and footer.php that call wp_head() and wp_footer() or things will surely break.

    you might be better off just hiding the visible header and footer elements using CSS, based on your page ID.

    Better way to :
    1) create custom template
    2) Remove get_header() and get_footer().
    3) Assign template of this page.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Ravi:

    the template will still need to call wp_head() and wp_footer()

    so
    1) u have created copy header.php & footer.php
    2) Add own name header-1 or footer-xyz and apply changes
    3) then call on page get_header(‘1’) and get_footer(‘xyz’).

    css
    .page-id-* .headerwrap{display:none;}

    Do this in CSS.
    Find the ID of your page
    You can find the id when you check the source code of the page. Or in your dashboard – pages

    CSS

    .page-id-2114 footer {
    display: none;
}

    Where 2114 represents the id of the page you want the footer to be removed.
    2114 is the id of your ‘about’ page

    Thread Starter lauratraveler

    (@lauratraveler)

    Djenci, that works like a charm for the footer. Thanks!

    Thread Starter lauratraveler

    (@lauratraveler)

    webdesignerchristian, unfortunately, that doesn’t work. The logo and menu still show at the top.

    Thread Starter lauratraveler

    (@lauratraveler)

    .page-id-3241 header {
    display: none;
    }

    this seems to work. Is there a reason I shouldn’t use this?

    You’re welcome laura

    For header you follow the same CSS

    `.page-id-2114 header {
    display: none;
    }

    Again about page will not display header

    Good luck with your website!

    Thread Starter lauratraveler

    (@lauratraveler)

    Thanks, Djenci! Much appreciated! ??

    The header and footer will only not display on that particular page.

    I don’t see any reason not to use it.

    Unless you need certain aspects from the header or footer still being displayed

    Thread Starter lauratraveler

    (@lauratraveler)

    I’m still struggling to get the first row of the Page Builder by Siteorigin plugin all the way to the top. I’ve just changed the order of the rows so you can see exactly what I mean. There’s a white bar at the very top of the page.
    (I’m talking about this page travelersuniverse.com/travel-themed-adult-coloring-books)

    body.page-id-3241 #content .main .pageclass {
    padding: 0px 15px 20px;
}

    That will remove the white space on the page you suggested :-))

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Remove header and footer on a specific page’ is closed to new replies.