This tutorial will cover adding several “sidebars” to sidebar.php using simple “if” statements, and where to place unwidgeted content in the same file. This is a first step to my next tutorial, which will present some ideas for how to style a wide, widgetized sidebar.
Mixing widgetized and unwidgetized sidebar content can be confusing. Once in a while there is a script or a plugin that is not available as a sidebar widget, or a widget that is a hassle to reproduce as unwidgetized code. Sandwiching a few widgets between unwidgetized content lets you use both flavors as needed.
- Step One: Add more sidebars to functions.php
- Step Two: Add extra “sidebars” to sidebar.php
- Step Three: Understand where to put unwidgetized content
Step One: Add more sidebars to functions.php
Adding the example code below to functions.php allows for three “sidebars.” The code to add a sidebar to funtions.php is the same if a sidebar is an include or if it is called by an “if” statement as in my example sidebar.php contents in step two. To help with styling later, have used an array that adds an ID and class named for each widget used.
The number in the register_sidebars line is equal to the number of sidebars that will show up at Presentation > Widgets. Dragging widgets into those sidebars won’t have any effect unless each specific sidebar also appears somewhere in your template.
if ( function_exists('register_sidebar') ){ register_sidebars(3,array( 'before_widget' => ' <li id="%1$s" class="widget %2$s">', 'after_widget' => '</li> ', 'before_title' => ' <h2 class="widgettitle">', 'after_title' => '</h2> ', )); }
Step Two: Add extra “sidebars” to sidebar.php
I like to add an extra “sidebar” or two to sidebar.php, when I am first setting up a theme. This gives me flexibility down the line. If the building blocks are already in place, I won’t have to re-think anything if I later need to mix widgeted and unwidgeted content. Note that additional “sidebars” won’t show up in Presentation > Widgets unless there is corresponding code in funtions.php.
Using an “if” statement means that “sidebars” without active widgets won’t show up in the generated page, unless there is alternative code before the php endif of that “sidebar” – see “Heading” under !dynamic_sidebar(1) below.
If widgets are active for a “sidebar,” alternative content before the php endif of that sidebar won’t show. That makes for a handy place to leave myself notes that I don’t want to show in the generated page.
Though !dynamic_sidebar() gives the the same result as !dynamic_sidebar(1), once I have more than one sidebar I like to add the “1” to help me remember that there are more than one of them.
Example content for a sidebar.php file:
<div id="sidebar"> <ul> <?php /* Widgetized sidebar. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?> <li> <h2>Heading</h2> <ul> <li>list item</li> <li>list item</li> </ul> </li> <?php endif; ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?> <?php endif; ?> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?> <?php endif; ?> </ul> </div>
Step Three: Understand where to put unwidgetized content
Still in sidebar.php, find the start and end of each “if” statement. You don’t have to know what an “if” statement is, or how to write one. All that’s needed is to learn to recognize where they start and end.
These “if” statements say are that “if” there is a “dynamic_sidebar” then widgets active in whichever numbered “!dynamic_sidebar” should be used, followed by closing the “if” statement with an “endif.” A “sidebar” with active widgets will only show widgets. Unwidgeted content between a pair of “if” and “endif” will only show when the “sidebar” referred to by that particular “if” statement has no active widgets. So, basically, unwidgetized content needs to go before the “if” and after the “endif.”
In the illustration below, I placed “This line…” in between list item tags because standard widgets will generate navigation lists. When setting something up, formatting notes to myself using (x)html that will coordinate with the with the rest of that area helps me to stay organized.
Another look at sidebar.php:
<div id="sidebar"> <ul> <li>This line will show, regardless.</li> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?> <li>This line will NOT show when the first sidebar has active widgets</li> <?php endif; ?> <li>This line will show, regardless.</li> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?> <li>This line will NOT show when the second sidebar has active widgets</li> <?php endif; ?> <li>This line will show, regardless.</li> </ul> </div>