Sunday, 1 March 2015

Add Custom Sidebars in WordPress



1) Create New Sidebar 

Open Function.php of your theme files and Add below code - 



if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Custom Sidebar',
        'id' => 'custom-sidebar',
        'description' => 'Sidebar below Header image',
        'before_widget' => '<li id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
}

2) Add Sidebar to theme

As we create the side bar in previous step now, we need to call it to the theme files. 

So its upto you Where you want it to call like - Sidebar, Footer etc. 

Open Page.php of your theme files and Add below code.


<div id="custom-sidebar">
   <ul>
      <?php
      if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('custom-sidebar') ) :
      endif; ?>
   </ul>
   <div style="clear:both"></div>
</div>

3) Styling your CSS 

Put below code in Style.css of your theme files.


div#custom-sidebar ul {
    line-height: 20px;
}
div#custom-sidebar li.widget {
    width: 300px;
    margin:0 0 15px 20px;
    float:left;
}
div#custom-sidebar li.widget h2 {
    margin-bottom: 15px;
}
Share:

0 comments:

Post a Comment

Blogger Tutorials

Blogger Templates

d-koder - Web Developer / Security Specialist / Penetration Tester I would like to write tutorials about the issue we use to get while coding something. Hope these small tuts will help developers worldwide. > Website

Interested In -

Html/Css
PHP
Javascript
Jquery
Ajax
JSON
GITHUB