WordPress.org

Forums

[resolved] Remove sidebar on static page only (13 posts)

  1. RagDolls
    Member
    Posted 3 years ago #

    I'm using the Grisaille theme. My front page is a static welcome page. I want to remove the sidebar on this page only. So far I have
    *Created a child theme
    *Created a front-page.php file
    *Copied the template for page.php and pasted in the front-page.php
    ......now I'm stuck, I was told to remove mention of the sidebar in this file....there is no mention of the sidebar in the page.php

    Can anyone give me some insight? thanks, Diane

  2. linux4me2
    Member
    Posted 3 years ago #

    I think for your theme if you want to remove the sidebar you actually need to add a sidebar.php file to your child theme folder and add some conditional code to prevent it from displaying on the front page.

    For example, you could try this as your child theme's sidebar.php:

    <div class="wrap">
    
    <?php if (!is_front_page()) : ?>
    
    	<?php if ( is_active_sidebar( 'grisaillesidebar' ) ) : ?>
    
    		<?php dynamic_sidebar( 'grisaillesidebar' ); ?>
    
    	<?php else : ?>
    
     <div class="sidebaritem">
         <h3><?php _e('Bookmarks', 'grisaille'); ?></h3>
            <ul>
              <?php
              /**
              * only shown if widget sidebar not enabled
              */
              wp_list_bookmarks('title_li=& categorize=0&title_before=&title_after='); ?>
             </ul>
            </div>
        <div class="sidebaritem">
         <h3><?php _e('Categories', 'grisaille'); ?></h3>
         	<ul>
    		<?php wp_list_categories('title_li='); ?>
            </ul>
     </div>
    
    <div id="search" class="sidebaritem">
         <label for="s"><?php _e('Search:', 'grisaille'); ?></label>
          <form id="searchform" method="get" action="<?php echo home_url(); ?>">
    	    <div>
    		    <input type="text" name="s" id="s" size="15" />
    		    <input id="searchBtn" type="submit" value="<?php _e('Search', 'grisaille'); ?>" />
    	    </div>
    	    </form>
        </div>
    
    <div id="archives" class="sidebaritem">
    		<h3><?php _e('Archives:', 'grisaille'); ?></h3>
    	    <ul><?php wp_get_archives('type=monthly'); ?></ul>
        </div>
    
       <div id="meta"  class="sidebaritem">
       <h3><?php _e('Meta:', 'grisaille'); ?></h3>
    	  <ul>
    		  <?php wp_register(); ?>
    		  <li><?php wp_loginout(); ?></li>
    		  <li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS', 'grisaille'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
    		  <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS', 'grisaille'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>', 'grisaille'); ?></a></li>
    
    		  <?php wp_meta(); ?>
    	  </ul>
       </div>
    <?php endif; ?>
    
    <?php endif; ?>
    
    </div>

    What I did was just add a new conditional at the beginning of the file to detect the front page, then close the conditional at the bottom of the page. I left it within the "wrap" div in case it would mess up your display to eliminate that div. I'm not running Grisaille, so you'll have to test it. :)

  3. RagDolls
    Member
    Posted 3 years ago #

    linux4me2,
    Thanks so much for your solution, it worked great. When the sidebar disappeared from front page a horizontal bar is still up there where the top of the sidebar was. When I go into Firebug this element shows as
    <body class="home page page-id-6 page-template-default custom-background">
    <div id="secondary content"

    How can I get rid of the bar on the front page only?

    Here's my site http://RagDollsRising.com

    thanks, Diane

  4. linux4me2
    Member
    Posted 3 years ago #

    Well, there are a couple of ways to get rid of it. It's actually called in your footer.php file, so the easiest would be a simple matter of another call to is_front_page() like we did for the sidebar in a footer.php you add to your child theme folder:

    <?php
    if (!is_front_page()) {
      ?>
      <div id="secondaryContent">
        <?php get_sidebar(); ?>
      </div>
      <?php
    }
    ?>

    However, if you remove the sidebar, are you going to want to resize your primary content area so you don't have a huge blank space in the right column?

    By the way, if you're using this code to eliminate the secondary content area, you won't need to keep the code in sidebar.php, which just eliminates the sidebar. You can remove the sidebar.php file from your child theme unless you made other changes to it.

  5. RagDolls
    Member
    Posted 3 years ago #

    llinux4me2,
    That worked like a charm. I do have some blank space on the welcome page, I think that's fine, is there a way to center the main content on that page only. Sorry for all the questions, a last one- can you suggest a online course or a book that teaches more about how all of this works? About ten years ago I would make my own website with only html, there wasn't php or style sheets or page templates. I went to WordPress documentation but it's far too hard to understand....any suggestions?
    thanks for your help, Diane

  6. linux4me2
    Member
    Posted 3 years ago #

    I'm trying not to ask the obvious question, which is why you don't want a sidebar on your home page. :) Mine is not to reason why.

    I think the simplest, and most attractive, thing to do would be to bring that primary content to full width so there isn't any blank space there. You have enough content on your home page for it.

    I'm going from memory here because I don't have a copy of your theme here in front of me, but I think your primary content div was set in header.php. What I would do is change it to this:
    <div id="primaryContent"<?php if (is_front_page()) { echo ' class="primary-content-full-width"'; ?>>
    Then at the very end of your style.css put this:

    .primary-content-full-width {
      width: 100% !important;
    }

    All that really changes is the width of the primary content area, keeping everything the same, but it will allow you to make further changes to it should you want to in the future.

    I remember when I started (more years ago than you!), one of the biggest problems is knowing what things are called. You might be able to use something like W3Schools as a starting point for CSS, javascript, and PHP.

  7. RagDolls
    Member
    Posted 3 years ago #

    LLinux4me2,
    After I got rid of that bar on the front page using the footer.php, I should have checked the other pages because it was gone plus all the sidebar content on every page? So I added the sidebar. php back and got rid of the footer.php. Still have the floating bar.

    I'd like my welcome page to not have the sidebar clutter, look more like a website welcome page than a blog, trying to look like a website (even though that's what it is).

    Thanks for the W3Schools link, looks like it could be very helpful.

    -Diane

  8. linux4me2
    Member
    Posted 3 years ago #

    The code I gave you for the footer looks right. It should have only gotten rid of the sidebar on the front page. You might double-check how you put it in footer.php. The wrong placement in the file could make that happen.

    Looking like a blog is actually a good thing for SEO. The search engines love blogs because of the dynamic content on the index page of the site.

  9. RagDolls
    Member
    Posted 3 years ago #

    linux4me2,
    What I did was
    *make a new file, named it footer.php
    *copied the code you gave me, pasted into this file
    *loaded into my child them folder

    Should I have copied the existing info in the Grisaille footer.php, make a new file and pasted your code into this page? If so where would I paste it? Here's the Grisaille footer.php-

    </div>
    
        <div id="secondaryContent">
            <?php get_sidebar(); ?>
          </div>
    
          <div id="footer">
           <p>Copyright © <?php echo date('Y');?> | <?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/" title="WordPress.org">WordPress.org</a> - <a href="http://wordpress.org/" title="WordPress.org"><img src="<?php echo get_template_directory_uri(); ?>/images/wp-logo.png" alt="wordpress-logo" height="20px" width="20px" /></a>   </p>
    
          </div>
    
        </div> <!-- end #canvas -->
            <?php wp_footer(); ?>
      </body>
    </html>

    thanks, Diane

  10. linux4me2
    Member
    Posted 3 years ago #

    That could be the problem. I just gave you the section of code to replace the secondary content section with, so you would have needed to copy the original footer.php over and replace the secondary content section with the new code. Your entire new footer.php would look like this:

    </div>
    
       <?php
    		if (!is_front_page()) {
    		  ?>
    		  <div id="secondaryContent">
    		    <?php get_sidebar(); ?>
    		  </div>
    		  <?php
    		}
    		?>
    
          <div id="footer">
           <p>Copyright &copy; <?php echo date('Y');?> | <?php bloginfo('name'); ?> is proudly powered by <a href="http://wordpress.org/" title="WordPress.org">WordPress.org</a> - <a href="http://wordpress.org/" title="WordPress.org" class="wp-logo" ><img src="<?php echo get_template_directory_uri(); ?>/images/wp-logo.png" alt="wordpress-logo" height="20px" width="20px" /></a>   </p>
    
          </div>
    
        </div> <!-- end #canvas -->
            <?php wp_footer(); ?>
      </body>
    </html>

    By the way, when you post code, make sure to use the "code" and "/code" buttons on the toolbar or contain it within back ticks or it will not display correctly on this site.

  11. RagDolls
    Member
    Posted 3 years ago #

    linux4me2,
    Thanks that did work, I was not putting the whole footer page in before. Wonder if I'm putting things in the wrong place again- tried to run the text full width as you suggested.
    Made my header.php file,
    copied all the code from the Grisaille Header.php.
    Replaced the last line that referenced primary content, with the text you gave.
    Added the info at the end of my style.css

    The result was my page was totally blank when I loaded it. Might have been something in the header.php because when I took the style.css back to the way it was the page was still a blank. Got rid of header.php. And the site is back up? Grisaille header.php looks like this;

    <!DOCTYPE html> 
    
    <!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class=" ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html <?php language_attributes(); ?> class="ie7"> <![endif]-->
    <!--[if (gt IE 7)|!(IE)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
    <head>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
    <title><?php wp_title('|', true, 'right'); ?> <?php bloginfo('name'); ?> <?php if ( !wp_title('', true, 'left') ); { ?> | <?php bloginfo('description'); ?> <?php } ?></title>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?> >
    
     <div id="canvas">
     <?php $options = get_option( 'grisaille_theme_options' ); ?>
    
     <div class="social-media">
    		<?php if ( $options['twitterurl'] != '' ) : ?>
    			<a>" class="twitter"><?php _e( 'Twitter', 'grisaille' ); ?></a>
    		<?php endif; ?>
    
    		<?php if ( $options['facebookurl'] != '' ) : ?>
    			<a>" class="facebook"><?php _e( 'Facebook', 'grisaille' ); ?></a>
    		<?php endif; ?>
    
    		<?php if ( $options['googleplusurl'] != '' ) : ?>
    			<a>" class="googleplus"><?php _e( 'Google +', 'grisaille' ); ?></a>
    		<?php endif; ?>
    
    		<?php if ( ! $options['hiderss'] ) : ?>
    			<a>" class="rss"><?php _e( 'RSS Feed', 'grisaille' ); ?></a>
    		<?php endif; ?>
    	</div><!-- #social-icons-->
    
        <ul class="skip">
    
    <li><a href=".menu"><?php _e( 'Skip to navigation', 'grisaille' ); ?></a></li>
    <li><a href="#primaryContent"><?php _e( 'Skip to main content', 'grisaille' ); ?></a></li>
    <li><a href="#secondaryContent"><?php _e( 'Skip to secondary content', 'grisaille' ); ?></a></li>
    <li><a href="#footer"><?php _e( 'Skip to footer', 'grisaille' ); ?></a></li>
        <div id="header-wrap">
       		<div id="header">
       			<?php $header_image = get_header_image();
    			if ( ! empty( $header_image ) ) : ?>
    			<div id="site-title" class="grisaille-header-image">
    			<?php else: ?>
           		<div id="site-title">
           		<?php endif; ?>
    				<h1><a>"><?php bloginfo('name'); ?></a></h1>
    				<div id="site-description"><?php bloginfo( 'description' ); ?></div>
               </div>
    
      	 </div> <!-- end #header-->
      <!--by default your pages will be displayed unless you specify your own menu content under Menu through the admin panel-->
    	<div id="top-menu">	<?php wp_nav_menu( array('theme_location' => 'main',  'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?></div>  
    
     </div> <!-- end #header-wrap-->
    
       <div id="primaryContent">

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still - use a pastebin. As it stands, your posted code may now have been permanently damaged/corrupted by the forum's parser.]

    thanks, Diane

  12. linux4me2
    Member
    Posted 3 years ago #

    The blank page was because I left out a "}" in the PHP I gave you. Try this:

    1. Once more place a copy of the header.php file from your parent theme in your child theme folder.
    2. Change this line:
      <div id="primaryContent">
    3. To this:
      <div id="primaryContent"<?php if (is_front_page()) { echo ' class="primary-content-full-width"'; } ?>>
    4. And make sure you still have the following in your child theme's style.css:
      .primary-content-full-width {
        width: 100% !important;
      }
  13. RagDolls
    Member
    Posted 3 years ago #

    Thank you, that worked. I have been spending some time at the W3schools online and am learning quit a bit! -Diane

Topic Closed

This topic has been closed to new replies.

About this Topic