Forever is a wedding WordPress theme available for WordPress.com (here’s the demo). On its homepage, it features a slider on top with big images and headline that links to a single post.

Now, there are many ways done by themes to add a post to a slider. One way is to create a specific slider custom post type. Another is to add something to the post’s custom field. Forever theme shows us an easier way to do it:

Featuring posts in a slider on your home page is easy. You just need sticky posts with Featured Images. Every sticky post you have (up to 10) that has a Featured Image (at least 887 pixels wide) attached will show up there. Easy!

Easy indeed! Sticky post and featured image are both built-in features of WordPress, so there’s a good chance that users are already familiar with it. There’s no need to create separate options, just a couple familiar steps on the Edit Post dashboard area and the user is done. I bet the ordering of the slider can be done simply by changing the post’s date too, so there’s no need to create another interface for it.

This is simple, familiar, and easy. Good idea.

Reddle is a theme made by Automattic for WordPress.com users (no .org release yet, but there’s SVN). Here’s a demo you can check.

The theme allows for one-column and two-column layout. However, instead of having a select layout option in a theme options page, Reddle chooses the layout by adapting to the content of the user’s sidebar widget areas. If the widget areas are empty, then it shows a one-column layout. Otherwise, it shows the widget(s), hence a two-column layout.

That is a smart, logical idea that can be extended to more layout options. Want a three-column layout? Add the second sidebar to the available widget areas. If it is filled, automatically change to a three-column layout.

The idea here is to make use of WordPress’ built-in features and settings, whenever possible, instead of adding another theme option. I like that.

Tale from the dinosaur era

Once upon a time, Lotus 1-2-3 was the world’s premiere spreadsheet application. It was the first killer application for IBM PC, and its ground-breaking functionality helped convince the corporate world that personal computing was the way to go.

Trying to maintain its lead, Lotus wanted to upgrade its product for the next 3.0 version with plenty of new features, including 3-D spreadsheet. They also wanted to conquer the market more by creating Symphony, an integrated software that would include word processing, spreadsheet, charts, similar to what the MS Office suite is today.

They worked really hard for 18 months trying to build both product while keeping up with the DOS memory limitation of 640 kilobytes and the up-to 16 MHz Intel 80286 processor (yes, this is a story from the ancient times). Their strategy, basically, was to build for the most used hardware at that time. Intel already started shipping 80386 processor, but it was deemed too expensive with too little market to pursue.

Try as they might, their strategy just didn’t work. The hardware limitation was too strong, so they wasted a lot of time and had to cut down features. To add insult to the injury, by the time their softwares were released, hardware prices were down thanks for Moore’s Law and everybody had 80386s with 2 or 4 MB of RAM! Lotus was optimizing for nothing, and their softwares were out-of-date.

From that time Excel started to take over the market, because Microsoft optimized it for the better hardware and were patient to wait until the prices catched up with their software requirement. 1-2-3 and Symphony never recovered from that blow and eventually got discontinued.

Moral of the story

HTML5 and CSS3 allow us to do amazing things. The only downsides of not using them are that browsers support is not yet perfect and we still have to cater to awfully inadequate, 10 years old browser.

Now, do you want to be 1-2-3, or do you want to be Excel?

You can spend hours working on old browser compatibility, or you can spend that same amount of time making amazing themes using HTML5 and CSS3. By the time you’re done, there’s a pretty good bet that modern browsers will be better, not worse. Mozilla now adopts a rapid release policy for Firefox so they can update it much faster with better HTML5 features. Google already did that first with Chrome.

Browser support might be imperfect, but they’re good enough most of the time. There are graceful degradation and progressive enhancements techniques that can be used.

Also, let’s just admit that HTML5 and CSS3 make web development fun while dealing with old browser bug sucks big time. They’re the standard of the near-future and there’s no other alternative to worry about. The choice is obvious as far as I’m concerned.

TL;DR

Yes.

Further Reading

Joel Spolsky’s Strategy Letter VI, where I first read the Lotus 1-2-3 story.

A long time ago, a bunch of designers were hired to design templates for Blogger, the biggest blogging platform at that time. These were not just your regular designers. Among them are Douglas Bowman, Dave Shea, Dan Cederholm, and Jeffrey Zeldman. Clearly an all-star designer ensemble.

The task itself sounded simple on paper. I mean, who among us hasn’t created their own free generic themes? If the number of the available themes on the WordPress Free Themes Directory is any indication (1,400+ themes now), we can safely say that plenty of people are capable of creating a generic theme.

However, Zeldman himself admits that it was a really hard design job and he felt that he failed at the task. Why so?

Because they have to design in absence of content.

