Many bloggers out there (including me) use the JAW Popular Posts widget plugin, that displays the most popular post somewhere in the sidebar. This widget requires Popularity Contest plugin in order to run. The problem is that Popularity Contest does not run on WordPress 2.5 (it causes a fatal error when activated). The fix is very easy (you just need to edit one file).

If you cannot wait until Alex King releases the next version of the plugin, you just have to download the latest version (1.3b3) of the plugin and

• open the popularity-contest.php file with your favorite editor
• find line 59 and replace

  require('../../wp-blog-header.php');
  

  with

  require('../wp-blog-header.php');
  

• upload the file to wp-content/plugins/popularity-contest (or where the plugin files are located)
• activate the plugin

If you are installing Popularity Contest for the first time on a WordPress 2.5 installation, you have to create some database tables first. Extended instructions on how to manage it can be found here.

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

Many users have been using the Ultimate Tag Warrior plugin in their WordPress installation to have tag management in WordPress versions before the latest release 2.3. The problem is that version 2.3 does not support the UTW tags. There is an option though to import UTW tags in the built in tag system. Remember to import tags in parts of 1500 tags (if you have more than 5000 tags). After importing the tags you can add the tag cloud widget in your sidebar.

If you want to embed the tags in your theme, you need to modify index.php and single.php. Just copy the following code

<?php the_tags(‘title’, ‘separator’, ‘end’); ?>

and paste it under the <?php the_content(); ?>. Index.php is the main page of your blog. Modify single.php if you want tags to appear also when viewing single post pages. Where title, write what you want to appear before tags (in my blog that is Tags:), where separator write what you want between tags (here it is “,”) and where end write what you want to appear after tags (I’ve left it blank as I do not want a word after my tags).

WordPress 2.3 is out for a while. For the past 4 months I have been using Wordpress 2.1.3 for Typpz Blog. After extended back-ups (database export, contenet files etc) and plug-in deactivation, I updated the blog to Wordpress 2.3.1! All plug-ins worked after reactivation, except the post listing plugin which is listed in the WordPress site as non-compatible with the latest version of the blogging platform and the ultimate tag warrior which in not needed as the new Wordpress comes with built-in tag support. Tags were not imported as they should from Ultimate tag warrior, so I have to tag my posts again.

I have to say that the blog now corresponds much faster. I also liked the update notifications for new versions of the installed plugins. I recommend to everyone to upgrade to Wordpress 2.3. Remember before upgrading: Backup, Backup, Backup (few clicks can save your blog in case something goes the wrong ).

I wrote a post in the past about the basics of XML structure and how to build a DTD to define your document type. DTDs describe well how elements are arranged in a document but say very little about the content in the document. Also any element in a document has to have a corresponding declaration in the DTD. These problems and limitations could be solved using schemas. Schemas support rules (and ability to define content) which should be followed in order for a document to be valid. For example lets say that you need to describe a city element. The schema code should look like this:

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <xs:element name=”city” type=”xs:string”/>
</xs:schema>

The xs:element element acts like the !ELEMENT declaration in DTDs. Its name declares a name and its type attribute defines the data type. The xs:string describes the data type of the element “city”. Schemas provide many more features. For example lets say that you want to describe a date element. Date should have some restrictions, for example month should be filled with certain numbers (from 1 to 12) and so on. Enhancing these restrictions in a schema is very easy:

<xs:simpleType name="month"
  <xs:restriction base=”xs:integer”>
     <xs:minInclusive value=”1″/>
     <xs:maxInclusive value=”12″/>
  </xs:restriction>
</xs:simpleType>

To sum up, schemas are more powerfull than DTDs and allow more flexible data quality control. DTDs though are commonly used and more easy to structure.

On this guide you will learn how to create a Web Photo gallery (Flash or pure HTML) in 5 minutes using Adobe Bridge and Adobe Photoshop. No Flash knowledge is needed!

1. Create a folder on your computer and name it as you like (here you will store your final files that need to be uploaded to your web site).
2. Open Adobe Bridge and navigate to the folder that contains the pics you are going to use. Using control (for PCs) or command (for Macs) select the images you want.

   

3. Click on tools -> Create Metadata Template. Fill in the fields you want and click save.
4. After the Metadata info is saved, click on tools -> Photoshop -> Web Photo Gallery.
5. When Photoshop loads, an option window opens. Choose in the first field any style you like (in the demo I used Flash-Gallery 2), but there are many. Previews are shown on the right.
6. On the “use” field in source images select “Selected Images From Bridge”. Select “include all subfolders” if your photos are placed in many folders.
7. Fill the”destination” field with the folder you created in step 1.
8. In options tab, modify banner, colors and image sizes as you like.

   

