Customizing WordPress Theme Sidebar
With a WordPress Sidebar Template, we need to make sure it’s “widgetized”. In this tutorial, we would use 2 widget areas, since with it the code can be used with both 2 and 3 column themes. The widget areas would be registered in the functions.php code as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function theme_widgets_init() { register_sidebar( array { ‘name' => 'Primary Widget Area', ‘id' => 'primary_widget_area', ‘before_widget' => '<li id="%1$s">', ‘after_widget' => "</li>", ‘before_title' => '<h3>', ‘after_title' => '</h3>' ) ) ; register_sidebar( array { ‘name' => 'Secondary Widget Area', ‘id' => 'secondary_widget_area', ‘before_widget' => '<li id="%1$s">', ‘after_widget' => "</li>", ‘before_title' => '<h3>', ‘after_title' => '</h3>' ) ) ; } add_action( 'init', 'theme_widgets_init' ); |
Now we’ve got two widget areas: Primary Widget Area and Secondary Widget Area. There’s no point naming them Primary Sidebar or Secondary Sidebar. In some layouts they might not even be sidebars—but they’ll always be widget areas. Now, in functions.php we’re going to add two more custom code snippets.
Now, we’re going to pre-set our default widgets: The Search, Pages, Categories, Archives, Links and Meta Widgets. We won’t be coding them in manually to sidebar.php. We’ll be telling WordPress to add them to our dynamic widget area in the settings:
|
1 2 3 4 5 6 |
$preset_widgets = array { ‘primary_widget_area' => array( 'search', 'pages', ‘secondary_widget_area' => array( 'links', 'meta')); if ( isset( $_GET['activated'] ) ) { update_option( 'sidebars_widgets', $preset_widgets ) } |
Now, in our Primary Widget Area (primary_widget_area) we’ve got the Search Widget, the Pages Widget, the Categories Widget, and the Archives Widget. The Secondary Widget Area (secondary_widget_area) has the Links and Meta Widgets. They’re all loaded up there in our WordPress options, ready and waiting.
Now, through the following code, we’re going to create a new conditional that will check to see if there are any widgets in a given widget area:
|
1 2 3 4 5 |
function is_sidebar_active( $index ) { global $wp_registered_sidebars; $widgetcolums = wp_get_sidebars_widgets(); if ($widgetcolums[$index]) return true; return false; |
With our dynamic widget areas registered and pre-set widgets, our Sidebar Template is going to be one of the simplest templates you’ll ever see. But remember, we’re also going to want to wrap our sidebars in an IF statement using our new conditional is_sidebar_active().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php if ( is_sidebar_active('primary_widget_area')) <div id="primary"> <ul><?php dynamic_sidebar('primary_widget_area'); ?></ul> </div> <!-- #primary .widget-area --> <?php endif; ?> <?php if ( is_sidebar_active('secondary_widget_area') ) : ?> <div id="secondary"> <ul> <?php dynamic_sidebar('secondary_widget_area'); ?> </ul> </div> <!-- #secondary .widget-area --> <?php endif; ?> |
Now if you go into the widget admin page and pull all those widgets out of any one of those widget areas, the conditional statement guarding the markup will fail. And that’s all about editing the Sidebar; no other manual editing is required.
BlueHost | HostGator | Media Temple
