WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Display both left and right sidebar? (3 posts)

  1. toiletresin
    Member
    Posted 9 months ago #

    Hi, Anthony! Great work on the Quark theme.

    I'm trying to figure out how to display the default right sidebar on all pages along with an additional left sidebar. After piecing together instructions from various tutorials, I managed to get a new sidebar to show up on the left, but now the right sidebar is being pushed all the way to the bottom of the page, beneath all my post content, instead of showing up on the right like I want it to.

    These are the code snippets I've added:

    functions.php:

    register_sidebar(array(
      'name' => esc_html__( 'Left Sidebar', 'quark' ),
      'id' => 'sidebar-left',
      'description' => esc_html__( 'Left sidebar added by Ruji' ),
      'before_widget' => '<aside id="%1$s" class="widget %2$s">',
      'after_widget' => '</aside>',
      'before_title' => '<h3 class="widget-title">',
      'after_title' => '</h3>'
    ));

    index.php (including lines before and after the part I inserted so you can see where it is):

    <div id="primary" class="site-content row" role="main">
    <div id="sidebar-left">
       <ul>
          <?php
          if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-left') ) :
          endif; ?>
       </ul>
       <div style="clear:both"></div>
    </div>
    <div class="col grid_8_of_12">

    sidebar-left.php (new file I created according to instructions I found somewhere):

    <aside id="sidebar">
    <ul>
    <?php dynamic_sidebar( 'sidebar-left' ); ?>
    </ul>
    </aside>

    style.css:

    #sidebar-left {
    float: left;
    width: 20%;
    }

    Please let me know how to make both sidebars display properly. Thanks!

  2. ahortin
    Member
    Theme Author

    Posted 9 months ago #

    Quark uses a 12 Column grid to display its content. By default, it uses 8 columns for the main body content and 4 columns for the sidebar.

    If you want to display both a left and right sidebar, then you'll need to change each of the templates to use a different number of columns. I would suggest, 3-6-3. (ie. 3 columns for each sidebar and 6 columns for the main content).

    If you look in index.php you'll see something along the following lines...

    <div class="col grid_8_of_12">

    You'd need to change this to the number of columns you want to use. eg...

    <div class="col grid_6_of_12">

    You need to do the same to sidebar.php to change the columns from 4 to 3 (or whatever you want to use for the right sidebar).

    For your own left sidebar template, you'd need to add the div containing the relevant number of columns, just like sidebar.php.

    You'll need to do this for all the template files (eg. page.php, single.php etc..).

    Also, you need to remember that the total of all your columns must equal 12, otherwise you'll end up with issues.

  3. toiletresin
    Member
    Posted 9 months ago #

    Thanks, Anthony!

Reply

You must log in to post.

About this Theme

About this Topic