HTML5 UP

HTML5 UP — Collection of beautiful templates using HTML5 and CSS3.

Are you using WordPress' Post Formats feature?

If you have upgraded your WordPress installation to the latest version (right now, it’s Version 3.1), you can take advantage of its “Post Formats” feature. So, what is it anyway? WordPress Codex explains:

A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. The Post Formats feature provides a standardized list of formats that are available to all themes that support the feature. Themes are not required to support every format on the list. New formats cannot be introduced by themes nor even plugins. The standardization of this list provides both compatibility between numerous themes and an avenue for external blogging tools to access to this feature in a consistent fashion. In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

This feature might be useful if you want to “format” your blog posts, especially when you want to have different output format from your WordPress theme. Just think about Tumblr service. Tumblr is very easy to use when you want to make a kind of item collections. Sometime you want to embed a video, post a link, make a regular blog post, or even embed an audio file. If you want to create a new post, you will have something like this:

body_class() for WordPress Theme Designer

I just upgraded my WordPress engine to the latest version. This new version offers some improved and new features. One of them is about body_class() function. Nathan Rice has a definition about this:

The body_class() function operates in nearly the exact same manner as the post_class() function that was introduced in WordPress 2.7. The only differences are the classes it generates. The body_class() function will generate the classes mostly based on where your viewer is on your site.

I used post_class() when it was introduced in WordPress 2.7. This body_class() new function is a great addition for WordPress theme designers. Well, actually it’s not only for WordPress Theme designers, but it’s more for those who want to have/do more on the template. We can have some automatically generated HTML tags like these:

  • <body class="single postid-12">, or
  • <body class="page page-id-9 parent-page-id-0 page-template-default">, or
  • <body class="page-template page-template-tutorial-php logged-in">

See the patterns? Jump to Nathan Rice’s blog posts to read more details. In short, if you want to use this function, just modify your <body> tag. Change it into <body <?php body_class(); ?>>. That’s it!

New design for this blog

I have been very busy in the last few weeks, many things to do. I needed to recharge my energy. And this is the result: a new design for my blog. I created this theme for fun, at least to keep my mood in balance, to bring my mood back to the other design work.
After upgrading to WordPress 2.7 few days ago, I wanted to have some changes here, especially by taking advantages from new features introduced in the latest WordPress, e.g. built-in threaded comment. Here are some notes on my new blog design.

Template tags

Still related to template tags, I try to take advantage from the way WordPress produces CSS selectors. Here is an example. Open index.php in default theme folder, you should see this for the entry loop:

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

The code above will produce something like this:
<div class="post hentry category-services category-sites category-www category-webdev tag-htaccess tag-facebook tag-linkedin tag-service tag-twitter tag-url" id="post-1026">
Do you see the pattern? It will produce some post classes on the entry data (categories and tags). This function is called post_class(). By this, we can customize how each entry (inside the loop) should be displayed, just work with the stylesheet.
If you want to make you theme compatible well with WordPress 2.7, just head to Migrating Plugins and Themes to 2.7 article at WordPress Codex. There are some other useful information for theme designers — and also for you as bloggers.

WordPress 2.7, Upgrade, Plugins and Some Other Notes

I just upgrade my blog to WordPres 2.7 stable release, code name “Coltrane”. Since I have been using WordPress 2.7 branch — I only upgraded from WordPress 2.7-RC2 released yesterday. And, the built-in core updater is VERY useful. I took only less than 10 seconds to upgrade. Nice!
wp27-upgrade1 wp27-upgrade2
So, if you’re using WordPress for your blog/website, it is time to upgrade. You’ll love it. :) As usual, if you do not want to take risk, backup your database first. Just in case you want to go back to your “current” WordPress version. After that, get WordPress 2.7. Anyway, related to this new version, if you have time, there are some notes. At least, these are for me. It might work for you too.

Videoblogging, anyone?

I decided to start a videoblogging now. When I am with my camera digital, sometime I capture videos and photos. So, why not bring the videos online? I know it is probably not popular — especially in Indonesia. But, why not?
After doing comparison steps among some video hosting providers like Vimeo, YouTube, blip.tv, Yahoo! Video, Google Video, etc, I decided to host all my videos to Vimeo and embed to my videoblog. I capture all videos using both camera digital and my mobile phone Nokia. Just in case you find a low-quality videos, you know the reasons. :)
My videoblog is built using WordPress and Viper’s Video Quicktag plugin with template modifications — also some other plugins. Right now, not every video has a story/descrption, but I will add some later. Okey, here is my videoblog URL: http://video.orangescale.com

