Display both left and right sidebar?

  • Resolved toiletresin

    (@toiletresin)


    11 years, 4 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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    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.

    Thread Starter toiletresin

    (@toiletresin)

    Thanks, Anthony!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Display both left and right sidebar?’ is closed to new replies.