Journal of Tormod Haugen

The next step is fixing the sidebar. As this is a pretty old theme, the sidebar is rather statically set up. It links your pages, categories and links. Nowadays these Widgets are all the rage - and it isn’t hard to set up support for them in an old theme either.

First we’ll make the sidebar accept widgets. The easy, and right, way is to wrap the old sidebar in a condition saying it should be displayed if there is no support for widgets. Do it like this; insert line 2 and 15, making the code look like below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

Here we could have made the container around sidebar into an unordered list (ul), but that would mean we’d have to have a look at the css to get things to display correctly. So instead we must do a small fix in functions.php. Instead of using register_sidebars we’ll use register_sidebar (plural vs. singular) with some parameters.

Since the functions.php to register dynamic sidebars in doesn’t exist, we’ll have to create it. Put it in the theme’s folder, and make it contain the following code. Be careful; no space or newlines before or after the lines of code:

1
2
3
4

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

The before and after_widget parameters wraps each widget in a div. This wouldn’t be necessary if the dynamic sidebar call was issued from inside an unordered list (ul), as the default values produces list elements (li).

Now the only task left is to go into the widget page (in the blog administration) and add what you want. I suggest Pages, Categories and Links if you want to keep the feel of Simpla, as it were. Keep tuned for more.

Anything you want to add, ask or tell? Feel free.

I’ve begun making some small changes to the Simpla Theme, in order to get something looking *just* like I want. I’ll share my changes, and also the code if somebody asks for it. For now this is filed as work in progress. And there will be progress.

Here are the things I did to change the theme as it looks now (2009-01-04T20:59:12+01:00). Increase / change font size and screen real estate. Flip the sidebar to the left. Fix logout from near comment field. I’d love to hear if you like / dislike the changes.

Change font size

First order of business is to increase the text size, because I’ve seen what it helps on some devices. The code changes are from:

13
14
15
16
17
18
19
20
21
22
23

body{   
        background:#fff url(./images/bg.png) repeat-x;
        border-top:5px solid #333;
        color:#555;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size:62.5%;
        line-height:1.5;
        margin:0;
        padding:0;
        text-align:center;
}

Change relevant line to the following:

18

        font-size:12pt;

Then remove lines 30 and 36 from the following block:

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#wrap{  
        margin:0 auto;
        text-align:left;
        width:76em;
}
content{
        font-size:1.2em;
        float:left;
        padding:1em;
        width:40em;
}
#sidebar{
        font-size:1.1em;
        float:right;
        padding-top:2em;
        width:20em;
}

That is, these line should be removed:

30

        font-size:1.2em;

36

        font-size:1.1em;

These font-size changes means that we have to redistribute a bit of space in the content area. Change line 24, 33 and 39 from above to the following:

24

        max-width:80em;

33

        width:70%;

39

        width:25%;

Flip sidebar to the left hand side

Next step is to flip the sidebar to the left hand side, just because I can. Change line 30 (or 31 if you didn’t change the font-size like above from the first block of code) to the next line:

29
30
31
32
33

#content{
        float:left;
        padding:1em;
        width:70%;
}

30

        float:right;

Minor fixes needed for Wordpress 2.7

Logout link in comment.php needed updating because of the new security measures in Wordpress. If this isn’t done, you won’t be able to log out from the link beside the comment field. Find and replace first block of code with the second block of code:

76

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Logout &raquo;</a></p>

76

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>