Tag Archives: simpla

3 Column Simpla Theme with Widgets

I was going to update my original post with this but I thought it would be easier to put it in a seperate post. Here’s how I updated the Simpla theme to have 3 columns with widgets.

First read this post: http://stuart.amanzi.co.nz/2006/05/30/new-simpla-theme-with-widgets/

Then edit the sidebar.php like this:

<div id="sidebar2">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
    <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>
<?php endif; ?>
</ul>
</div>
<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
    <li id="links">
        <ul>
        <?php get_links_list(); ?>
        </ul>
    </li>
<?php endif; ?>
</ul>
</div>

Then edit the style.css to get the two sidebars to show correctly: (just modify the stylesheet with the bits below)

#wrap{
    margin:0 auto;
    text-align:left;
    width:980px;
}
#content{
    font-size:1.2em;
    float:left;
    padding:1em;
    width:600px;
}
#content .wide{
    width:980px;
}
#sidebar{
    font-size:1.1em;
    float:right;
    padding:0;
    width: 165px;
    border-right: 1px dotted #ddd;
}
#sidebar2{
    font-size:1.1em;
    float:right;
    padding:0;
    width: 165px;
}

Then finally, you need to edit the functions.php file to reference both sidebars:

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

Let me know if you have any other questions.

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