FUBARgenre: The Genre of Fubar

Like many of you, I’ve fallen in love with Yichi’s Resurrection theme for Wordpress. It’s a great theme with stunning visuals. The only hitch is that it’s not widget-ready.

If you’re too lazy busy to hard code the php in the sidebar whenever you want to incorporate some changes, then a non-widget compatible theme is not really the best option. So I took the time to widgetize Resurrection. It’s not as complicated as it sounds. Here, I will attempt to show you how.

But if you’d rather skip these steps, you can go right ahead and download the widget-ready Resurrection theme. I’ve posted the download link at the end of this post.

If you’re as inquisitive as I am, though, you’d want to try to widgetize the theme yourself. It’s quite fun, actually. Or does that sound too geeky?

How to Make Yichi’s Resurrection Theme Widget-Compatible:

Open sidebar.php. Go to the area right under <div class="clear"></div>. Above <div class="recent-posts">, add the following lines:

<div id="sidebar1">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar1') ) : else : ?>

and right above Categories, <div class="cat">, insert the following:

<?php endif; ?>
</div>
<!-- End of #sidebar1 -->
<div id="sidebar2">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar2') ) : else : ?>

To close your second sidebar, add the following right above <div id="sbm">:

<?php endif; ?>
</div>
<!-- End of #sidebar2 -->

The revised area in my sidebar.php now looks like this (Note that I deleted the “sponsors” and “del.icio.us” classes. You can easily add these as widgets later on):

<div id="sidebar1">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar1') ) : else : ?>
      <div class="recent-posts">
      <h2>Recent Posts</h2>
      <ul>
      <?php // I love Wordpress so query_posts('showposts=16');?>
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <li><a href="<?php the_permalink() ?>">
      <?php the_title() ?> </a></li>
      <?php endwhile;  endif;  ?>
      </ul>
      </div>
<?php endif; ?>
</div>
<!-- End of #sidebar1 -->

<div id="sidebar2">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar2') ) : else : ?>
      <div class="cat">
      <h2>Categories</h2>
      <ul>
      <?php wp_list_cats('sort_column=name&hierarchical=0'); ?>
      </ul>
      </div>
      <div class="monthly">
      <h2>Monthly archives</h2>
      <ul>
      <?php wp_get_archives('type=monthly&limit=6'); ?>
      </ul>
      </div>
<?php endif;  ?>
</div>
<!-- End of #sidebar2 -->

And voila, we’ve made a dynamic sidebar. For the changes to take effect, however, we need to create another file named functions.php. To do this, simply create a blank file and name it functions.php. Add then add the following code:

<?php
// Widget Settings

if ( function_exists('register_sidebar') )
register_sidebar(array(
   'name' => 'Sidebar1',
   'before_widget' => '<div class="leftsidebar">',
   'after_widget' => '</div>',
   'before_title' => '<h2>',
   'after_title' => '</h2>',
));

if ( function_exists('register_sidebar') )
register_sidebar(array(
   'name' => 'Sidebar2',
   'before_widget' => '<div class="rightsidebar">',
   'after_widget' => '</div>',
   'before_title' => '<h2>',
   'after_title' => '</h2>',
));

?>

Your dynamic sidebar is ready. Well, almost. It should be working fine now, but we need to make sure that any widgets we add to the sidebar conform to the theme’s design. To do this, open styles.css and add the following right below the main div#sidebar elements:

/* This is the left widgetized sidebar - added by FubarGenre.com */

#sidebar1 {
width: 200px;
float: left;
background:#005b8e url(images/bottoml.gif) no-repeat bottom left;
padding-bottom: 50px;
}

#sidebar1 .leftsidebar {
font:11px arial;
background:#005b8e;
}

#sidebar1 .leftsidebar h2 {
margin: 5px;
font:bold 12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#fff;
}

#sidebar1 .leftsidebar ul {
margin: 0px;
padding: 0 0 10px 0;
}

#sidebar1 .leftsidebar li {
margin: 0px;
padding: 5px 5px 5px 18px;
list-style-type: none;
background:url(images/left-folder.gif) no-repeat 5px 50%;
}

#sidebar1 .leftsidebar li a {
text-decoration:none;
border-bottom:1px dotted #0a72ac;
}

#sidebar1 .leftsidebar li a:hover {
text-decoration:none;
border-bottom:1px solid #eee;
}

/* This is the right widgetized sidebar - added by FubarGenre */

#sidebar2 {
float: right;
width: 200px;
background:#0b3262 url(images/bottomr.gif) no-repeat bottom right;
margin-top: 0;
padding-top: 0;
padding-bottom: 50px;
}

#sidebar2 .rightsidebar {
font-size:11px;
}

#sidebar2 .rightsidebar h2 {
margin: 5px;
font:bold 12px Arial, Helvetica, sans-serif;
text-transform:uppercase;
color:#679ef1; height:30px;
}

#sidebar2 .rightsidebar ul {
margin: 0px;
padding: 0 0 10px 0;
}

#sidebar2 .rightsidebar li {
margin: 0px;
padding: 5px 5px 5px 18px;
list-style-type: none;
}

#sidebar2 .rightsidebar li a {
text-decoration:none;
border-bottom:1px dotted #225999;
}

#sidebar2 .rightsidebar li a:hover {
text-decoration:none;
border-bottom:1px solid #ccc;
}

And that’s it. You may now use sidebar widgets on the Resurrection theme.

I hope this helps.

Questions? Ask away.

Meanwhile, you may download the widget-ready Resurrection theme from here..

(Yeah, Gen. I’m a geek )