What’s the meaning of $before_widget and $after_widget?

4 comments

1. in siderbars, you may want to add your own class to your widgets, like <div class="well beforeW"> so this keeps all your widgets have same styles that you already defined in style.css file.

   sometimes designers add a curvy shadow to the bottom of each widget, so you have to make it an image, thus and after widget is your salvation, you do this at after widget </div><span class="specialShadow"></span>.

   this way you may add new elements before and after any widget you want.

   example:

   register_sidebar(array('name'=>'Footer-Sidebar',
   'before_widget' => '<div class="ftr-widget">',
   'after_widget' => '</div><span class="specailShadow"></span>',
   'before_title' => '<h3>',
   'after_title' => '</h3>',
   ));
   

   noticing above example, this is how you insert $args in functions. or in more clear way:

   $args = array('name'=>'Footer-Sidebar',
   'before_widget' => '<div class="ftr-widget">',
   'after_widget' => '</div><span class="specailShadow"></span>',
   'before_title' => '<h3>',
   'after_title' => '</h3>',
   );
   register_sidebar($args);
   

   Log in to Reply

2. The $before_widget and $after_widget are arguments in the register_sidebar function.

   Widgets are only available when added to sidebars, and the register_sidebar function allows you to specify HTML to wrap the widget. Typically $before_widget would be set to something like <div id="1%$s" class="widget"> or <li id="%1$s" class="widget %2$s"> (default) and $after_widget would be set to something like </div> or </li> (default).

   Then in your widget you’ll extract these arguments from the sidebar to use in the output of your widget instance.

   Log in to Reply

3. This code is placed in functions.php file .
   register_widget( ‘Twenty_Eleven_Ephemera_Widget’ );

   register_sidebar( array(
       'name' => __( 'Main Sidebar', 'twentyeleven' ),
       'id' => 'sidebar-1',
       'before_widget' => '<aside id="%1$s" class="widget %2$s">',
       'after_widget' => "</aside>",
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
   ) );
   
   
   
         before_widget - HTML to place before every widget(default: '<li id="%1$s" class="widget           %2$s">')
         after_widget - HTML to place after every widget (default: "</li>n"). 
   

   Log in to Reply

4. The answer is simple.

   Step 1: You use register_sidebar() function to register a new sidebar, give name, id, and description to your newly registered sidebar.

   Step 2: Once you create new widget within the sidebar. These widget need to enclose within a markup.
   The HTML markup is your choice, but it must be consistent for all the future widgets in the sidebar.

   Hence, markup before widget is $before_widget and markup after the widget is $after_widget.

   Example:

   register_sidebar( array(
   
           'name' => _('Primary Sidebar', 'primary-sidebar'),
           'id'   => 'primary-area',
           'description' => _('The primary area','dir'),
           'before_widget' => '<div class="myWidget">',
           'after_widget' => "</div>",
           'before_title' => '<h3 class="myWidgetTitle">',
           'after_title' => '</h3>',
   
       ));
   

   After you sidebar created and suppose you create a new Text widget.

   enter image description here

   Text widget title: My Text Widget
   Content: My content for the widget is this sentence.

   HTML Code in browser will look like following:

   <div class="myWidget">
   <h3 class="myWidgetTitle">My Text Widget</h3>
   <p>My content for the widget is this sentence"</p>
   </h3>
   </div>
   

   Log in to Reply