Support » Themes and Templates » Twentyseventeen – How to get sidebar on pages?

  • Resolved hansbeen

    (@hansbeen)


    The sidebar only shows up on posts, and not on pages. No idea what they were thinking when they done that. How can I get it on pages?

    • This topic was modified 3 years, 1 month ago by hansbeen.
Viewing 15 replies - 1 through 15 (of 29 total)
  • Hey hansbeen,

    By default 2017 theme doesnt provide sidebar on pages, so you can create child theme and then copy page.php of main 2017 theme and put that in child theme, after that you need to create a file in functions.php with the below code

    
    function twentyseventeen_body_classes_child( $classes ){
    if ( is_active_sidebar( 'sidebar-1' ) &&  is_page() ) {
    		$classes[] = 'has-sidebar';
    	}
    	return $classes;
    }
    add_filter( 'body_class', 'twentyseventeen_body_classes_child' );
    

    and in page.php, if you open this in editor, at the bottom of the code, you just need to replace your code with this

    
    </main><!-- #main -->
    	</div><!-- #primary -->
    	<?php get_sidebar(); ?>
    </div><!-- .wrap -->
    
    <?php get_footer();
    

    so practically we just get_sidebar() function in page.php and added filter in function to add sidebar class.

    That works fine, thank you very much for the quick reply.
    Only not on the homepage strangely enough.
    Look for yourself
    http://kirtan.nu/
    Any solution for that?

    Now was I used to getting the sidebar in the menu on mobile display in twentyfifteen. Guess that’s not gonna happen in twentyseventeen?

    • This reply was modified 3 years, 1 month ago by hansbeen.

    Sorry for the last remark about mobile display, somehow it is working fine now.
    Stays the question of the sidebar on the homepage. Why can I get the sidebar to show up everywhere except there?

    • This reply was modified 3 years, 1 month ago by hansbeen.

    You are not getting sidebar on home page because the way twentyseventeen is coded, it doesnt provide sidebar on home page, but you can achieve with some modifications in front-page.php, you need to copy this template in child theme and have to add get_sidebar() function. Replace front-page.php code with below

    
    <?php
    /**
     * The front page template file
     *
     * If the user has selected a static page for their homepage, this is what will
     * appear.
     * Learn more: https://codex.wordpress.org/Template_Hierarchy
     *
     * @package WordPress
     * @subpackage Twenty_Seventeen
     * @since 1.0
     * @version 1.0
     */
    
    get_header(); ?>
    <div class="wrap">
    <div id="primary" class="content-area">
    	<main id="main" class="site-main" role="main">
    
    		<?php // Show the selected frontpage content.
    		if ( have_posts() ) :
    			while ( have_posts() ) : the_post();
    				get_template_part( 'template-parts/page/content', 'front-page' );
    			endwhile;
    		else : // I'm not sure it's possible to have no posts when this page is shown, but WTH.
    			get_template_part( 'template-parts/post/content', 'none' );
    		endif; ?>
    
    		<?php
    		// Get each of our panels and show the post data.
    		if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.
    
    			/**
    			 * Filter number of front page sections in Twenty Seventeen.
    			 *
    			 * @since Twenty Seventeen 1.0
    			 *
    			 * @param $num_sections integer
    			 */
    			$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
    			global $twentyseventeencounter;
    
    			// Create a setting and control for each of the sections available in the theme.
    			for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
    				$twentyseventeencounter = $i;
    				twentyseventeen_front_page_section( null, $i );
    			}
    
    	endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here. ?>
    
    	</main><!-- #main -->
    </div><!-- #primary -->
    <?php
    get_sidebar();
    ?>
    </div>
    <?php get_footer();
    
    

    and add this below css in child theme stylesheet

    
    .twentyseventeen-front-page .site-content{
    	  padding-top: 5.5em;
    }
    
    .twentyseventeen-front-page .panel-content .wrap{
    	padding-top:0;
    }
    

    hope it will fix your problem

    Great! that works.
    But why is WP twentyseventeen coded that the sidebar doesn’t come on the frontpage?
    And it seems that the text area is smaller on the front-page. Any way to fix that? Or should I start a new topic?
    Already many thanx for your help until now πŸ™‚

    But why is WP twentyseventeen coded that the sidebar doesn’t come on the frontpage?

    Don’t know really

    And it seems that the text area is smaller on the front-page. Any way to fix that? Or should I start a new topic?

    I’m not very good at CSS, but still you can manage that by adding below css

    
    .twentyseventeen-front-page .panel-content .wrap{
       padding-left: 1em;
        padding-right: 1em;
    }
    

    Jai Hanuman πŸ™‚

    jai Hanuman πŸ™‚
    Thanx again, that works on the desktop version, still a little bit smaller than the other pages though.
    On my Iphone it doesn’t do it unfortunately, still way to much whitespace on both sides on the homepage.

    I keep wondering what the idea is behind giving the static homepage a totally different layout.

    • This reply was modified 3 years, 1 month ago by hansbeen.

    Thank you @swayamtejwani you made my day! Been looking for that for the last three days!

    I would like to make the sidebar move a little to the right and expand the main area so I can have more space for the articles and stuff (and apply that to all the pages and posts). Would you be able to help me?

    Thank you so much in advance!

    Hi aglobefortwo,

    I am posting the css code for you, check below, you can manage the percentage of widths accordingly. #primary is for main content and #secondary for right sidebar.

    
    .has-sidebar:not(.error404) #primary{
        float: left;
        width: 67%;
    }
    
    .has-sidebar #secondary{
    	 width: 30%;
    }
    
    .panel-content .wrap{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    

    Thanks!

    Thank you @swayamtejwani ! Your answers have been the clearest, most straight-forward ones so far!

    For some weird reason my pages have stopped working now… I get a 500 error when I open the pages (blog posts are ok though).

    Also, how could I make the images fit the new width of the content areas?

    I also added

    .wrap { max-width: 1366px; }

    as suggested by other people.

    Thank you so much!

    Oh ok so it was silly actually, there was a mistake in the page.php file, my bad!
    I’d love the images to fit the new width of the content area though!

    Thank you!

    Hey,
    i have to thank you @swayamtejwani, too! I’m very happy that I found your posts in this board.

    I already installed a childtheme of twentyseventeen like the description in this thread and everything works fine, with the exception that there is a problem with my sidebar. I can’t put a custom menu in it? It always shows the message: “An error has occurred. Please reload the page and try again.“, when I drag the custom-menu widget and drop it into the sidebar (via Appearance β–Έ Customizing β–Έ Widgets β–Έ Sidebar).

    Does anyone know how to fix the problem?

    Thanks! πŸ™‚

    …Does nobody have an idea? πŸ™

    Hi mgropp,

    Can you check deactivating all plugins and see if its fixed the problem ?
    Also, can you use the widget settings page instead of the customizer does it work?

    Thanks,
    Swayam

    Thanks for your answer.
    All Plugins are inactive now, but the problem still exists…

    What do you mean with “widget settings page”? I can not see any widget named settings page?


    Another style-based problem I have is, that on my page “home” there is the padding-top much higher than on any other page? Do I have to fix it separately?

    • This reply was modified 3 years, 1 month ago by mgropp.
Viewing 15 replies - 1 through 15 (of 29 total)
  • The topic ‘Twentyseventeen – How to get sidebar on pages?’ is closed to new replies.