May 30 2006
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:
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