Trying to Add a LEFT Sidebar?

I'm running the base 2016 wordpress theme. I have modified it to allow for a left side sidebar. I am able to see the admin side of the sidebar like so:

I have registered the call in the functions.php page like so:

register_sidebar( array(
    'name'          = __( 'sleft', 'twentysixteen' ),
    'id'            = 'sleft',
    'description'   = __( 'Add widgets here to appear in your sidebar.', 'twentysixteen' ),
    'before_widget' = 'section id="%1$s" class="widget %2$s"',
    'after_widget'  = '/section',
    'before_title'  = 'h2 class="widget-title"',
    'after_title'   = '/h2',
) );

I have then set up an sleft.php file that has the following in it:

?php if ( is_active_sidebar( 'sidebar-left' )  ) : ?
      aside id="secondary" class="sidebar widget-area" role="complementary"
          ?php dynamic_sidebar( 'sidebar-left' ); ?
      /aside!-- .sidebar .widget-area --
?php endif; ?

At the top of Single.php, Page.php, Search.php, Archive.php, and 404.php I have added the following line like so:

 ?php

   /** header to file

   get_header(); ?

   ?php get_sidebar(sleft); ?

At the bottom of each of those files I have denoted the previous sidebar so that it's called directly and not indirectly, like so:

?php get_sidebar(sidebar-1); ?
?php get_footer(); ?

CSS is standard that came with the package. I made one entry for the sleft call, like so:

.sleft {
    margin-bottom: 3.5em;
    padding: 0 7.6923%;
 }

What is occurring is that the 2nd sleft sidebar is NOT showing up. The page is being shoved to the right like so:

Here is a screen capture of the issue:

http://bit.ly/WP-SIDEBAR-ISSUE

How do I fix this problem ?

Topic functions sidebar Wordpress

Category Web


I added after

get_header(); ?>
      <aside id="secondary" class="left-sidebar widget-area" role="complementary">
          <?php dynamic_sidebar( 'sleft' ); ?>
      </aside><!-- .sidebar .widget-area -->

Then

aside#secondary {
    width: 20%;
    float: left;
    margin-right: 15px;
}

Now... if you're going to have both sidebars, you'll have to adjust the

@media screen and (min-width: 61.5625em)
body:not(.search-results) article:not(.type-page) .entry-content {
    float: left;
    width: 50%;
}

or something like that. You can customize the CSS as you need, but this should put you on the right track.

Also.. FWIW, I created a child theme, and added this to it, rather than modifying the twentysixteen theme directly. This is the recommended method.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.