New Simpla theme with Widgets

I recently realised that this blog had become a bit of a virtual dumping ground, filled with junk I had been collecting from around the internet. It's always tempting to stick a new blog button, or affiliates advertising logo, or some other 'cool' service that requires a bit of javascript on your site. So I've gone back to basics and have implemented the Simpla theme which can be described using any of these words: cool, calm, relaxing, tranquil, minimalistic, modest, etc…

I also took the opportunity to implement the (relatively) new widgets plugin from Automattic. This allows you to modify the sidebar in a WordPress site without having to jump into the code. Achieving this in the Simpla theme was relatively easy, all that was needed to was modify the sidebar.php and create a new functions.php file. This is how I did it following the instructions on the Automattic site.

I changed the sidebar.php file to look like this:

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  <li id="pages">
    <h2>Pages</h2>
    <ul>
      <li><a href="<?php echo get_settings('home'); ?>/">Home</a></li>
      <?php wp_list_pages('title_li='); ?>
    </ul>
  </li>
  <li id="categories">
    <h2>Categories</h2>
    <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
    </ul>
  </li>
  <li id="links">
    <ul>
    <?php get_links_list(); ?>
    </ul>
  </li>
<?php endif; ?>
</ul>
</div>

And then created a new file called functions.php which looked like this:

<?php
if ( function_exists('register_sidebar') )
  register_sidebar();
?>

So once I had activated the Widgets plugin, I was presented with the sidebar options in the presentation section of the admin interface. The only small issue was a slight CSS formatting problem where I would get two bottom-borders between sections on the left. This was because there was now an extra nested <ul> so a small modification to the style.css file as follows fixed that.

#sidebar ul li{
  margin-bottom:0.3em;
  padding:0.3em;
}
#sidebar ul ul li{
  border-bottom:1px dotted #ddd;
}

I think the padding is still a little bit out, but because of the minimalistic layout of the theme, a few extra pixels here and there aren't really noticed. Overall I'm quite happy with the end result – hopefully this will prevent me from adding too much, apart from the addition of the Google Adsense, and the StatCounter code.

Links:

• Simpla Theme
• WordPress Widgets

UPDATE: I’ve created a new post with the details on how I got the 3 columns working here: 3 Column Simpla Theme with Widgets