Customizing Simpla theme
November 20th, 2007

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!







