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

Question

How does the function exact($args) work?
What's the meaning of $before_widget, $after_widget?

Answer 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);

Answer 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.

Answer 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").