9. In the security option tab you can write something that will appear over your pics, to inform visitors that they are copyrighted and to ensure that they will not be usable in case of copy.
10. After filling the option tabs click OK to create your Photo Gallery. If you want a soundtrack to play on the background, choose a .mp3 file, rename it as “useraudio”.mp3 and place it in the folder you created in step 1.
11. Upload the folder (yes the one you created in step 1 ) to your server, navigate there and enjoy!
12. If you want to check your gallery locally, open the index.html file.

Note that if you use audio soundtrack, it is preferable that the audio file will be small to ensure fast loading times. Click here to see the demo galley in action.

Tracking the feedback from our users we decided to add some features on Typpz blog. From now on, under each post (in single post page), there will be a list with related posts to help you navigate through the blog. That helps also SEO optimization. Tags are also added to help you searching and finding the post you look for. Tags are displayed above the related posts section and the links to digg and del.icio.us. As you may have experienced when surfing around a blog, some times you make a mistake when posting a comment. We have the same problem some times, so we added AJAX comment editing which gives you 15 minutes to edit your comment after you post it. Just click the text you posted and edit it! Hope that the changes will help you and will improve your experience!

During the previous week, the new version of Wordpress (2.3) was released to public. The new version provides some great features to bloggers, like tag support and update notifications. Tag support is a great add-on (which was already used with the appropriate plug-in) that helps users and web spiders-crawlers to navigate through your blog more smoothly and easily. Update notifications is the other most expected feature. One-click updates are the dream of anyone using Wordpress. That means probably end of database back-up and ftp deletes and uploads any time a new version of Wordpress is released. Taking back-ups though should be in your timetable regularly .

The new version supports sidebar widgets by default. The problem is that many users used themes that need some plugins installed to operate properly, which means that if these plugins are not working with version 2.3 they will not be able to upgrade until a new version of the confusing plugin is released. For example, the theme I use, needs the sidebar listing plugin which does not support version 2.3 of Wordpress, so I still use the previous version of the platform.

For sure Wordpress 2.3 is a recommended update for everyone that is able to upgrade, but remember to check your stuff before you do (themes, plugins etc) and also pay attention to the official extended instructions for backing up your database and upgrading. No one wants to lose data because of luck of attention to the instructions! If you are using Wordpress 2.3 or have tested it, feel free to post a comment and tell your opinion about it.

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.

Here is an extensive tutorial on how you can create a great looking web 2.0 logo (like the one above that I created for the tutorial). Open Adobe Photoshop and create a new file (file>new): 4500×4000 pixels at 300dpi is a nice resolution to choose if you want your logo to be printable. It will be nice to choose this resolution also for this tutorial to have the same output with stroke points and other blending options that are affected by image size.

1. Choose the type tool and type anything you want in uppercase (I typed Typpz as you see :)). Duplicate the layer (right click on the type layer you created>duplicate layer).
2. Choose the new Type Copy layer (in my case Typpz Copy as I typed Typpz) and right click>blending options.
3. Apply Drop Shadow, Inner Glow, Bevel and Emboss (with Contour), Gradient Overlay and Stroke with the setting you see in the screenshots below.

1. Select the eliptical Marquee Tool and draw an eclipse like the one below. Create a new layer and fill the eclipse with white color (#ffffff) using the paint bucket tool. Set the opacity for the white filled eclipse layer to 30%.
   
2. Choose the Type layer (not the copy one that you were working on in steps 2-3) and click edit>tranform>flip vertical.
3. Using the move tool or your keybord bring the fliped layer exactly below the type copy layer, so letter ends are touching each other like in my logo and then right click on type layer>blending options and apply the setting for gradient overlay and stroke as you see them in the screenshots below. Set the layer opacity to 40%.

1. Now lets create the beta drop. Choose the type tool and select the Windings font. Type shift+s and then right click on this layer (its name should be “S”)>blending options and apply drop shadow, gradient overlay and stroke as you see them below.

1. Choose type tool and type beta (or anything you want) and place the layer inside the drop as in my logo. Change the text color to white (#ffffff).
2. Select the Type layer (the typpz layer for my tutorial-not the copy one!) and select layer>arrange>bring to front.

Your logo is now ready. Here you can download the .psd source file (lower resolution than the one I used for the tutorial because the default file was huge) to see the result and help you build something similar. The colors I used for the logo are printed on the screenshots. Here is the second part of Web 2.0 logo creation tutorials.

UPDATE: Video guide for this tutorial is available.