WordPress.org

1. bodhidude
   Member
   Posted 2 years ago #

   I have a question regarding formatting a widgetized sidebar in a custom theme. I was using a sidebar without widgets where I controlled the formatting with standard html and css. When you add widget functionality is it that the widgets overrule any html coded items in your sidebar file? I'm trying to understand how I go about formatting the sidebar once I begin using widgets. For example adding space between the widgets and formatting the categories item as a bulleted list but have other items formatted differently. If there is a place where this is explained in detail for a beginner I'd appreciate it.
   thnx

2. kz
   Member
   Posted 2 years ago #

   For example, a sidebar with categories widget.
   in sidebar.php:
   

   <div id="sidebar" role="complementary">
     <ul>
       <?php
       if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) :
       ?>
   
       :
     </ul>
   </div>

   Maybe in functions.php:
   

   if ( function_exists('register_sidebar') )
     register_sidebars(array(
       'before_widget' => '<li id="%1$s" class="widget %2$s">',
       'after_widget' => '</li>',
       'before_title' => '<h2 class="widgettitle">',
       'after_title' => '</h2>',
     ));

   Then, generated HTML is like this:
   

   <div id="sidebar" role="complementary">
     <ul>
       <li id="categories-1" class="widget widget_categories"> class="widgettitle">
         <h2 class="widgettitle">Categories</h2>
         <ul>
           <li class="cat-item cat-item-1">
             <a href="http://example.com/category/category1" title="category1">Category1</a>
           </li>
           <li class="cat-item cat-item-2">
             <a href="http://example.com/category/category2" title="category2">Category2</a>
           </li>
         </ul>
       </li>
     </ul>
   </div>

   So if you want to add the bullet to the categories items,
   add below rules in style.css:
   #sidebar .widget_categories ul{list-style-type:disc;}

3. bodhidude
   Member
   Posted 2 years ago #

   Thanks for your reply. I appreciate you breaking it down this way as that makes it more clear. It looks to me like when you use widgets there are certain classes and ids that are automatically generated which you can then define in the style.css file. So I'm guessing that since the whole sidebar is a ul with each item being a li that if you wanted to create space or borders between widgets that would be defined in a class assigned to the primary ul?

4. kz
   Member
   Posted 2 years ago #

   when you use widgets there are certain classes and ids that are automatically generated

   you can spefify certain ids and classes in functions.php (again):
   

   if ( function_exists('register_sidebar') )
     register_sidebars(array(
       'before_widget' => '<li id="%1$s" class="widget %2$s">',
       'after_widget' => '</li>',
       'before_title' => '<h2 class="widgettitle">',
       'after_title' => '</h2>',
     ));

   space or borders between widgets, for example:
   

   #sidebar .widget{
   padding-bottom:30px;
   border:1px dotted #333;
   margin:bottom:30px;
   }

5. bodhidude
   Member
   Posted 2 years ago #

   Thanks, gotcha, I was still a little unclear on the role of functions.php but that cleared it up. And thanks for the clarification on the spacing issue.......

Topic Closed

This topic has been closed to new replies.