Running on WordPress 2.7 branch

I just upgraded my blog to WordPress 2.7-beta1. I took the risk to use the beta release. The upgrade process run smoothly without any issue. The biggest changes are on the Dashboard interface. It took for few minutes to explore the brand new design. But, since I have started using WordPress from the Subversion, I have no problem with that.
There are som new settings and the more handy dasboard. Some personal highlights:

  • Quick access links — expand the link groups. If you think the navigation eats too much space, you can easily move to the icon-style navigation.
  • Hide/show menu elements — For example, when viewing list of comments, you can easily hide the details you don’t want to see e.g. comment posting date. There is a “Screen Option” link on the top navigation on some pages.
  • Quick entry edit — If you only want to edit the title, post status, author, password, categories, tags, comment/trackback and timestamp, you do not need to edit using an entry screen. Just click on the “Quick Edit” link, and save. If you’re using Manageable plugin, you know about this feature. It’s built-in now.
  • Threaded/nested comments — Settings are available from dasboard. You can have upto 5 levels of depth.
  • Paged comments — you can now break comments into pages. Remember WordPress Paged Comments Plugin?
  • Closing comments for older entries
  • Plugin Browser/InstallerI wrote about this before.
  • Date/time-related settings is easier to understand — You can select from the pre-defined values or create custom formats.
  • Sticky post — If you like to have a sticky post on the front page, you can have this feature from the core. You can have this feature using WP-Sticky plugin.

Anyone using the beta version? If so, you should see more new features/improvements there… or probably some bugs.
I like it so far. And, for WordPress theme designer, it’s time to learn about new template tags and structure. Right now, I am still using WordPress theme built for 2.6.x, will modify it when I’m using the new features. Congratulation for WordPress developers!

Set the order of WordPress Pages

Using WordPress, we can make non-post content easily. This non-post content is known as “Pages“. It is also easy to display the created pages, using wp_list_pages template tag. We can also manage the order of pages — when displayed in our blog — using sort_column argument inside wp_list_pages. For some people, it should be easy. But, can we do that in easier way? Yes, we can.
There is a plugin called My Page Order. It will help us reorganize our pages, especially when we have many pages. We can do it using drag-and-drop interface.
We can also manage the page order of sub-pages (if any). I use this plugin for my blog (using WordPress 2.5.1), and it looks good.

Modifying WordPress custom database error connection page

Database connection has a big role when we build using a dynamic webpage. To be more spesific, if we’re using WordPress it’s always a good thing to have our database connection alive. But, for some technical situation, database connection might be dropped. Like or not, this is the situation we might have.
To deal with high-traffic website, there is a WordPress plugin (note: we’re talking about WordPress here) called WP Super Cache. This plugin will help your WordPress installation to deal with major traffic, to keep our site alive e.g. when our site got a massive traffic from site like Digg or Slashdot. When there is a failure on MySQL database connection, there will be a page presented informing about problem on establishing database connection. A page that we want to avoid. The worst thing is that when this ‘temporary’ page is indexed by search engines.

WordPress MU 1.3

Few days ago, WordPress MU 1.3 was released for public. This latest release is a sync of WordPress 2.3.1. So, many new features offered by WordPress 2.3.1 will be also available in WordPress MU environment. Great!
Here are some features offered by this release:

  • Better admin controls for the signup page. It can be disabled in various ways.
  • Upload space functions have been fixed.
  • The signup form is now hidden from search engines which will help avoid certain types of spamming.
  • Profile page now allows you to select your primary blog.
  • Database tables are now UTF-8 from the start.
  • If you’re using virtual hosts, the main blog doesn’t live at /blog/ any more.
  • The WordPress importer now assigns posts to other users on a blog.
  • A taxonomy sync script is included in mu-plugins but commented out. It hasn’t been tested much but if your site has many hundreds of blogs it might be worth spending some time on a test server. Replicate normal traffic patterns and see if the server can cope with the upgrade process. If not, then look at the sync script, uncomment it and iterate over all your blogs with a script.

Those features gives me reason to upgrade WordPress MU-powered sites I maintain. If you follow my blog, you probably had heard that all Asia Blogging Network channel domains (14 domains!) uses WordPress MU. For the first step, I think I will dig the features first, checking the template tags (I hope all current template tags are compatible with WPMU latest version), checking plugin compability, and finally… upgrading. I hope I can finish all the work within this week.

Handling error when WordPress plugin functions are not available