Creating a generic theme is easy, but making sure it works with all kind of contents people use it with is mighty hard. Design, after all, is problem solving. If the problem itself can’t be well defined, as is the case with designing a generic theme, how are we going to find a solution that fits all?

For example, a lot of themes have a horizontal menu on top. This is about as generic as it gets. Some people might put a few items on it. Some others will have a lot, some will have none, both potentially breaking the design. How are we going to deal with all this? It might be possible, but it certainly isn’t easy. Compare this with designing for a particular website where the number of menu items is well defined.

If we are to create a truly great generic themes, then we will have to face the near impossible task of covering all these use cases.

Zeldman once said that:

Content precedes design. Design in the absence of content is not design, it’s decoration.

Lorem ipsum text, or the Theme Unit Test as we have it in the WordPress world, can’t exactly be called content. Jason Fried of 37Signals said the following about dummy texts:

Lorem ipsum dolor has long been known as the designer’s best friend. We think it should be your enemy. Using lorem ipsum dolor reduces text-based content to a visual design element (a “shape” of text) instead of valuable information someone is going to have to enter and/or read.

The Unit Test itself is useful to test for the most common use cases, but it is not enough for a truly great theme. I don’t think it’s even possible to create that perfect dummy.

So what are we to do?

The best option is to abandon creating generic themes altogether. There are no shortage of those in the Theme Directory, and it’s better to spend our time creating content-specific themes. Photoblog themes, travelogue themes, coming soon page themes, to mention some. We do not work with a specific content per se (we don’t know if the photoblog theme is to be used for wedding or landscape photographers, for example, which would have different requirements), but at least we have a better definition of the problem compared to creating a generic theme.

Furthermore, it can be a good idea to design more content-specific Theme Unit Tests. A Unit Test for photoblog themes will contain a lot of big images and less text, while a Unit Test for magazine/news themes will have a mix of contents with varying categories, thumbnails, authors, a lot of posts in a single date, and so on.

Further Reading

• Jeffrey Zeldman: What Every Web Designer Should Know — A Better You At What You Do, the source of the Blogger story.
• Blogger Classic Template Store. A list of Blogger templates made by the designers above.
• Content Precedes Design. Good discussion in the comments area.

Twitter just launches its own official Twitter Button, and you can create your own here. It’s really simple and there are a couple of options you can pick:

• Username to follow
• Light or dark background color (this affects the button’s color)
• Show follower count
• Language

The resulting HTML example:

<a href="http://twitter.com/hafizrahman" class="twitter-follow-button" data-show-count="false">Follow @hafizrahman</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Not visible on the Twitter Button page is the alternative script, using IFRAME:

<iframe allowtransparency="true" frameborder="0" scrolling="no"
  src="http://platform.twitter.com/widgets/follow_button.html?screen_name=hafizrahman&show_count=false"
  style="width:300px; height:20px;"></iframe>

You can dig deeper by reading the complete Follow Button documentation. Especially worth reading are the parameters explanation and the FAQ section.

Once you get your script you can simply paste it to your desired theme template files. A good place is the end of a post in single.php, above the comments area.

You can also add this button to your RSS feed. The simplest way is to use Yoast’s RSS Footer plugin and paste the button script there. I’m using the iframe version and it works nicely.

If you’re coming from my old post, here’s a more updated (and easier!) way to get your custom query working.

The key thing is not to mess with $wp_query. If we want a custom query, then it’s better to create a new variable for it.

<?php
// My custom query for the homepage of wplover.com
$wplover_home = new WP_Query('cat=-7&paged=' . $paged);
 
while ($wplover_home->have_posts()) : $wplover_home->the_post(); ?>
 
<h2 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
<!-- the rest of the post stuff here -->
 
<?php 
endwhile;
if(function_exists('wp_pagenavi')) { 
	wp_pagenavi( array(
		'query' =>$wplover_home   
	)); 
}
?>

And that should do it. The important things are:

• The paged parameter
• The loop start now uses our query variable: $wplover_home->have_posts() and $wplover_home->the_post() instead of just have_posts() and the_post()
• Inside the loop, though, we don’t need to use the query variable. It’s the_permalink() and the_title(), not $wplover_home->the_permalink() and $wplover_home->the_title().
• PageNavi now has a ‘query’ parameter, enter our query variable’s name so the plugin detects it correctly.

This is the actual code running here, so I can confirm that it works, tested with version 2.74 of WP-PageNavi.

One of the nice things about creating a custom loop is being able to specify how many posts you want, using the showposts parameter, like so:

$feat_loop = new WP_Query( 'showposts=12&category_name=featured' );

However, it is possible that this query does not return a total of 12 posts (for example if you have less than 12 posts under the Featured category). To get the actual count of returned posts, you use this:

$total_returned_post = $feat_loop->post_count;