Widgetized headers and footers?

Thursday, July 24th, 2008 anna-marie

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 manys layouts using these widgetized aress.

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

Register the extra sidebars using a theme with named sidebars:

If your theme uses “named” sidebars, then you can add some more named ones. You could copy the anmari themes functions.php into your themes folder or add the code to an existing functions.php. Even if your theme uses another as a template or parent theme, wordpress seems to recognise the functions.php and register the additional sidebars. Unfortunately it does not do this with custom template files such as my “home with news” template. These have to be dropped into the parent theme folder.

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.

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(2, array(…

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;}.

Related posts:
  1. Themes Themes are styles or looks of websites, separate from your...
  2. Category specific css to achieve a print “cover page” css look For a school’s online newsletter we wanted the “photo of...
  3. amr ballet The “amr ballet” theme uses the sandbox theme and elegantly-presented...
  4. What to do with the admin / login links? I am pondering the login links for a few of...
  5. Breadcrumb Navigation Widget The AmR Wordpress Breadcrumb navigation widget plugin is available here....

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*