Try playing with something like this:
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Your Widget Name',
'description' => 'Description of your widget',
'before_widget' => '<div class="container-top"></div><li id="categories-3" class="widget-container widget_categories">',
'after_widget' => '<div class="container-bottom></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
Keep in mind that instead of hard-coding IDs & classes you can also use syntax like this:
<div id="%1$s" class="widget %2$s">
More here: http://codex.ww.wp.xz.cn/Widgets_API
Thread Starter
David
(@thatseoguydavid)
would this apply to all widgets created or just the categories widget?
If you want special classes & IDs for your category widget, create a widgetized area for it alone in your functions.php & sidebar.php (or wherever you want your category widget to appear).
You can learn more about how widgets work by reading the Codex link above. 🙂
Thread Starter
David
(@thatseoguydavid)
I may be misunderstanding you but i was just showing that category widget as an example i should’ve been more specific, I actually want it to apply to every widget, so it would look like this
<div class=”container-top”>
</div>
widget will go here
<div class=”container-bottom>
</div>
thanks for the link btw im just trying to make sense of it, extreme php noob at the moment.
If you edit functions.php to insert your class, it will apply to all widgets in that area.
You may have more than one sidebar/wdgetized area. In which case you would need to add the class to all widgetized areas if that’s your wish
As Rev. Voodoo says, look in your functions.php file to see what widgetized areas exist, and add your before/after code accordingly, depending on which widgetized areas you want to affect. Do a search in the file for register_sidebar and you’ll find them.
Thread Starter
David
(@thatseoguydavid)
this is what i am seeing:
function twentyten_widgets_init() {
// Area 1, located at the top of the sidebar.
register_sidebar( array(
‘name’ => __( ‘Primary Widget Area’, ‘twentyten’ ),
‘id’ => ‘primary-widget-area’,
‘description’ => __( ‘The primary widget area’, ‘twentyten’ ),
‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’,
‘after_widget’ => ”,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );
// Area 2, located below the Primary Widget Area in the sidebar. Empty by default.
register_sidebar( array(
‘name’ => __( ‘Secondary Widget Area’, ‘twentyten’ ),
‘id’ => ‘secondary-widget-area’,
‘description’ => __( ‘The secondary widget area’, ‘twentyten’ ),
‘before_widget’ => ‘<li id=”%1$s” class=”widget-container %2$s”>’,
‘after_widget’ => ”,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );
Thread Starter
David
(@thatseoguydavid)
when it say before and after what is it referring to?
So what you’d do is take whichever widgetized area you want to affect, and incorporate the code you want.
So let’s say you want to add your custom div before & after each widget added to the Primary Widget area, you’d get:
function twentyten_widgets_init() {
// Area 1, located at the top of the sidebar.
register_sidebar( array(
'name' => __( 'Primary Widget Area', 'twentyten' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'twentyten' ),
'before_widget' => '<div class="container-top"></div><li id="%1$s" class="widget-container %2$s">',
'after_widget' => '<div class="container-bottom></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
I only edited two lines – before_widget & after_widget.
// Area 1, located at the top of the sidebar.
register_sidebar( array(
'name' => __( 'Primary Widget Area', 'twentyten' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'twentyten' ),
'before_widget' => '<div class="blah></div><li id="%1$s" class="widget-container %2$s">',
'after_widget' => '<div class="blahblah"></div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
Is how to do it in that area if I understand you right. An open and closed div above and below….
If you want the div to wrap the whole wigeth you would just have the opening in widget_before and the closing in widget_after
also, looks liek you are using twentyten theme so, http://go.rvoodoo.com/WPchild for info on that, basically, don’t do it
The best way to understand this is to look at the generated code on your site after you add a widget. 🙂
before_widget means – add this code before each widget in this particular widgetized area of the theme
after_widget means – add this code after each widget in this particular widgetized area of the theme
Thread Starter
David
(@thatseoguydavid)
ok now i understand completely. thank you so much for all your help i just have one more question(i think) how would I incorporate this into a child functions.php file?
Rev. Voodoo explains it very well here.
Here’s the gist
function voodoochild_theme_setup() {
/* Deregister sidebar in parent */
remove_action( 'widgets_init', 'twentyten_widgets_init' );
/** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'voodoo_widgets_init' );
function voodoo_widgets_init() {
// Sidebar 1
register_sidebar( array(
'name' => __( 'Primary Widget Area', 'voodoochild' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'voodoochild' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
// And 2
register_sidebar( array(
'name' => __( 'Secondary Widget Area', 'voodoochild' ),
'id' => 'secondary-widget-area',
'description' => __( 'The secondary widget area', 'voodoochild' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
}
add_action( 'after_setup_theme', 'voodoochild_theme_setup' );
You have to unregister twentytens sidebars in your child theme. The register your own. Then copy the code out of twentytens and edit it in your child theme
Thread Starter
David
(@thatseoguydavid)
thanks, I came name the function whatever i want, correct?
