Widgetized headers and footers?

Dynamic (widgetized) Sidebars are great, but would you not like to have a dynamic header and footer in your theme too? This would allow you to switch widgets in and out of website headers and footers as easily as you do the sidebars.The css layout generator will give you access to a wide variety of browser compatible layouts using these widgetized areas.

100% valid css grids in the layout generator

Two Steps

There are 2 steps to adding another widget area:

1. Edit your theme’s functions.php to register the widget
2. Display or call the new widget area where you want it to appear

The Sandbox theme is great and many themes use it as a template, so let us use version 1.6 in this example. (Note the css generator allows for the sandbox template, so you do not even need to change the html.)

Functions.php: Register the extra sidebars using a theme with named sidebars:

If your theme uses “named” sidebars, then you can add some more named ones.

The functions.php code will add a globalnav “sidebar” and a footer “sidebar”. Then change your themes header.php and footer.php to check for these sidebars.

Function.php Register sidebars using a theme with unnamed sidebars

The Sandbox theme uses unnamed sidebars. WordPress suggests not mixing named and unnamed and indeed in testing this did seem to confuse matters. So check your themes functions.php and look for register_sidebar or register_sidebars.

sandbox theme

In the sandbox theme, change the register_sidebar/s line to say
register_sidebars( 4, $p );

Default theme

In the default theme, at the top of the functions.php file,

• change the function call to the plural function register_sidebars and
• insert a 2 or 3 as shown, depending on the number of widget areas you want.

if ( function_exists('register_sidebars') ) {
 register_sidebars(array(2,
 'before_widget' => '<li id="%1$s" class="widget %2$s">',
 'after_widget' => '</li>',
 'before_title' => '<h2>',
 'after_title' => '</h2>',
 ));
}

Update header.php

sandbox theme header.php

edit header.php, change line 24 which has:

<?php sandbox_globalnav() ?>

Edit this line and replace it with this code – using a 2 or 3 as appropriate (Note: for compatibility with the sandbox theme, I suggest using 3 for the header and 4 for the sidebar as ! and 2 are “sidebar” sidebars!:

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) /*
{ sandbox_globalnav();} ?>


If there are no widgets in the chosen sidebar, then the default sandbox global navigation will show. (Note: You can also use this to remove this navigation from the header by simply adding an empty text widget.)

If you would like the widgets in the header to take on any general sandbox styling that you may have defined for the sidebars, then add class="sidebar" in to <div id="access" > giving <div id="access" class="sidebar"> in line 22.

Default theme’s header.php

Insert a new div (for example) after the header </div>’s. Note the default header is not very flexible and requires more css tweaking if you add the menu elsewhere. :
<div class="sidebar">
<ul class="xoxo">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar(3) )
{ echo '<!-- no widgets defined -->'; } ?>
</ul>
<div>

Repeat for sidebar.php or footer.php if desired.

One could do a similar exercise for the end of the sidebar or the footer to add “widget areas” (aka sidebars) almost any where you like – possibly even in the main content areas. Remember to

• adjust the surrounding html to be consistent with the rest of the theme and to
• change the number or name of the sidebar that you are referencing.

Add the widgets to the sidebars

In the Admin area go to Design > Widgets and specify the widgets that you want to have in each area if you want to change them from any defaults. Note that if a previously used theme used sidebars, some widgets may already have been defined, and in 2.6, widgets cannot be reused, although one can create multiple instances by renaming them to get around the problem.

CSS adjustments for sidebar widgets

Depending on how well thought through your theme is, you may or may not need to add CSS. For example if a theme is a sandbox based theme, it hopefully already has styles defined for div.sidebar ul. If not it may be helpful to add css such as
div.sidebar ul {list-style-type: none;}.

Notes:

Widget Css Problems

The default theme very considerately echo’s the widget name as class for the widgets in the widget area.  The widgets may need this for their styling.  Please check whether your theme does this if you have any widget css problems

Be Sociable, Share!

• 

Related posts:

1. Breadcrumbs The AmR WordPress Breadcrumb navigation widget plugin is available here. Features: Uses listed items with minimal markup. The markup is...
2. Category specific css to achieve a print “cover page” css look For a school’s online newsletter we wanted the “photo of the week” category to present differently from other posts. Ideally...
3. Shortcode a widget in a page or post Shortcodize a widget - Use any widget in a shortcode in a page or post...
4. The “shortcode any widget” handles multiple instances The shortcode any widget plugin can reference multiple instances of the same widget individually  by targeting the instances unique id. ...
5. Widget as shortcode – tips Want to keep the widget title to identify it from other instances of the same widget, but want to hide...