How can I remove header and footer from certain pages?

by ncloud
16 replies
  • WEB DESIGN
  • |
I have a Wordpress theme that doesn't let me remove the header and footer from certain pages. My last theme had the option when making a page to remove those. There are instances when you don't want those on certain pages like on a download page.


So is there some way I can add some code to my theme so that it will give me that option? Anybody know what that code would be and where exactly I would past it into my theme files?
#footer #header #pages #remove
  • The first thing I would do is check if your theme has a landing page template. Landing pages are designed not to show the header or footer. When you're creating your download page in your WordPress dashboard, save it as a landing page under "Page Template" on the left side.

    If your theme does not have a landing page template, you could create one which would require knowledge of PHP code.

    Alternatively, you could add some CSS code to your style.css sheet but you would have to add this code for each page you want to edit. Example:

    .page-id-392 .site-header {
    display: none;
    }

    .page-id-392 .site-footer {
    display:none;
    }

    If I were you, I would definitely check to see if your theme has a landing page template because this would be the way to go if you are not familiar with CSS or PHP code.
    {{ DiscussionBoard.errors[10649450].message }}
  • Profile picture of the author ncloud
    Unfortunately my theme doesn't have a landing page template option in "page template".

    So if I add that code to a page that I don't want to have a header and footer on, I also need to add some other code along with it into style.css? Is that right? Anybody know what that code would be?
    {{ DiscussionBoard.errors[10650493].message }}
  • Profile picture of the author MattStrange
    There's a couple of ways you can change the header or/and the footer for certain pages in WordPress. If you take a look at my site on the checkout page you will see what i mean.

    The first method is to use WordPress conditionals. I won't go into detail with this as there's plenty of information on the codex site.

    https://codex.wordpress.org/Conditional_Tags

    Another way is, you could duplicate the current header.php and footer.php in your theme folder and make them show for specific pages.

    get_header() function:

    Includes the header.php template file from your current theme's directory. If a name is specified then a specialised header header-{name}.php will be included.
    https://codex.wordpress.org/Function...nce/get_header

    so the file name for my custom header template for the checkout was header-checkout.php.

    I believe the same principal applies to the footer.

    I wouldn't go down the route of simply hiding the problem with css, the code is still there in HTML, your best bet would be to alter or get rid of unnecessary code.

    Matt
    {{ DiscussionBoard.errors[10650858].message }}
  • Profile picture of the author Peter Stavrou
    I think the first step would be to provide us with the URL of your website so we can actually see how it's coded.
    Signature

    Online Business Made Simple!
    http://www.PeterStavrou.com

    {{ DiscussionBoard.errors[10651014].message }}
  • Profile picture of the author ncloud
    I have my site set to private so it doesn't show my content publicly, so my URL would just take you to the login page. But, I am using the a free wordpress theme called "babylog". It doesn't have any more updates or support but I went with it anyway because I like the look of it after changing the color and removing the baby related pics. And there's only 4 people going to be using the site anyway.

    This site here will show you other sites using the same theme if that helps you see the code. Just search "theme: babylog".
    {{ DiscussionBoard.errors[10651315].message }}
  • Profile picture of the author ncloud
    But I don't want the header and footer removed from every page, just one. And apparently in Wordpress it doesn't have header and footer code on each page's html. The admin area where you create a page in Wordpress has the visual tab and the text tab, but neither show the code for the header and footer.

    And if you go into the wp-posts database where it stores your pages, and click on the page you want to remove the header and footer from, it also doesn't show the html code there either. I'm guessing it doesn't have the header and footer code in the page's html anyway, just in the header.php and footer.php files right?
    {{ DiscussionBoard.errors[10651608].message }}
  • Profile picture of the author ncloud
    I tried to do it with the code that Chantal shared above, but it didn't work. I went into styles.css and found where to put the header code and where to put the footer code. I know I'm putting them in the right areas.

    In the Admin area when I go to edit the page that I want to remove header and footer from, this is in the URL: post.php?post=205&action=edit. So I'm guess my page (and it is a page, don't know why it says post) is 205? So I inserted this code into the right places within the styles.php file with:

    .page-id-205 .site-header {
    display: none;
    }

    .page-id-205 .site-footer {
    display:none;
    }

    But, it didn't work. So I tried changing the .page to .post, but that didn't work either. So I tried changing the -id- to = since it shows that way in the URL (post=205). But, that didn't work either.

    What would be keeping this code from working?
    {{ DiscussionBoard.errors[10651633].message }}
    • Originally Posted by ncloud View Post

      I tried to do it with the code that Chantal shared above, but it didn't work. I went into styles.css and found where to put the header code and where to put the footer code. I know I'm putting them in the right areas.

      In the Admin area when I go to edit the page that I want to remove header and footer from, this is in the URL: post.php?post=205&action=edit. So I'm guess my page (and it is a page, don't know why it says post) is 205? So I inserted this code into the right places within the styles.php file with:

      .page-id-205 .site-header {
      display: none;
      }

      .page-id-205 .site-footer {
      display:none;
      }

      But, it didn't work. So I tried changing the .page to .post, but that didn't work either. So I tried changing the -id- to = since it shows that way in the URL (post=205). But, that didn't work either.

      What would be keeping this code from working?
      That was just an example...your site header/footer may be called something different but obviously without seeing the site, I can't tell you what it is.
      {{ DiscussionBoard.errors[10652332].message }}
  • Just saw that you had posted a link to the actual theme...I looked at the demo and this is what worked:

    .page-id-205 #masthead{
    display:none !important;
    }

    .page-id-2015 #colophon{
    display:none !important;
    }

    Put this in your theme's style.css sheet and of course use the proper page id.
    {{ DiscussionBoard.errors[10652343].message }}
  • Profile picture of the author ncloud
    Thank you. That masthead code did remove my top navigation buttons and the site title. But it didn't remove my header image. I inspected the header image with firebug and it was outside of the masthead. I used similar code to remove the header image. Then I did the same with the wpadminbar. But, I had to do them all separately - it wouldn't let me combine the code:

    .page-id-205 #masthead{
    display:none !important;
    }
    .page-id-205 .header-image img{
    display: none !important;
    }
    .page-id-205 #wpadminbar{
    display:none !important;
    }

    I'm not sure that the colophon code did anything. As far as I can tell my footer area looked the same after inserting that code. It didn't remove my footer image so I found the name for that element and used same code to remove it.

    I was hoping to remove everything on that particular page except for the page text because I'm using a plugin (wp video lightbox) that when you click on some text in my sidebar widget that says "Lesson 27" for example, it opens a pop up window (lightbox) displaying all the text for that particular lesson. That's what I'm using the plugin for anyway. It's actually for opening videos in a lightbox.

    Uunfortunately I can't figure out how to remove everything on that particular page so that you only see the pages text window area. I've removed most everything, but there are still empty areas all around it filled with the background image I have selected. I thought I might be able to remove the background image and set the background color to none, but I can't figure out how to do that. Really I need to just get rid of the background completely and leave only the block area that contains the text window, but I'm guessing you can't do that? Wordpress probably has certain templates it has to go by, I'm guessing.
    {{ DiscussionBoard.errors[10653123].message }}
    • Originally Posted by ncloud View Post

      Thank you. That masthead code did remove my top navigation buttons and the site title. But it didn't remove my header image. I inspected the header image with firebug and it was outside of the masthead. I used similar code to remove the header image. Then I did the same with the wpadminbar. But, I had to do them all separately - it wouldn't let me combine the code:

      .page-id-205 #masthead{
      display:none !important;
      }
      .page-id-205 .header-image img{
      display: none !important;
      }
      .page-id-205 #wpadminbar{
      display:none !important;
      }

      I'm not sure that the colophon code did anything. As far as I can tell my footer area looked the same after inserting that code. It didn't remove my footer image so I found the name for that element and used same code to remove it.

      I was hoping to remove everything on that particular page except for the page text because I'm using a plugin (wp video lightbox) that when you click on some text in my sidebar widget that says "Lesson 27" for example, it opens a pop up window (lightbox) displaying all the text for that particular lesson. That's what I'm using the plugin for anyway. It's actually for opening videos in a lightbox.

      Uunfortunately I can't figure out how to remove everything on that particular page so that you only see the pages text window area. I've removed most everything, but there are still empty areas all around it filled with the background image I have selected. I thought I might be able to remove the background image and set the background color to none, but I can't figure out how to do that. Really I need to just get rid of the background completely and leave only the block area that contains the text window, but I'm guessing you can't do that? Wordpress probably has certain templates it has to go by, I'm guessing.
      Like I said in my first post, the best way to tackle these issues is with a landing page template - if your theme has one. That way, you don't have to keep messing with the CSS code for each individual page. You may want to look at the WordPress Codex to find out how to create your own template.
      {{ DiscussionBoard.errors[10653918].message }}
  • Profile picture of the author ncloud
    Yeah, my theme only has two templates to choose from in the template drop down. One is called Default template and the other is called "page nosidebar". So I went into my theme folder in wp-content, and selected my theme. I found the "page-nosidebar.php" file, but for some reason there isn't one in there called "default template". There is also a 404.php file.

    So I created a new php file and pasted the contents from one of those files into it, thinking that I could just remove the code that I don't need which calls the header, footer, etc. But, every time I do it, when I reload that page on my site with that template selected, I get this message:

    Parse error: syntax error, unexpected '<' in 600x600Window.php on line 17

    I made no changes to the code in line 17, or any of the other lines. I merely deleted the ones I don't think I need.

    Heres the code for page-nosidebar.php:


    <?php
    /**
    * Template Name: Full Width, No Sidebar
    *
    *
    * @package Babylog
    * @since Babylog 1.0
    */

    // Change content_width $content_width = '876';

    get_header(); ?>

    <div id="primary" class="content-area">
    <div id="content" class="site-content" role="main">
    <?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', 'page' ); ?>
    <?php comments_template( '', true ); ?>
    <?php endwhile; // end of the loop. ?>
    </div><!-- #content .site-content -->
    </div><!-- #primary .content-area -->
    <?php get_footer(); ?>

    .................................................. ..
    And here's what I changed it to:


    <?php
    /**
    * Template Name: 600x600Window
    *
    *
    * @package Babylog
    * @since Babylog 1.0
    */

    // Change content_width
    $content_width = '600';
    // Change content height
    $content_height = '600';

    <?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part( 'content', 'page' ); ?>
    <?php endwhile; // end of the loop. ?>

    .................................................. ...........................
    I'm not sure what parts of the code to keep and what to delete to get the template I want. Any idea? Obviously I did it wrong.
    {{ DiscussionBoard.errors[10654587].message }}
  • Profile picture of the author ncloud
    Update: I found this website that gave me some code for a random page template and this code seems to work:

    <?php /*
    Template Name: Random Page Template
    */
    ?>

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php the_title(); ?>
    <?php the_content(); ?>
    <?php endwhile; endif; ?>

    .................................................. ...
    Just not sure why this part didn't work:

    // Change content_width
    $content_width = '600';
    // Change content height
    $content_height = '600';
    {{ DiscussionBoard.errors[10654799].message }}
  • Profile picture of the author codespider
    if you header and footer section another part please try this code.
    <?php get_header()?>
    <?php get_footer()?>

    and you create new text file that name header.php and footer.php
    If you can't it. please nock my profile
    {{ DiscussionBoard.errors[10654909].message }}
  • Profile picture of the author abbe77
    Can you paste ur header.php code?
    {{ DiscussionBoard.errors[10656634].message }}
  • Profile picture of the author ncloud
    Can you paste ur header.php code?
    What for? I already got rid of the header, and footer, and background with the code mentioned above which is what I intended to do. The problem i was having was that the code below didn't work to resize the page to 600 x 600 for some reason:

    // Change content_width
    $content_width = '600';
    // Change content height
    $content_height = '600';

    But I found some code to replace it with that does work:

    <style type="text/css">
    body {
    max-width: 600px;
    max-height: 600px;
    }
    </style>

    So now it's working, I'm just wondering how I can get this 600x600 template page which is going to be for a pop up window to have the same blue title bar with white text at the top of it like my other posts do.

    When I use Inspect Element to see what that blue title bar is called on my post pages, it calls it entry heater. I found code for it that looks like this:

    <header class="entry-header">
    <h1 class="entry-title">
    <header><!-- .entry-header -->

    But when I paste that into this php page template, it doesn't add the blue title bar with white text. And it turns all of my text bold, so i think it's making all my post text h1 for some reason. Anyone know what I'm doing wrong? Is that the wrong kind of code to use in a php template file, or am I missing something?
    {{ DiscussionBoard.errors[10660518].message }}

Trending Topics