CSS: Two Column to Three Column? Added new sidebar to a theme

Ok so I am using the theme Parament by Automattic. It is a two column theme and I am trying to make it a three column theme.

I registered a new sidebar in functions.php and made another sidebar.php. Now both sidebars are showing on my site but Im not sure how to get the theme to work with them. What CSS do I need to change / add to make it a three column theme?

http://test.m0nad.net/

Also, in the dashboard when I view Appearance > Widgets, the Right Sidebar always shows up minimized at first, how do I change that?

Thanks for any help!

  • Vaughan

    Hi,

    you would need to use float: left for the first 2 columns. and float: right for the 3rd column.

    However, it would be easier if you moved the left side bar code before the main content div.
    ;
    It's not easy changing a 2 column theme to 3 column because all the templates, and all the CSS is geared towards 2 columns, so not only do you need to edit the layout, but you will need to edit lots of the CSS changing widths, padding, margins, positions & so on. It's much easier to start with a 3 column theme if you are wanting a 3 column theme.

    I would need to see your whole template for this or the theme as a whole.

    But something similar to;

    functions.php

    /**
     * Register Sidebars.
     */
    function parament_register_sidebars() {
    	register_sidebar( array(
    		'name'          => __( 'Left Sidebar', 'parament' ),
    		'id'            => 'sidebar-1',
    		'before_widget' => '<li id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</li>',
    		'before_title'  => '<h2 class="widget-title">',
    		'after_title'   => '</h2>',
    	) );
    	register_sidebar( array(
    		'name'          => __( 'Primary Sidebar', 'parament' ),
    		'id'            => 'sidebar-2',
    		'before_widget' => '<li id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</li>',
    		'before_title'  => '<h2 class="widget-title">',
    		'after_title'   => '</h2>',
    	) );
    }
    add_action( 'widgets_init', 'parament_register_sidebars' );

    Then create a sidebar-left.php

    Now in page.php (you will need to do this in all the templates.)

    I changed page.php to the following:

    <div id="container" class="contain">
        <?php get_sidebar('left'); ?>
    	<div id="main" role="main">
    		<?php if ( have_posts() ) : ?>
    			<?php while ( have_posts() ) : the_post(); ?>
    				<?php get_template_part( 'content', 'page' ); ?>
    			<?php endwhile; ?>
    		<?php else : ?>
    			<?php get_template_part( 'content', '404' ); ?>
    		<?php endif; ?>
    		<?php comments_template(); ?>
    	</div><!-- end main -->
    
    	<?php get_sidebar(); ?>
    
    </div><!-- end container -->

    so now in the CSS.

    ul#sidebar-left {
    width: 220px;
    float: left;
    }
    
    #main {
    display: inline;
    float: left;
    margin: 0 25px 30px 10px;
    width: 420px;
    }
    
    #sidebar {
    float: right;
    width: 220px;
    }

    hopefully you followed that & can work it out from there, just remember first 2 columns need float: left, 3rd column is float: right

    Then the widths are important, if the centre column is too wide for the content area it will push the right column down below.

    Hope this helps

  • Nomad Freelance

    Sweeet thanks I think I can do that. So for every template that calls for <?php get_sidebar(); ?> will need to have another line added to call the new specific sidebar and where the line is placed determines where it goes?

    I was trying to do it all in CSS. So they way I have it now, they are both called after the main content and I was trying to put one before the main content with CSS and they kept getting pushed to the bottom lol

    Thank you!

  • Vaughan

    Yes, for each sidebar you'd need to call it seperately.

    If you notice, in my code above.

    Because I registered Left sidebar (I think you did right sidebar)

    'name'          => __( 'Left Sidebar', 'parament' ),
    		'id'            => 'sidebar-1',

    Then i copied sidebar.php

    renamed it to sidebar-left.php (and changed the code inside to reflect it)

    So if I wanted to call that sidebar,

    I used get_sidebar('left');

    Which specifically calls that template sidebar-left.php

    so as you did yours with the right sidebar, it's just the order that is different & the filename etc. so you'd call get_sidebar('right');

    If you get stuck, just give a shout, we're here to help :slight_smile:

    Hope this helps

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.