How to create and register sidebar in WordPress Themes?

Sometimes you want to register more than one sidebars in your WordPress themes. It is very easy to register  sidebars.

open your functions.php and add search for following code in it.



function taousdesign_widgets_init() {
 register_sidebar( array(
  'name' => __( 'Sidebar', 'taousdesign' ),
  'id' => 'sidebar-1',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h1 class="widget-title">',
  'after_title' => '</h1>',
 ) );
}


this code reegisters 1st sidebar in your theme. Now to register more than 1 sidebar or create more sidebars you can use following code.

function taousdesign_widgets_init() {
 register_sidebar( array(
  'name' => __( 'Sidebar', 'taousdesign' ),
  'id' => 'sidebar-1',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h1 class="widget-title">',
  'after_title' => '</h1>',
 ) );
 
 
 register_sidebar( array(
  'name' => __( 'Sidebar Footer 1', 'taousdesign' ),
  'id' => 'sidebar-3',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h1 class="widget-title">',
  'after_title' => '</h1>',
 ) );
 
 register_sidebar( array(
  'name' => __( 'Sidebar Footer 2', 'taousdesign' ),
  'id' => 'sidebar-4',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h1 class="widget-title">',
  'after_title' => '</h1>',
 ) );
 
 register_sidebar( array(
  'name' => __( 'Sidebar Footer 3', 'taousdesign' ),
  'id' => 'sidebar-5',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h1 class="widget-title">',
  'after_title' => '</h1>
  ',
 ) );
}

i have registered 3 new sidebars in my theme. now to display these sidebars in your theme use following code.



for example if you want to show some sidebars in your theme footer, than you can use following code.

       <div class="wrapper-light">
     <div class="container">
         <div class="row">
             <footer id="colophon" class="site-footer" role="contentinfo">
                    <div class="span3">
                       <?php dynamic_sidebar( 'Sidebar Footer 1' ); ?>
                    </div><!-- .widget -->
                    
                    <div class="span3">
                       <?php dynamic_sidebar( 'Sidebar Footer 2' ); ?>
                    </div><!-- .widget -->
                    
                    <div class="span6">
                       <?php dynamic_sidebar( 'Sidebar Footer 3' ); ?>
                    </div><!-- .widget -->
                    
                </footer><!-- #colophon .site-footer -->
         </div> <!-- .row -->
     </div> <!-- .container -->
 </div> <!-- .wrapper-light -->

Here you can see registered sidebar in action. remember you need to add widgets in your sidebar from your wordpress dashboard. log in to your dasboard --> Appearence --> Widgets and just drag and drop your desired widgets to widgets areas.

0 comments: