Bootstrap CSS

Bootstrap is an awesome CSS framework that allows you to rapidly prototype web applications. It makes it easy to create components that look consistent and unify a website’s feel. Something lesser known about Bootstrap is that it’s just as good with prototyping websites; it provides you with a some simple tools that make responsive development and grid based layouts easy. For example, take a look at this website: it’s built with Bootstrap 3. (and it’s awesome, too!)

Panels

Panels are a component within Bootstrap that provide contextual information boxes. They provide a place to place a title and a small blurb that isn’t necessarily primary to the page’s content.

Widgets

WordPress’ Widgets are little blurbs of information that are secondary to the site’s content. They’re used to provide contextual information that is relevant to the page, but not necessary. Sound familiar? I thought so too, so I decided that I wanted my widgets to be built as Panels in Bootstrap. Here’s how I did that.

When I registered my sidebar in the theme I’m using, I customized the way widgets were printed.

register_sidebar( array(
'name' => __( 'Sidebar', 'gnarlyweb' ),
'id' => 'sidebar-1',
'description' => '',
'before_widget' => '<div id="%1$s" class="widget %2$s panel panel-default">',
'before_title' => '<div class="panel-heading"><h3 class="widget-title panel-title">',
'after_title' => '</h3></div><div class="panel-body">',

// this is logically where the widget's content will be printed. The rest wraps around it.

 'after_widget' => '</div></div>',
 ) );

Everything in bold is what needs added to the sidebar declaration; here’s a breakdown of it.

1. panel panel-default — this is added to the widget’s container to signal the start of a Bootstrap Panel
2. <div class=”panel-heading”> — this markup makes there be a header to the panel
3. panel-title — tells the H3 to render as the panel’s title
4. </div><div class=”panel-body”> — because we can’t directly modify what wraps around the content of the widget, we add the panel body wrap to what is printed after the title
5. </div> — this closes the panel-body before the panel itself closes

Basically, just remember that since you can’t directly wrap the widget’s content, you need to add the wrapper markup after the title and after the widget.