Support » Theme: Twenty Thirteen » Moving second sidebar to the left

  • Resolved brainwork

    (@brainwork)


    I’m almost there but not quite.

    I have figured how to get an extra widgetized sidebar, now I need to get it in the position i want (all the way to the left, but still under the header, the text below has to come between the two sidebars) and I’m at my wits end.

    To be clear, the sidebar all the way to the right is one that comes with the theme (it contains WooCommerce cart, and three text widgets (2 with images)). The one one the left (containing search, a menu and two WooCommerce widgets), needs to be placed all the way to the left so that the text of the static page can fit between the two sidebars.

    Any ideas?

    http://harry.brainworkwebsites.nl

    P.S. Yes, I’ve searched the forum, that’s how I’ve gotten this far. There are a few people stating that they’ve found a solution, but these are either out dated (with plug-ins that no longer are available) or didn’t post how they achieved it.
    Also, yes I’ve looked at three column themes that already provide two sidebars, but I can’t get the same look and feel as with Twenty Thirteen.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Guten Tag Harry

    First thing you’ll want to do is give your new sidebar a unique ID like “quaternary”. Presently you are using twice the same ID “tertiary”. Also, I believe it should be not within #primary

    Instead of this:

    <div id="primary" class="content-area">
    	<div id="content" class="site-content" role="main">
    
    		<div id="tertiary" class="sidebar-container" role="complementary">
    
    		</div><!-- #tertiary -->
    
    	</div><!-- #content -->
    </div><!-- #primary -->
    
    <div id="tertiary" class="sidebar-container" role="complementary">
    
    </div><!-- #tertiary -->

    It should be something more like this:

    <div id="primary" class="content-area">
    	<div id="content" class="site-content" role="main">
    
    	</div><!-- #content -->
    </div><!-- #primary -->
    
    <div id="tertiary" class="sidebar-container" role="complementary">
    
    </div><!-- #tertiary -->
    
    <div id="quaternary" class="sidebar-container" role="complementary">
    
    </div><!-- #quaternary -->

    Thanks for the reply!

    So I fixed those issues. But still need to get the “quaternary” sidebar to the left…

    You are welcome,

    It appears you have only changed a comment.
    Let’s start over:
    First you should make a child theme
    Then in the child functions.php you could could have something like this:

    /**
     * Register more widget areas.
     */
    function more_twentythirteen_widgets_init() {
    	register_sidebar( array(
    		'name'          => __( 'Extra Widget Area', 'twentythirteen' ),
    		'id'            => 'sidebar-3',
    		'description'   => __( 'Appears blah-blah-blah', 'twentythirteen' ),
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</aside>',
    		'before_title'  => '<h3 class="widget-title">',
    		'after_title'   => '</h3>',
    	) );
    	register_sidebar( array(
    }
    add_action( 'widgets_init', 'more_twentythirteen_widgets_init' );

    Then you could create a new file in the child theme with the name sidebar-extra.php
    And with the following content:

    <?php
    /**
     * The sidebar containing the "extra" widget area
     *
     * Displays bLAHBLAH.
     *
     * If no active widgets are in this sidebar, hide it completely.
     *
     * @package WordPress
     * @subpackage Twenty_Thirteen
     * @since Twenty Thirteen 1.0
     */
    
    if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
    	<div id="quaternary" class="sidebar-container" role="complementary">
    		<div class="sidebar-inner">
    			<div class="widget-area">
    				<?php dynamic_sidebar( 'sidebar-3' ); ?>
    			</div><!-- .widget-area -->
    		</div><!-- .sidebar-inner -->
    	</div><!-- #quaternary -->
    <?php endif; ?>

    Then you could put this in the child functions.php

    /**
     * Whenever the sidebar is called, also call the extra sidebar
     */
    function get_extra_sidebar() {
    	get_sidebar('extra');
    }
    add_action( 'get_sidebar', 'get_extra_sidebar' );

    Then you would need some css in the child style.css properly to position the extra sidebar

    .site-main div#quaternary.sidebar-container {
    /*
        height: 0px;
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 1;
    */
    new code goes here
    }

    and that’s just the beginning of the css, likely there will be more to be done even at this point.

    Are you sure you don’t want to look at some other 3-column reponsive theme?

    After fiddling some more I decided to give up and give the Jolene Theme a try. Turned out ok. Did run into 1 problem with the background colour of the widget sidebar. Will be posting about that in the appropriate forum.

    Thanks for all the help!

    You are welcome, mark this topic resolved?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Moving second sidebar to the left’ is closed to new replies.