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!
Download Simpla Widgetized Theme
Tags: blog, css, internet, php, simpla, theme, Web 2.0, web design, wordpress, wordpress theme, wwwFirst thoughts: WordPress 2.5
CSS reboot is coming!
Embed the WordPress 2.3 tags in your current theme
Firefox 3 is almost here with UI intergration
Flock 0.9 Review








November 22nd, 2007 at 3:22 am
Thanks for sharing that great tutorial with us! I really love Simpla theme and its makes me happy to see it widgetized! I’ve already download it!
November 30th, 2007 at 11:58 am
Simpla Widgetized is downloaded 137 times during the last week! Thanks for supporting
November 30th, 2007 at 3:06 pm
Downloaded it too! Well done nikos! Hope you will reach 1000 downloads soon!
February 16th, 2008 at 9:18 pm
I’ve done it myself following the instructions of your tutotial…. thanks very much!
February 27th, 2008 at 2:14 am
Hey Buddy
It is great theme , you are very good with tags and top choices … very creative …:)
March 8th, 2008 at 10:34 pm
[...] i dispiaceri che mi sta dando il blog (se non lo avete notato, sono passato al tema Kubrick Simpla Widgetized dopo le continue pagine bianche in home a causa dei problemi che credo siano dovuti a K2) ho deciso [...]
March 24th, 2008 at 12:05 am
[...] in Wordpress die Widgets in der Sidebar nutzen schaut man erstmal dumm aus der Wäsche. Bei typpz gibt es eine einfache Anleitung wie man Widgets in das Simpla Theme integrieren [...]
April 23rd, 2008 at 12:12 pm
The theme modified by you work without problems… thanks man!! =]
April 30th, 2008 at 1:14 pm
[...] as long as you get used to it. Remember to check plugins and themes compatibility before upgrading! Simpla widgetized theme works great with WP 2.5 Tags: blog, internet, review, Web 2.0, wordpress, www Posted by [...]
May 27th, 2008 at 5:34 pm
[...] I crawled the InterTubes and found that the Typpz Blog experienced the same issues but contained a post showing how to make the required changes manually while also providing an updated theme with the [...]