Get the most out of your “Widgetized Sidebar”

Hello all! yes, yes, I know I’m late on my promised date. I’ve actually been compiling a list of ideas on topics to write a bout – and I’ve finally decided to choose one and go with it. (Yeah, I know I said it would be “How to Turn Your Existing Site Into a WordPress Theme” – but that sucker is actually taking a lot more time than I’d originally thought. But I swear, I’m working on it. It’s in my “drafts” right now!)

So. I decided a smaller step would be to show you how to get the most out of your widgets. You can choose whatever you want – what I’ll be touching on is how to make more than one “sidebar” and apply widgets to them.

“Sidebar” is in quotes because – you won’t believe this – you don’t HAVE to put them in your sidebar. You can put those suckers anywhere you damn well please. How cool would it be to have your site’s content separated by a widget that would hold – whatever you’d like it to hold? Or Widgetizing your footer? or you header? Or how about having a different set of widgetized sidebars based on what page you’re on?

You can do that?

You bettah believe it, suckah!

Now, first you should keep in mind that, to keep your code valid (and your mind sane) you should be careful and plan this out accordingly. For example, it would be seriously cool to divide each post in your theme with Zombie Robot’s Random Quotes plugin. However, his plugin is written to spit out code using ID’s – not classes. So you could feasibly end up with 10 quotes on your page – but ALL of them have an ID (instead of a class) rendering your code invalid, which eventually leads down the path of insanity. To fix that example, you’d actually have to wade through his plugin code and edit it to change everything from an ID to a class. And don’t get me started on the possibility that looping something like that (which has database calls) over and over again might be a bad idea – I can think of many things that could go wrong. So just be careful what widgets you plan to place *within* the Loop.

However, you *can* put them pretty much anywhere. And if you stick with certain stuff, you can do pretty much whatever you want. And truly, it is really easy.

First, you want to open up your functions.php file that associated with your theme. (It would be located in wp-content/themes/YOUR THEME/functions.php. If you don’t have one, just create a new file with that name.) I recommend you open it up in a plain text editor (and how many times do I need to say that Microsoft Word is NOT a plain text editor! Just a reminder, folks.) and edit from your desktop, rather than directly fro the admin panel – because if you mess up anything, it’ll render your WordPress useless, and you’ll have to open it up on your desktop anyway to fix it ;)

So open that puppy up, and you want to add this:


<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Now, save and upload to your themes folder. If you navigate to Design>Widgets, you’ll now notice that you have a sidebar titled “Sidebar” to which you can add widgets to. So, when you want more than one, simply copy that and paste it again, and give the second one a new name. Like so:


<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Sidebar',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Footer',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

Now, when you open up the “Design>Widgets” Section, you’ll see a dropdown list which contains “Sidebar” and Footer”. Two sidebars to add widgets to your heart’s content.

However, you’ll notice that when you add said widgets and save your changes, they won’t appear on the site (of course if you already have widgetized sidebars, they probably will, depending on how things are set up) – so now I’ll show you how to get them to show up on the site.

You’ll need to open up your sidebar.php file and add the following where you want the widgets to show up:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar') ) : ?>
Vote or Shut Up!
<?php endif; ?>

The “Vote or Shut Up!” section can be replaced by whatever you want. Basically what that little piece of code says is If there is no “Dynamic Sidebar” function, or there is no Dynamic sidebar named “Sidebar”, then display the following:. So if you don’t have dynamic sidebars, or you “Sidebar” has no widgets added to it, then it’ll display “Vote or Shut Up!” instead. If you leave it blank it’ll display nothing.

You can do the same thing anywhere. Since I called the second sidebar “Footer”, let’s put it in the footer! So open up your footer.php file, and somewhere in there, stick in the code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer') ) : ?>
I'm a lumberjack, and that's okay.
<?php endif; ?>

And now, anything you place within the “Footer” sidebar (under Design>Widgets) will now appear in the footer of your site. You can do this anywhere – but it’s always a good idea to name your “sidebars” appropriately, so you know what widgets you’re sticking into what section.

As I said before, you can place different widgetized sidebars on different pages. For example, say you want a sidebar for your “Home” page, and a different one for your “About” Page, and a third for your “Archives” page. This is a matter of using WordPress Conditionals to determine what page you’re on. So, using the information sidebar above, you would add this to your functions.php file:


<?php if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Index Page',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'About Us',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Archives',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name'=>'Default',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>


<?php if(is_home() || is_front_page()) {
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Index Page') )
} else if(is_page('about-us')) {
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('About Us') )
} else if(is_archive()) {
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Archives') )
} else {
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Default') )
} : ?>
Have fun storming the castle!
<?php endif; ?>

And there you have it. You can literally Widgetize Anything (which, by the way, is one of my favorite plugins…)

Have your say:

* Copy this password:

* Type or paste password here:

1,812 Spam Comments Blocked so far by Spam Free Wordpress