When we build a WordPress theme, sometime we need want to add more features using WordPress plugin. For example, we want to display commenter’s avatar from Gravatar service. Because we (as the theme creator) want to make our theme can handle Gravatar plugin by default, we directly put plugin function inside our theme file — to be more spesific inside comments.php.
If we share our theme (someone uses our theme), and his/her WordPress installation does not have Gravatar plugin installed, the theme might be broken. There will be an error. Single page (where the gravatar/comment should appear) will stop loading. Why? Because there is a gravatar plugin tag/function, but the plugin is not available.

Another thing, you downloaded a free theme, and you want to add gravatar function by yourself. So, you downloaded the Gravatar plugin, put plugin tag, and voila! All works. But when this plugin is deactivated (probably when you upgrade your WordPress installation) and you forgot to activate it again, your theme might nor working well. So, what’s the solution? It’s pretty simple: use the conditional tags. Okey, we’ll use Gravatar plugin as the example.

Leave your contents naked, undressed

Manekin picture
When we post an entry in our blogs, we do some content formatting. For example, you use <strong>, <em>, etc. But, you probably ‘beautify’ your content using another methods. For example, I see blogs when they use inline formatting rather than using stylesheet. In its post, I can see something like this:
<font color="red">Vestibulum ante ipsum</font> primis in faucibus orci luctus et ultrices posuere cubilia Curae; <font size="18">Cum sociis natoque penatibus</font> et magnis dis parturient montes, nascetur ridiculus mus.
I will stop here. I am sure you know what I mean here, right?
“What’s wrong with that? The output is fine!”. Exactly, you can have exactly what you want right now. But what if we bring this to a next level?
Long time ago, I had a friend asked me to help him on redesigning a blog. He wanted to have dark theme. When he asked for a help, he used a ‘white’ theme. Sounds easy, right? Well, it should be easy, IF he left his content unformatted. What made it more difficult was that the titles also had ‘style’.
For example, in a blog template, you will see something like this (default):
<h2>Your title goes here</h2>
And, what I saw was:
<h2>Your <font color="red">title goes</font> here</h2>
It might not be a “nightmare” if you do not have many posts. But, what if you have many posts? What if you have hundreds of posts? In some cases, I still use inline formatting, as long as ‘the content will be fine when I use another design’.

Zookoda, your blog's friend

Zookoda logo
If you are a blogger, do you have a plan to have these features for your blog?

  • You want to build traffic and readership to your blog.
  • You want to send announcement to your blog reader on a certain event. Not always related to blog, but information you considered as “important” or “they’d better know about this”.
  • You want your readers to subscribe to your RSS feed. Once they are subscribed, your readers will received an update directly to their email inbox.
  • You want your readers put information you need. Not only email address, but also some other fields e.g. mailing address, city, country, etc.
  • You want to do those things above easily, from a single account, from a friendly interface.
  • You want them to be hosted by a service, because you do not have your own web hosting account.
  • You want to have a professional look.
  • You want to build traffic and readership to your blog.
  • You want to have a report for each feature.

If you want to have something like I mentioned above, you should try Zookoda, blog email. You can get all those features by registering to Zookoda. And, the best thing that it’s free! For its rich features, Zookoda is a blog email. It is a solution for your blog.

WP Themes: Umalas and Chipshot

Didats Triadi, an Indonesian designer, released a WordPress theme called Umalas. Great work Didats! When I visited his blog, I found a link to “another Umalas theme”. The new theme called ChipShot can be downloaded for free at blogging themes, a free blog template collection.
I downloaded the two templates. I am 10,000% sure that Umalas is originally created by Didats Triadi. When I tried to compare the stylesheet, images, I found that they are too similar, even the file names!
Well, you know who the original author of that theme. They are the same, only in different name… –sigh.

List pages in WordPress

WordPressWordPress as a great capability to handle non-blog posts. You can easily create a page, assign certain pages under parent page, and more. The next question: how to display list of pages easily?
The basic tag to produce list of pages created from your WordPress is like this:

<?php wp_list_pages(''); ?>

Using the simple code above your will have this:

<li class="pagenav">Pages
<ul>
<li class="page_item"><a href="#" title="Page name">Page name</a></li>
<li class="page_item"><a href="#" title="Page name">Page name</a></li>
<ul>
<li class="page_item"><a href="#" title="Sub page name">Sub page naem</a></li>
<li class="page_item"><a href="#" title="Sub page name">Sub page naem</a></li>
</ul>
</li>
<li class="page_item"><a href="#" title="Page name">Page name</a></li>
</ul>
</li>