As you may have noticed, I have changed the Typpz Blog theme. Now I use Simpla theme. I choosed it because its light, clean with pal colors and meets my needs. The drawback of this theme is that it does not support sidebar widgets which means that it does not take advantage of WordPress 2.3 or older versions with the widget plugin installed. Although it is very easy to make it support widgets (widgetize it) and use it as every up-to-date Wordpress theme. Lets see how (if you dont like the manual way you can download Simpla Theme widgetized at the end of this post).

Widgetizing the sidebar

Open the sidebar.php file located in simpla theme folder with you favorite editor on in WordPress admin panel, delete everything it has and paste the following code:

<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>

Save sidebar.php and then create a new file, name it functions.php and paste the following code (be carefull, functions.php should contain only the code below):

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

Your theme is now widgetized which means that in your WordPress admin panel, in presentation tab you can drag & drop widgets in your sidebar.
Widgetizing the sidebar caused a CSS probem with the doted lines used in the sidebar sections (there is an extra nested <ul>). You can easily fix it by modifying the following code in style.css file just after the #sidebar rules: Find the lines

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

and change them to:

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

Your theme is now ready to run and use every of the WordPress 2.3 features. I do not like the page titles used by Simpla (Typpz Blog>>Blog Archives>>Post Name). I want just the post name. To do that you have to open the header.php file, find the line with the following code:

<title>
<?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>
</title>

and change it into:

<title><?php if(is_home()) {
echo bloginfo('name'); } else { wp_title(''); } ?></title>

Adding a Header Image

To add a header image (like Typpz.com blog here) instead of the blog title, open header.php file, find the <div=header> section and change the code in it to:

<h1><a href="<?php echo get_settings('home'); ?>/"><img src="URL" alt="logo" border="0" /></a></h1>
<p class="description"><?php bloginfo('description'); ?></p>

where URL put the location of your header image!

Other fixes and addons

If you write long posts you probably need a “goto top” button at the end of your pages. Open index.php file, find the line <?php endif; ?> and paste the following just below that line:

<p align="right">
<a href="<?php the_permalink(); ?>/#">TOP</a>
</p>

As I have posted you can display the WordPress tags under each post.

Download simpla theme widgetized! Simpla is licensed under a Creative Commons Attribution-ShareAlike License, which means that you can use Simpla widgetized for free and just give a link back to Phu and me !
After you download the theme, you’ll need to extract it to your /wp-content/themes/ directory. Then log into WP and activate the theme from within your presentation panel. Both Simpla and Simpla Widgetized use valid XHTML and CSS!

Download Simpla Widgetized Theme

After nine months with this theme, I think its time for a CSS reboot. The new theme will be much simplier than this and much more light which means less javascript, cleaner and minimal look, stylish icons and less time to load. You can see some screenshots in the image above to take a look on how Typpz Blog will look in few days. The theme is customized, widgetized and ready to go, but I have to extremely check the plugins to ensure maximum compatibily before I launch it so I am patient .

Favicon is the shortcut icon that is shown next to the url of a website or next to site’s name in browser tabs. You can see our favicon in the screenshot above. To create a great favicon you should consider these:

1. Select the image you want to use for your favicon and trim part of it so you have a square part of the image (for example if your image is 450×400px trim 50px so it is 400×400px).
2. Resize the square image you want to use as favicon to 16×16px.
3. Save the shortcut as .gif file as it is the most browser friendly format for favicons.
4. Name your shortcut favicon.gif and upload it to your root folder as some browser recognise the file named favicon as shortcut icon by default.
5. For best results and for having a favicon compatible with all browsers that support shortcut icons place the following code anywhere between your <head> and </head> tags:

<link rel="shortcut icon" href="URL" />
Replace URL with the path where you stored your favicon.

The sidebar of our blog theme uses a javascript script which gives each user that visits this blog an option to see the sidebar widgets in the way he likes, or even close them. To see what I mean check the video and try it by yourself.

As we love web standards, we did not use the code that Youtube offers for embedding videos. This code contains the embed tag which is non-standard and does not validate as xhtml. If you want to embed a youtube video in your blog or site use this

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/moviecode" width="400" height="326"><param name="movie" value="http://www.youtube.com/v/moviecode" /></object>

The moviecode is a code found in each youtube video adress and is after v= until the first ampersand (&). For example in this URL http://www.youtube.com/watch?v=xmHHjUZPyMY, the code is xmHHjUZPyMY. Using this code Typpz blog is still using valid XHTML.