If you have an iPhone, you will probably have came across webclip icons.  Webclip icons are the icons that apear on your iphone homescreen when you bookmark a web site. It is very easy to create a webclip for your own web site. Let’s see how:

1. Create a 57×57 png icon with your logo or whatever you want.
2. Save the image as “apple-touch-icon.png”.
3. Upload the image to the root folder of your web site (not the root of your server, the root of your site).
4. Do not mind about designing a glossy icon because MobileSafari (the browser of iPhone) will create the glossy effect by itself.

You can see the webclip I created for Typpz blog on the screenshot. As I mentioned glossy effect and round edges are created by Safari, I just uploaded this image.

Every blog uses rss syndication, which means that it publishes a feed that can be “grubbed” by everyone (human or aggregator). In simple words, the feed is your blog’s content, without the CSS and the style. Readers can read your posts without visiting your blog, by using feed readers (like Google Reader) or by visiting websites that aggregate blog content (like technorati). whether we need blog search engines like technorati is another issue, that will be discussed in another post.

Most blog platforms (like WordPress or Blogger) publish feed for your blog by default. Although the built-in solutions work fine, they do not offer many options for customising your feed. There free solutions though, that publish a feed for your blog and offer many customising options. The most used one is Feedburner. After being bought by Google, Feedburner offers all services for free. You can add your logo on your feed, add links to social sites like digg, add a creative commons license or even advertisement.

Many users prefer to read blog content via feed readers, so it is better to publish full articles to your feed and not just the excerpts. Putting your logo on your feed makes it more professional looking. Remember to double-check your posts before clicking the “publish” button, because most times feeds are being updated really fast and you do not want your post to appear to all those aggregators with mistakes or wrong images!

Solutions like Feedburner, ping automatically the most common used blog indexes. Publishing a feed though, does not mean that you ping search engines too. Using xml sitemaps is the best way for doing so. Add your feed to as many blog indexes as you can (many indexes like technorati find blogs with their own crawler).

Last but not least is the way you offer your feed through your blog. Up-to-date browsers like Firefox 2, Safari 3 and IE7 show the feed icon when a site uses syndication. Putting a feed icon somewhere in your blog is a nice way though to inform readers about your feed. For compatibility with older browsers and text-only browsers (yeah there are some text-only browsers for Linux) put also a “Subscribe to my Feed” link. Using Feedburner for feed publishing will give you a feed-url like http://feeds.feedburner.com/name-you-choose, but if you have access to your server’s DNS settings, you can publish your feed via Feedburner, using a url in this form: http://yourdomain.com/feed.

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.