Christian Steinert

Integrating social media services in your website design is vital if you want to make it easy for readers to share your content. While some users are happy with the social media buttons that come built into their design template, the majority of WordPress users install a plugin to automatically embed sharing links on their pages. Many of you will find that a plugin does exactly what you need; others not so much. Some are poorly coded, and most include services that you just don’t need. And while some great social media plugins are out there, they don’t integrate with every WordPress design.

If you aren’t comfortable editing your WordPress templates, a plugin is probably the best solution. If you are comfortable making a few edits to your theme, then consider manually integrating social media so that you have more control over what services appear on your website.

Today, we’ll show you how to manually integrate the three most popular social media services on your website: Twitter, Facebook and Google+. First, you’ll learn how to integrate Facebook comments on your WordPress website, to make it easier for readers to discuss your posts. Then, we’ll show you the most common ways to display your latest tweets in the sidebar, which should encourage more people to follow you on Twitter. Finally, we’ll show you how to add sharing buttons for all three social media services to your home page, posts and pages.

Please make sure to back up all of your template files before making any changes, so that you can revert back if something goes wrong. Testing your changes in a non-production area first would also be prudent.

Integrate Facebook Comments On Your Website

Because most people are signed into Facebook when they browse the Web, enabling Facebook comments on your website is a great way to encourage people to leave comments. It also curbs spam. While many solutions purport to reduce spam comments on WordPress, most are either ineffective or frustrate visitors by blocking legitimate comments.

Feature-rich commenting solutions such as IntenseDebate and Disqus have benefits, of course, because they allow users to comment using Facebook and a number of other services; but before visitors can comment, they have to grant access to the application, an additional step that discourages some from commenting. By comparison, integrating Facebook comments directly enables visitors to comment with no fuss. Also, this commenting system allows users to comment by signing into Facebook, Yahoo, AOL or Hotmail.

Before integrating Facebook on WordPress Mods at the end of September, I looked at a few solutions. I followed a great tutorial by Joseph Badow and tried a few plugins, such as Facebook Comments For WordPress. The reality, though, is that the official Facebook comment plugin is the quickest and easiest way to add Facebook comments to your website.

Simply follow the steps below to get up and running.

1. Create a Facebook Application

To use Facebook comments on your website, create a new comment application for your website on the Facebook Application page. This step is required, whether you add Facebook comments manually using a third-party plugin or with the official Facebook plugin.

Simply click on the “+ Create New App” button on the Facebook Application page, and enter a unique name for your application in the “App Display Name” field. The “App Namespace” field doesn’t have to be filled in for Facebook comments (it’s used with the Facebook Open Graph Protocol).

You will then be provided with an “App ID/API key” and an “App secret key.” You don’t need to remember these numbers because the official Facebook comments plugin automatically inserts them into the code that you need to add to your website.

2. Add the Code to Your Website

Next, go back to the Facebook Comments plugin page and get the code for your website. The box allows you to change the URL on which comments will be placed, the number of comments to be shown, the width of the box and the color scheme (light or dark).

You don’t have to worry about what you enter in the box because all of the attributes can be modified manually. And it doesn’t matter what URL you enter because we will be replacing it later with the WordPress permalink:

• href
  The URL for this Comments plugin. News feed stories on Facebook will link to this URL.
• width
  The width of the plugin in pixels. The minimum recommended width is 400 pixels.
• colorscheme
  The color scheme for the plugin (either light or dark).
• num_posts
  The number of comments to show by default. The default is 10, and the minimum is 1.
• mobile (beta)
  Whether to show the mobile version. The default is false.

When you click on the “Get Code” button, a box will appear with your plugin code (choose the HTML5 option, because FBML is being deprecated). Make sure to select the application that you set up earlier for your comments so that the correct application ID is added to the code.

Insert the first piece of code directly after the <body> tag in your header.php template:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Put the second line of code where you want to show the comments. Make sure the static URL is replaced with the WordPress permalink (<?php the_permalink() ?>) so that comments show correctly on every page of your website.

<div class="fb-comments" data-href="<?php the_permalink() ?>" data-num-posts="15" data-width="500"></div>

To put Facebook comments above WordPress comments, add the above code just below the line that reads <!-- You can start editing here. --> in the comments.php template. To put Facebook comments below WordPress comments, add the above code below the </form> tag (again in the comments.php template).

If you plan to completely replace your WordPress comments with Facebook comments, simply replace the call to your comments.php template with the call to your Facebook comments. For example, to replace comments in posts, simply add the code to the single.php template. Similarly, edit the page.php template to show Facebook comments on pages.

Your should now see the Facebook comments box displayed on your website. To get an update whenever someone leaves a comment using Facebook, add yourself as a moderator to your application on the Comment Moderation tool page.

Show Your Latest Tweets In The Sidebar

Displaying your latest tweets is a good way to encourage people to follow you on Twitter. The most common place to display tweets is in the sidebar, although you can add them to any area of the website.

Display Your Latest Tweets Manually

I have tried a few manual solutions for showing tweets on my websites, and my favorite comes from Chris Coyier of CSS-Tricks. His RSS fetching snippet is a quick and effective way to show the latest tweets from your account. The RSS address of your Twitter account is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx (where xxxxx is your Twitter user name). For the tweets that you favorite, use http://twitter.com/favorites/xxxxx.rss. For example, the RSS for the latest tweets from Smashing Magazine is http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag; and to display only the favorites, https://twitter.com/favorites/smashingmag.rss. Once you’ve got your Twitter RSS address, simply add it to Chris’ PHP snippet.

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=smashingmag');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>

For a more stylish way to display tweets manually, check out Martin Angelov’s tutorial “Display Your Favorite Tweets Using PHP and jQuery,” or Sea of Cloud’s “Javascript Plugin Solution.”

Display Your Latest Tweets Using the Official Twitter Widget

The official Twitter profile widget looks great and is easy to customize. You can define the number of tweets to display and whether the box should expand to show all tweets or provide a scroll bar.

The dimensions can be adjusted manually, or you can use an auto-width option. The color scheme can easily be changed in the settings area, too. Once the widget is the way you want it, simply grab the code and add it to the appropriate WordPress template.

Display Your Latest Tweets Using a WordPress Plugin

If you don’t want to code things manually or use the official Twitter profile widget, you could try one of the many plugins available:

• Cardoza Twitter Box
• Floating Tweets
• Latest Twitter Sidebar Widget
• My Twitter Ticker
• Tweet Blender
• Twitter Plugin for WordPress
• Twitter Widget Pro

Add Social-Media Sharing Buttons To Your WordPress Website

Adding social-media sharing and voting buttons is very straightforward and enables readers to share your content on the Web. Simply get the code directly from the following pages:

• Facebook,
• Google+,
• Twitter.

The buttons you get from the above links work well when added directly to posts (single.php) and pages (page.php). But they don’t work correctly on the home page (index.php) or the archive (archive.php) by default, because we want to show the number of likes, pluses and retweets for each individual article, rather than the page that lists the article. That is, if you simply add the default code to index.php, every button will show the number of shares for your home page, not for each article.

To resolve this, simply make sure that each button uses the article permalink, rather than the URL of the page it is on. To add sharing buttons only to posts, simply choose the button you want from the links above and copy the code to single.php; to add the buttons only to pages, just add the code to page.php.

To show the number of likes, pluses and retweets that an article has on the home page and in the archives, follow the steps noted below for Facebook, Google+ and Twitter below (the code for showing a sharing button on the index page will work for posts and pages, too). You can see an example of sharing buttons integrated in post excerpts on my own website WordPress Mods and on popular blogs such as Mashable.

Facebook

Facebook’s Like button comes with a lot of options. Choose from three layouts: standard, button count and box count. An email button (labelled “Send”) can be added, and you can set the width of the box, too. You can also show profile pictures below the button, choose between the labels “Like” and “Recommend,” choose between a light and dark color scheme, and set the font.

You need to add two pieces of code to your website. First, add the JavaScript SDK code directly after the <body> tag (in the header.php template). This code has to be added only once (i.e. if you’ve already added the code to show Facebook comments on your website, you don’t need to add it again).

Put the second piece of code where you want to show the Like button. To ensure that the correct page is referenced, add href="<?php echo get_permalink($post->ID); ?>" to the second piece of code. It should look something like this:

<div class="fb-like" data-href="http://www.facebook.com/smashmag" href="<?php echo get_permalink($post->ID); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>

More information on how to customize the Like button can be found on the Facebook Like Button page.

Google+

Google+ offers four sizes of sharing buttons: small, medium, standard and tall. The number of votes that a page has received can be shown inline, shown in a bubble or removed altogether.

Linking to your article’s permalink is very easy. Just append href="<?php the_permalink(); ?>" to the g:plusone tag. For example, to show a tall inline Google+ button, you would use the following code:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall" annotation="inline" href="<?php the_permalink(); ?>"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

For more tips on customizing the Google+ button, please view the official Google+ button documentation page.

Twitter

Twitter offers four types of buttons: one for sharing links, one for inviting people to follow you, a hash tag button for tweeting stories, and another for mentions (used for contacting others via Twitter). The button you need to show the number of shares that an article has gotten is called “Share a link.”

On the button customization page, you can choose whether to show the number of retweets and can append “Via,” “Recommend” and “Hashtag” mentions to the shared link.

To make sure Twitter uses the title of your article and the correct URL, simply add ata-text="<?php the_title(); ?>" and data-url="<?php the_permalink(); ?>" to your link. For example, if you were using the small button, you would use:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="smashingmag" ata-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

To show the larger button instead, simply append data-size="large" to the link. To show the popular vertical button (shown below) instead of the default horizontal button, append data-count="vertical" to the link.

For more tips on customizing the Twitter button, please view the official Twitter button documentation page.

Summary

Many WordPress users continue to use plugins to integrate social-media sharing buttons and activity on their websites. As we’ve seen, though, integrating social-media services manually is straightforward and, for many users, a better solution than simply installing a plugin and making do with whatever features it offers.

Integrating Facebook comments on your website takes only a few minutes and is much less complicated than any of the available plugins. While good tutorials are available that show you how to manually add Twitter to your website, the official widget from Twitter is the best all-around solution for most websites.

Some fantastic plugins exist for WordPress to automatically insert social-media voting buttons in your design. Installing and setting them up takes only a few minutes, although manually adding the buttons enables you to give them maximum visibility.

Remember, play it safe and make any changes in a test area first before applying the changes to the live website. I also recommend backing up all of your template files before changing anything (and your database if required). A few minutes of preparation could save you hours of troubleshooting, so try not to skip this step.

Hopefully, you’ve found this useful. If you are unsure of any aspect of this tutorial, please let us know and we’ll do our best to clarify the step or help you with it. Also, subscribe to Smashing Magazine via RSS, Twitter, Facebook or Google+ to get the latest articles delivered directly to you.

(al)

© Kevin Muldoon for Smashing Magazine, 2012.

Today we are glad to release a yet another freebie: a Twitter GUI PSD for the recently released Twitter UI update, designed by Jon Darke and released exclusively for Smashing Magazine and its readers. The PSD provides the full mockup with all layers in vectors, allowing you to scale up the design elements without loss of quality. The set includes two versions: one for personal accounts and also the new Twitter Enhanced profile page with 835×90 header image for brands and advertisers.

The set is compatible with Adobe Photoshop CS4+. All assets are redrawn in vector, all layers are labeled and grouped. You can use the freebie for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the file as you wish.

News and activity feeds are more alive today than ever before, even as engagement with their simplest format, Really Simple Syndication (RSS), appears to be waning. What were the Top 10 Most Awesome RSS & Feed Products of 2011? We offer our list below. Though some of these weren't born in the past year, all of them have made a big impact and are thoroughly awesome.

Anyone with an interest in competitive knowledge work should be aware of and give some thought to these applications. We'd love to hear your thoughts on others in comments below, too, readers. I've put the following 10 in a particular order: from the most geeky to the most mainstream.

Sponsor

10. AppNotifications

Fabien Penso's fabulous iPhone push notification app released a 3.0 version this year, but it's just the nice clean basics that make this one a winner. Input any feed, or many other sources of information, and Penso's app will push it to your phone in real time. It works really, really well and is better than ever with the introduction of the Apple Notification Center in iOS5. A double digit percentage of the stories I reported on this year came from feeds I consumed in this app. See also: BoxCar and Notifo.

9. iftt

If This Then That is a point and click mashup maker that lets you do all kinds of things with feeds of information and multiple applications. It's loads of fun, though some high-volume RSS feeds seem to overwhelm it. I wish it worked with AppNotifications above, or UrbanAirship. The ifttt recipe that pushes my Foursquare check-ins into my Google Calendar like a diary entry? That's awesome. Ifttt was recently funded by Betaworks, a story I was able to break because of another awesome feed bot - the Neubot VC portfolio tracker.

8. Flipboard

The feed reader your parents always wished you'd bring home, Flipboard finally released its iPhone version this Fall after more than a year of dominating the iPad magazine reader app market. Competitor Zite is nice and was acquired by CNN, Google's new Currents is ok, Yahoo's competitor is not so great and others are floating around too. Flipboard puts a premium on design though and wins as a result. Adoption of its new iPhone app has been breathtaking. The best way to enjoy Flipboard, though, is to populate it with a great Twitter list.

7. Summify

The computer science nerds behind iPhone app Summify have done a great job combining social engineering, smart algorithms and nice design to solve the information overload problem. If you haven't seen Summify, you should check it out. It feels related to the iPad's News.me, which is a strong contender for this spot in the list as well.

6. Path

The story behind Path seems downright smug - the company's founders reportedly turned down $100 million from Google before even launching and they walk through the wasteland of social networking healing the sick with their mere touch, but the latest version of the app is undeniably fantastic. It's like Facebook Mobile meets Instagram meets Foursquare meets Gowalla meets better design than any of the above. Expect to see a giant pile of apps try to model their design after Path's in the next year. It's a great presentation of an activity feed. It's the kind of thing that nerds and noobs can all love, too.

5. Percolate

"Percolate turns brands into curators," this new startup says. Marketers love this service and it seems to have done a great job of discovering feeds full of content and making them easy for Percolate users to add to and capture value from.

4. Feedly

Feedly rides on top of your Google Reader subscriptions and provides a great cross-platform feed reading experience on web, mobile and tablets. When you're ready to stop messing around with filters, social, recommendations, etc. and you just want to stand in front of a pipe of feeds you subscribed to yourself, Feedly is a great way to do it. (Disclosure: The author did a small amount of consulting for Feedly on launch strategy but has no ongoing financial interest in the company, beyond a glowing endorsement of said consulting services. Sorry, but it's still a feed app that lots of people love.)

3. New Twitter Interactions

Love or hate the #newnewTwitter just launched at the end of this year, the new Interactions tab on web and mobile is a great big nod to activity feeds. It's very cool to see all the relevant activity surfaced with regard to your content: you've been replied to, favorited, added to a list, retweeted. Putting all of that in one big feed is really nice and is probably one of the biggest feed changes that tens of millions of people are going to engage with next year. That will make it one of the biggest, except for...

2. The Facebook Timeline

Facebook's new Timeline feature looks at all the activities you've published into the site since creating your account and it surfaces the highlights by analyzing social activity around each event. It's awesome, if a little frightening. Now that hundreds of millions of people will become familiar with this kind of presentation around their data, they'll be all the more ready for...

1. Facebook Seamless Sharing

The biggest thing in feeds for 2011 is clearly Facebook's Seamless Sharing, or Open Graph Protocol. I think the way the company implemented the paradigm is risky, irresponsible and wrong. But it's going to pave the way for a wholly instrumented world. Today the music you listen to is streamed into your social network and profile (unless you opt-out) and in the future almost everything else you do with a machine will be, too. Every machine you use will be network-connected and will publish data onto the web. Remember when Facebook hired "my year in review" infographic artists Nicholas Felton and Ryan Case this Spring? Their work appeared in the aforementioned Facebook Timeline, but they and their thinking will help build dashboards we use to track our home electricity usage, our debit card activity, our exercise, our travel and a whole lot more in the future. It will all be pushed automatically into the network too, just like Facebook's Seamless Sharing.

Hopefully Facebook can move this ball forward in a way that allows users to make clear, informed decisions how to participate - odds of that aren't great - but either way it's likely to happen. And it's going to be very big.

Those are my list of the Top 10 Feed Technologies in 2011 - what do you think? What should be included? Is there too much Facebook here? Please share your comments below.

Disclosure: The author is building an unlaunched startup related to this sector; it may either compete or collaborate with any number of the above companies. Except Facebook, it doesn't have anything to do with Facebook.

By now you know how great the Feature Box is for growing a profitable blog.

(If not, just read this article about how the Feature Box increased our subscription rate by 51.7%).

The question is how do you create a Feature box?

We’ve whipped together some tutorials for you, but the output was simple. It worked, but some people wanted a fancier Feature Box design.

And now you can have that too!

Introducing A Brand-New, Well-Designed Feature Box for Thesis

We had our awesome designer Alex Mangini whip up a customizable feature box that you can add into your Thesis design, beginning today. Just download the files, and follow the directions.

Here’s an example of what this Feature Box looks like…

And the best part?

This feature box comes with the same great opt-in forms we’ve released over the past few weeks. It’s built-right-in, and it’s modified to work specifically with this feature box.

(See this post here to see what the optin forms look like).

Of course, they’re compatible with AWeber, MailChimp, and Get Response, and installing them into this feature box is literally just copying and pasting some code into the Thesis files.

Additionally, the instructions manual has been documented well, so anyone can install the feature box and optin forms to their site with no problem.

What do you think of this solution?

What do you think? Are you going to use this Feature Box?

Or, if you’ve already been using the feature box, how has it impacted your conversion rates?

Just try using this Feature Box for a few weeks, and let us know how it worked by sharing your results in the comments.

About the Author: Derek Halpern is the marketing guy at DIYthemes, and the founder of Social Triggers. If you liked this article, sign up for his mailing list to learn the "little psychological devices" that persuade people to buy here. You won't regret it.

Security has become a foremost concern on the Web in the past few years. Hackers have always been around, but with the increase in computer literacy and the ease of access to virtually any data, the problem has increased exponentially. It is now rare for a new website to not get comment spam within days of its release, even if it is not promoted at all.

This increase in naughty behavior, however, has spurred developers to write better code, and framework vendors have implemented many functions to help coders in their battle against the dark side.

Posted by Cyrus Shepard

SEOs don't talk about advertising much, perhaps because it's the conceptual opposite of “great content.” The truth is, advertising is the gasoline that runs much of the web. Without ad revenue, great sites we love like Search Engine Land, Smashing Magazine, and even Wired might cease to exist.

Ads are great, but as SEOs we need to present them as the commercials that they are, not the main show.

Optimizing for CTR the Old Way

Not long ago, it was common to see sites like this dominating the SERPs.

(Thanks to Michael Gray for the lead)

When Panda struck, sites like this got hit hard, time and time again. Even websites with superior content were penalized if they contained over-aggressive ads above the fold. I don't know if the site above was penalized by Panda, but I'm guessing their traffic is not as healthy as it could be, and a simple layout change would help significantly.

1. Ads as a Ranking Factor

The 2011 Ranking Factors showed a slight negative correlation between rankings and the amount of Adsense on a page.

Several Panda updates have rolled out since this data was collected, and I would expect the relationship today to be even more negative.

Although Adsense isn't the only game on the market, it's the one ad network SEOs get the most information from. Matt Cutts has said that his team sends one way messages to the Adsense team in order to help webmasters comply with Google quality guidelines.

In April, after Panda hit, Adsense changed how they advocate best practices for ad placement. Gone (or at least tucked away) were the old heat maps.

2. Panda Friendly Layouts

The new layouts specifically advocate for ads that do not push content below the fold.

These are the types of layouts that should be safe no matter what kind of ads you run. You can see earlier versions in their one-click optimizer, but these older layouts don't go very far in placing content first. Use at your own risk.

3. Balance Your Template Footprint

Ads are a component your template footprint. A template footprint is any non-unique content that appears on every page, as opposed to content that makes the page unique.

It's best to keep your ratio of unique content to footprint as high as possible. If you can't reduce your template footprint, at least place your content in the highest, most prominent place possible in order to stay out of the penalty zone.

4. Future Proof Your Ads

The new Adsense recommendations are great for this round of Panda, but what about next year? In my opinion, they represent the minimum of what you should do to avoid a penalty.

The New York Times does a good job of balancing ads against content. Their strategy neither ignores users nor puts them at risk for near-future algorithm changes.

Aggressive ads tend to alienate users, which can affect your bounce rate, time on site, pageviews and other user engagement metrics. All of these can have undesirable long term consequences. For publishers dedicated to long term profits, there is a better approach.

5. Beyond CTR – Smart Ways to Increase Ad Revenue

It's true that higher click-through rates give webmasters incentive to place ads above content. But CTR isn't the only way to increase earnings. You can optimize several other factors to your long term advantage. If you are an Adsense publisher, you are familiar with these concepts.

1. Coverage
2. Cost-Per-Click (CPC)
3. Cost Per Impression (CPI or CPM)
4. Impressions

All of these can be optimized for higher earnings. Number 4, impressions, is the most actionable from an SEO point of view. If you're producing great content and promoting it the right way, then your pageviews will soar. Here in the States, the SuperBowl will always make more in ad revenue than reruns of Murder, She Wrote.

If you sell ads, be the SuperBowl of content publishers. Produce the best content you can, and you can sell your premium ad space for top dollar.

Do you like this post? Yes No

Steve Sande and I have been collaborating on "Talking to Siri," an ebook that just recently hit the Kindle store. It's a how-to that helps you get the most done with your Siri intelligent assistant. We're sharing some of our favorite tips with TUAW readers.

Today, we're looking at Siri's ability to help you pick a place to eat, meet up with friends, and calculate your total at the end. Without further ado, here are eight ways Siri can help you dine.

1. Find restaurants. Tell Siri, "I'm in the mood for Ethiopian food," or ask "What is the best Ethiopian food in Denver?" If you ask more generally, as in the first statement, Siri looks for business near you, sorted by distance: "I found 15 Ethiopian restaurants. 10 of them are fairly close to you." If you search the city as a whole, Siri sorts by Yelp rating: "I've found 15 Ethiopian restaurants. I've sorted them by rating."
2. Get directions. Once you've decided on a restaurant, tell Siri, "How do I get to 'Queen of Sheba.'" Siri replies, "Here are directions to Queen of Sheba," transferring you to the Google Maps application, with suggested routes laid out.
3. Meet up with friends. Ask Siri, "Where is Steve Sande?" Siri uses Find My Friends to see where Steve is -- hopefully on the way to meet up with you and not too far away. Remember, you must log into your Find My Friends account to use this query. Your authenticated session will last for a good long time once you do so.
4. Understand the menu. Curious about something on the menu? Want to learn more before you order? Say, "Search for Ethiopian Injeera on the Web." Siri doesn't handle foreign phrases as well as you might hope, but Google does very good "Did you mean?" analysis, and can help you move from Siri's interpretation to a solid web search about oddball food items.
5. Calculate sales tax. Once you've eaten, say, "How much is $18.95 plus Denver sales tax?" Siri uses the local city rate to add it to your tab.
6. Add a tip. A simple Siri request returns a list of tip amounts including 10%, 15%, 18%, 20% and 25% of a given total. Say, "What is tip on $20.41?" You can also say "What is an 18% tip on $86.74 for four people?" in case you want to split the bill.
7. Find a dessert place nearby. Say, "Where can we go for dessert?" Siri searches through Yelp reviews to find mentions of desserts and lists them (along with their reviews) sorted by proximity. "I've found a number of restaurants whose reviews mention desserts fairly close to you."
8. Get home safely. Once you're done with your evening, tell Siri, "Take me home." Siri provides directions to your home address. If you say, "I'm drunk," Siri will find you taxi cab listings to help you travel in a safe and responsible manner.

Eight cool ways to dine with Siri originally appeared on TUAW - The Unofficial Apple Weblog on Thu, 03 Nov 2011 11:15:00 EST. Please see our terms for use of feeds.

One of the most bulletproof ways to convert a visitor into a subscriber or buyer is to direct them to a page that convinces them to become one.

What type of page do you need? You need a landing page, a simple page with few distractions and one main goal.

You’ve likely seen these pages in the blogosphere, but for a real-life example, look no further than the WordPress SEO series on DIYthemes.

When you use Thesis, you can create a squeeze page with ease, but there are a few crucial parts missing from that tutorial and today I’m going to expand on them.

But let’s start from scratch, and I’ll show you how to build a complete landing page system in 4 easy steps.

Step 1: Create The Squeeze Page in WordPress

Firstly, all you need to do is create a regular page in WordPress by going to your admin panel → Pages → Add new. Then, set the headline of the page and the permalink structure. You know, the basics of setting up any type of page.

Since you use Thesis, you will see an additional box towards the bottom of the screen editor called SEO Details and Additional Style.

Expand that box and look for the input box towards the bottom that says CSS Class.

For the class name, enter the word landing. For each landing page you create, make sure you do this step and set the body class to landing.

That’s all you’ll need to do for this step. Go ahead and publish the page!

Step 2: Setting Up a Bare-Bones Landing Page in Thesis

For starters, you need to set up the basic template of the landing page (or, strip away all of the distractions from the default theme).

You need to remove the header, sidebar and footer. These elements, by default, have no business being on your landing page and will only distract visitors from the main content.

Now I know that sounds complicated, but by using some of the amazing filters packed into Thesis, it’s a cinch. All you have to do is paste this function into your custom_functions.php file:

function custom_remove_defaults($content) { return false; }

function landing_page() { if (is_page('78')) {
		add_filter('thesis_show_header', 'custom_remove_defaults');
		add_filter('thesis_show_sidebars', 'custom_remove_defaults');
		add_filter('thesis_show_footer', 'custom_remove_defaults');
} }
	add_action('template_redirect','landing_page');

To target a certain landing page, you will need to change the page ID to the ID of the page you just created. As this tutorial explains, you can find the page ID by:

…One method of page identification is to hover over the “edit” link in the WordPress > Pages section.

In most browsers, the status bar in the lower left will show a URL containing the id: http://YOURSITE.com/wp-admin/post.php?post=78&action=edit.

TIP: If you want to create multiple landing pages, you can use an array to target multiple pages. Just replace the first line in the landing_page function with this:

function landing_page() { if(is_page(array('78','79','80'))) {

…and change the page IDs accordingly.

Step 3: Adding a Logo + Simple Footer

The code above works great for stripping your theme, but it makes it seem a little too empty. Your site will be left without any branding, and it may confuse visitors and make them think that they left your site.

So, we are going to bring a piece of your header back: the logo. We do not want a navigation menu or any other elements from your header back — apart from the logo. This is done to keep readers on the page, and not have them go elsewhere on your site.

Paste this function under the one we created in the last step:

If you use the Full-Width Framework, use the following code:

function landing_header() { if(is_page('78')) { ?>
	<div id="header_area" class="full_width">
		<div class="page">
			<div id="header">
				<img src="LOGO IMAGE URL" alt="DESCRIPTIVE TEXT" title="DESCRIPTIVE TEXT" />
			</div>
		</div>
	</div>
<?php } }
	add_action('thesis_hook_before_html', 'landing_header');

If you use the Page Framework, use the following code:

function landing_header() { if(is_page('78')) { ?>
	<div id="header">
		<img src="LOGO IMAGE URL" alt="DESCRIPTIVE TEXT" title="DESCRIPTIVE TEXT" />
	</div>
<?php } }
	add_action('thesis_hook_before_html', 'landing_header');

All you need to do is change the page ID (use the same ID as the last step) and paste the URL to your logo in the tag.

Next is to create a simple footer. All you place in the footer is copyright information, and other legal documents. Again, keeping things simple.

If you use the Full-Width Framework, use the following code:

function landing_footer() { if(is_page('78')) { ?>
	<div id="footer_area" class="full_width">
		<div class="page">
			<div id="footer">
				<p>Copyright © 2011 My Awesome Site</p>
			</div>
		</div>
	</div>
<?php } }
	add_action('thesis_hook_after_html', 'landing_footer');

If you use the Page Framework, use the following code:

function landing_footer() { if(is_page('78')) { ?>
	<div id="footer">
		<p>Copyright © 2011 My Awesome Site</p>
	</div>
<?php } }
	add_action('thesis_hook_after_html', 'landing_footer');

Save and upload custom_functions.php.

4. Adding Some Quick CSS

Luckily, there is only a need for a tiny bit of CSS to put this page all together.

Paste the following into custom.css:

.landing #header { background-image: none; }

.landing .page { width: 65em; }

.landing #header, .landing .headline_area, .landing #footer { text-align: center; }

All this code does is resizes the content area so the page is smaller (for readability purposes) and aligns the text in the header, headline area and footer to the center.

It will also remove the background image from the header, so there is not a double logo.

Once you have gone through those 4 quick steps, you should have a more complete landing page system for your site.

Do you already have a nice landing page on your site? Or, have you just created something great by following this tutorial?

In the comments below, feel free to show off a landing page from your blog and tell us at least one thing you are trying to accomplish with it.

About the Author: Alex Mangini is an 18 year old Thesis expert from New Jersey who creates premium Thesis skins at Kolakube.com.

Apple has officially announced its iPhone event, to be held on Oct. 4 as previously reported. The event will take place at Apple’s Cupertino Campus in California, beginning at 10 a.m. PDT (1 p.m. EDT), according to press invitations issued by Apple on Tuesday.

The invitation features a depiction of iPhone home screen icons, and the phrase “Let’s talk iPhone,” so there’s no doubt the next smartphone from Apple will be on the agenda. We’ll be sure to be there watching closely next Tuesday, and will bring you all the news coming out of the event.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• The future of mobile: a segment analysis by GigaOM Pro
• Mobile Q2: Smartphone growth surges; iPad’s rule continues
• Report: How Mobile Cloud Computing Will Change Tech

Thirteen years ago this spring, Dave Winer's UserLand Software launched a technical protocol that made it easy to publish content from one Web page onto another. (Winer was the inspiration for ReadWriteWeb and countless other blogs.) A similar protocol was employed by another blogging tool that would launch one year later, Evan Williams and Meg Hourihan's Blogger - which will reportedly now be renamed Google Blogs in the great Google Plus Rebranding of 2011. The creation of easy, democratic publishing of content from one Web interface, out onto another, was an event of epic and irreversible historic proportions. Hundreds of millions of people have now had their lives changed by being able to publish freely and easily online and the media landscape has exploded.

Things are different these days, though. The rise of Facebook and Twitter has stolen the thunder of Do It Yourself and Own It Yourself Publishing. Those little blips and quips of insight and boredom are more fleeting than blogging ever was. But out of that shallow and fast-flowing river of self-publishing has come curation. And today social media curation crosses another key threshold: market leading curation and publishing tool Storify now supports Dave Winer's original protocol for publishing content to blogs. Storify will now use XML-RPC to push permanent, search engine-friendly HTML along with dynamic Javascript to blogs built on WordPress.com, WordPress.org, Tumblr, Posterous and Drupal. Social media curation has grown up and is becoming a first class citizen of the open Web, just like blogging.

Sponsor

Storify will now allow those collections of multimedia to be published out onto the servers of the most popular blogging platforms online and their users. The content will live there permanently and will be indexed by search engines on the page.

Co-founder Xavier Damman says that HTML output directly to blogs has been the company's most-requested feature from users.

Throughout most of history, content creators were very few, content curators larger in number but still small and content consumers by far the biggest of the three groups. People like Dave Winer, Evan Williams and Meg Hourihan shook that equation up with the creation of blogging technologies, then Williams again and Mark Zuckerberg completely blew the numbers up with the enablement of hundreds of millions of new content creators on Twitter and Facebook. Now Storify will take some of the same "this is for real" technical underpinnings and attempt to bring the group of people online who are curating content into a new era of publishing as well.

[View the story "Story to tell? Storify!" on Storify]

It’s interesting to look back at our previous WordPress themes round-ups. It’s almost like looking at a visual timeline not only of WordPress’ advances in theme design, but of the rapid development in functionality of the CMS itself. The themes from year to year clearly differ in style as Web design trends have evolved. As each year passes and more functionality is added to WordPress’ core, these improvements are strongly reflected in the themes developed for it.

Once upon a time, all WordPress themes looked like traditional blogs, with basic functionality and not a heck of a lot more. But as you will see from the themes below, that original “blog” design style is clearly gone, perhaps never to be seen again. It makes you feel nostalgic.

Nowadays, user requirements for WordPress themes are very high. Users expect all themes (including free ones) to have pages for admin options built in, where you can quickly set up your website and personalize it with a minimum of fuss. With the rise of these options pages, niche-specific theme designs (such as for portfolios, blogs or magazines) are no longer required and are, in fact, few and far between.

Most of the themes below can be tailored via the options panel to be anything you want, whether a portfolio, a content-heavy magazine-style website or a basic blog. Setting one up takes only 10 minutes. This actually gave us a few problems when it came to categorizing the themes below. We spend a lot of time researching, collaborating on and writing these round-ups. In fact, it is a Smashing Magazine tradition to publish the top 100 WordPress themes from the previous 12 months (this is our fifth edition).

Portfolios, Galleries And Showcases

Portfolium (Demo)
Portfolium is a clean and flexible WordPress grid-based portfolio theme, designed in a modern and minimalist style. It is ideal for designers, artists, photographers and other creative specialists who require a professional portfolio theme.

Shaken Grid (Demo)
Shaken Grid uses the jQuery Masonry plug-in, which “arranges elements vertically then horizontally according to a grid.” The theme is perfect if you need a gallery or portfolio or just want a unique grid layout.

Big Square (Demo)
Big Square is a stylish photoblog theme with a built-in gallery that is focused entirely on highlighting your creative visuals.

Journal Crunch (Demo)
Journal Crunch is a gallery and portfolio theme with all of the features you would expect from a premium theme: easy set-up via the options page, plenty of shortcodes, built-in pagination, Twitter widgets, AJAX contact form and much more.

Paragrams (Demo)
Paragams is a lightweight theme that is built on a grid and that could be used for various types of websites: portfolios, photoblogs even online magazines.

Imbalance 2 (Demo)
Imbalance 2 turns you WordPress-based website to an attractive blog, portfolio or online magazine. This free template has a strictly modern style with a minimalist touch.

Photoria (Demo)
Photoria is a clean feature-rich theme that would be perfect as a photoblog or portfolio. It comes packaged with a variety of templates and built-in SEO (via its extensive options page), and the theme is internationalized for easy translation.

Muse (Demo)
Muse is a simple gallery theme that can be used as either a portfolio or an inspirational showcase. It comes with custom page templates and built-in SEO, and it can be combined with a ratings plug-in to create an all-singing, all-dancing showcase website.

mimiThem (Demo)
This is far and away the most basic theme in this article. But don”t be fooled: it works effectively as a quick and easy way to get your portfolio online.

Dione (Demo)
Dione is a video showcase theme that uses the custom post type feature available in WordPress 3+.

Business And Corporate Websites

Academica (Demo)
Academica was designed specifically for educational institutions such as universities and schools. It’s a flexible and versatile free theme that can be easily customized and branded for any university, academy or non-profit organization.

Rotary (Demo)
Rotary is a two-column business theme that was built with all of the fantastic features of WordPress 3.0. It is centered on the idea of running your blog as a CMS.

Vanadiumitic (the link was removed due to the suspicious code of the theme)
Vanadiumitic comes with a featured content section, a dropdown menu, subscription buttons (Twitter, Facebook and RSS), an automatic thumbnail resizer, and widgets for popular and featured posts and featured videos, all packed in a powerful framework for easy back-end customization.

Aurelius (Demo)

Gameliso (Demo)
This one’s a lovely clean theme.

Zincious (Demo)
The Zincious theme comes with a dropdown menu, subscription buttons (Twitter, Facebook and RSS), an automatic thumbnail resizer, a widget for popular posts, a featured content slider and a robust framework for easy back-end customization.

Ikonik (Demo)
Ikonik was designed as an online design store, although no e-commerce system is integrated. It could be used as a simple portal for selling vectors, icons, logos, buttons, themes and pretty much anything else.

Minimalist Themes

Expositio (Demo)
Expositio is a simple portfolio theme for photographers, designers and artists. Its integrated options help you customize the template from font to color.

Sutra (Demo)
Sutra is a minimal theme focused on simplicity, putting the writing front and center.

Extricate (Demo)
Extricate is a clean, minimal theme built on HTML5 and CSS3. The options page allows you to resize columns and specify post information.

Renova (Demo)
Renova comes with two backgrounds (full white or paper), six link colors, jQuery support for hover effects and mobile device support. The minimal style is for writers who need a simple layout without any distraction.

Feijoa (Demo)
This is a four-column layout with a simple sidebar and was designed using the jQuery Masonry plug-in.

Simply Delicious (Demo)
This minimalist theme features big images, a clean style and easy browsing: perfect for modern blogs and portfolios.

Wordfinder (Demo)
Wordfinder is a simple magazine-style theme for users who want to start a blog with a minimal layout. The theme has many layout features, including two home page styles and six colors for links and hover effects that are easily customizable via the options page.

Theophilus (Demo)
This jQuery-based, Cufon-enabled, lightweight and minimal WordPress theme was developed by Timothy Long.

Blogum (Demo)
Blogum is a simple grid-based blog theme, designed with a modern and minimalist style. It supports all WordPress 3.0 features, giving you extra flexibility.

Mini Hyper (Demo)
Mini Hyper comes with a basic options page where you can add your analytics tracking code and change the logo. Other than that, Mini Hyper is widget-ready and works in all browsers.

Min (Demo)
“No bells and whistles, just simple and to the point.” Min’s main content area is set at 560 pixels, and it has two widget-ized footer areas to handle navigation and anything else you feel like putting there.

Papaver (Demo)
Papaver is an elegant, minimal theme. You can set the content to one, two or three columns.

Codium Extend (Demo)
Codium Extend is a minimalist theme that supports all of WordPress 3+’s features and comes with support for smartphones (iPhone, etc.) and tablets (iPad, Galaxy Tab, etc.).

Delicate (Demo)
Delicate is a clean, minimalist theme with a focus on typography and structure.

Melville (Demo)
Melville was inspired by classic literature. It has no distractions; just a simple design that focuses the reader on your writing.

Fresh and Clean (Demo)

Yoko (Demo)
Yoko is a modern and flexible theme, with a responsive layout based on CSS3 media queries. The design is optimized for big desktop screens, tablets and smartphones. You can use new post formats (such as Gallery, Aside and Quote), choose your own logo and header image, and customize the background and link color.

Hybridside (Demo)
With a minimal design and simple structure, Hybridside allows writers to choose the body background and the color scheme for links. It has full support for thumbnails, WordPress menu navigation, five widget areas and a print-friendly style sheet.

Aqualine (Demo)
Aqualine is a unique and minimalist theme that has an extensive options page. Pick your own color accent, choose between thumbnails and excerpts or the full content for the main page, and more.

The Scoop (Demo)
The Scoop is a four-column minimal magazine-style theme, with a focus on elegant typography. It is ideal for content-heavy websites.

David Airey Theme
David Airey has released his old blog’s design as a free WordPress theme. As you probably know, that minimal design offers the perfect platform for your writing.

The Columnist (Demo)
The Columnist was inspired by the grid structure and typographic techniques of traditional newspapers. It was designed with a grid-based layout, an elegant typographic hierarchy and some CSS3 and jQuery greatness.

Swiss Dessign (Demo)
The four themes below, originally featured on Smashing Magazine in January, are simple yet powerful, with a touch of traditional Swiss design and layout. Their distinct style is what separates them from the other themes. They allow you to select the focus of your work, since you are the artist and should be in control of the visitor’s experience. Each theme comes with a full video overview and support for using and managing it.

Studio Dessign (Demo)

Minimal Dessign (Demo)

Style Dessign (Demo)

Simplest Free WP Theme
This is perhaps the most basic WordPress theme you’ve ever seen. It’s so basic that it’s not even worth showing a screenshot of it. But it is useful. It’s a fully functional theme that would be perfect for anyone looking for a barebones WordPress framework. It has only 83 lines of PHP and 75 lines of CSS.

Blogs And Personal Websites

Spectacular (Demo)
This theme was commissioned by Smashing Magazine and designed by Maleika Esther Attawel. It offers a warm and comfortable environment for personal musings. It comes in two flavors: HTML 4.01 and HTML5. Both German and English versions are included in the download package.

Seven Five (Demo)

Protean (Demo)
Protean is a WordPress theme from Landau Reece that allows bloggers to customise their website design for individual blog posts.

Skeptical (Demo)
Skeptical’s layout is flexible: you can display “Related posts” next to your latest posts on the home page or have a completely widget-based sidebar. You can also add your Flickr stream to the footer and showcase three noteworthy blog posts with a tag that you declare in the settings.

Graphite (Demo)
Graphite, built by Medialoot from the ground up using HTML5 and CSS3, comes with portfolio post types, two alternative home page image sliders and built-in admin settings.

Harimau Malaya (Demo)
Harimau Malaya was purpose-built as a throwback to when blogs looked like blogs. It is a simple but complete theme, suitable for every blogger out there.

Pongsari (Demo)
Pongsari, a simple and clean theme, was built using the WordPress 3+ default theme TwentyTen as a framework. It comes with support for WordPress 3+ thumbnails and custom menu functions.

Typominima (Demo)
Typominima is a free, minimal typography-based theme that was designed to enable writers and publishers to express themselves online in a clean and beautiful environment.

Edgy Ellen (Demo)
This theme from WP Classic has a stylish design, clean grid patterns and custom typography. It comes with an options panel that will help you set up your website in no time.

Copperific (Demo)
Copperific has a stylish slider to showcase highlights of your portfolio. It also has a built-in Twitter and Facebook button for easy sharing of posts. For monetization, it has four 125×125 banner ads that are integrated in the system’s back end. It has a custom dropdown menu, an automatic thumbnail resizer, a widget for popular posts and a lot more.

Grey (Demo)
Grey is generic enough to be used for almost any kind of blog. Whether it’s a blog about design, photography, fashion or some other passion, the Grey theme should suit your needs. It is built on a simple layout, but with a lot of little touches of subtle details and textures.

Neonsential (Demo)
Neonsential brings a grungy yet elegant look to your blog. The fancy home page slider highlights your featured posts. It is WordPress 3.0-compliant and backed by a robust framework for quickly setting up your website.

Anniversary (Demo)
As the name suggests, Anniversary was built as a celebration of and thank-you to WordPress. It’s a classic-looking theme, with several layout options and a customizable “Thank you, WordPress” banner in the header.

Shopping/Ecommerce Theme

Velvet Sky (Demo)
Velvet Sky is a Prestashop and WordPress shopping theme that was recently released on Smashing Magazine. It features a custom homepage with combo slider, horizontal and submenu menu integration, custom slideshow, it supports one page checkout and guest checkout and is IE7+, Safari, Opera, Firefox, Chrome compatible.

Mobile-Optimized Themes

iPhonsta (Demo)
Offering a mobile version of your website is an easy way to strengthen your visitors’ loyalty. iPhonsta has a fluid layout, it fits most mobile screens (despite its name, it will work on most smartphones), and it configures the font size automatically.

jQuery Mobile
This theme is optimized for mobile devices, such as iPhone, Android and BlackBerry. It is a great starting point for building a mobile website.

Magazine-Layout Themes

Agency (Demo)
Agency is a magazine-style theme that puts your content in a beautiful wrapper, complete with subtle, elegant page elements. It features a custom slideshow, a built-in contact form, custom gallery styles with lightbox functionality, and two widget-ized sidebars.

Nublu (Demo)
This sleek blue theme comes with a configurable slider, drop-down menus and Cufon-enabled headlines. It also comes with automatic thumbnail generation and the WordPress 3+ menu system, and it sports a Twitter bird that sings your latest tweets.

Splendio (Demo)
Splendio has a unique magazine-style design, based on the TwentyTen theme.

Ophion (Demo)

Sight (Demo)
Sight, previously featured on Smashing Magazine last November, is a powerful theme that is best suited to magazines-style blogs. It was built on a grid and has a modern minimalist style. Customize the content view using either the standard blog view or the grid view.

Lucky Guess (Demo)
Plenty of CSS3 techniques are used in this theme. You will notice both loud and subtle text shadows in the headings, text orientation effects and box gradients. The theme also makes use of Google fonts, which render much faster than the popular Cufon fonts.

Yellow Magazine (Demo)
This theme could be used for a magazine-style website or, just as effectively, for a corporate or business layout. It comes with a basic options page, built-in pagination, a content slider and integrated social bookmarking buttons.

Suburbia (Demo)
Suburbia is a clean and flexible grid-based magazine theme with a modern and minimalist style. The theme is suitable for most types of websites, including blogs, online magazines and portfolios.

The Morning After (Demo)
At 100,000 downloads, The Morning After is the grandfather of modern WordPress magazine themes. Originally designed by Arun Kale, it was bought last year by WooThemes, which has restructured and modernized the theme with its own powerful development framework.

Distant Dawn (Demo)

iTheme2 (Demo)
iTheme2 is the perfect theme for technology- and Apple-related blogs. It uses media queries to target different displays, such as desktops, notebooks, iPhones and iPads, and other mobile devices, without a plug-in. The layout automatically adjusts to the user’s viewing area.

Magazine 1 (Demo)
With its simple, stylish and dark design, Magazine 1 is a professional solution for any blog or magazine website. It features jQuery content sliders, a “Most popular posts” widget and multiple colors for the background and content. It is easy to customize and use.

Custom Community (Demo)
Custom Community is a BuddyPress theme that enables you to easily build a website with all of BuddyPress’ built-in features: the easy-to-use jQuery slideshow, post templates with thumbnail integration, and a powerful options page for customizing every part of the theme.

Aluminiumism (Demo)
The Aluminiumism theme has a grungy watercolor style yet still maintains a classically clean look. It features a prominent content section, a dropdown menu, subscription buttons (Twitter, Facebook and RSS), an automatic thumbnail resizer, widgets for popular and featured posts and featured videos, and a heck of a lot more.

Elegant (Demo)
Elegant is a simple yet professional theme. It has two color schemes (black and white) and is best suited to corporate magazines but is flexible enough for blogs and portfolios.

Amphion Lite (Demo)
Amphion Lite comes packaged with two skins, a home page content slider, integrated social sharing buttons, custom page templates and a lightbox plug-in for image galleries.

“Coming Soon” And Landing Pages

Landis (Demo)
Landis is a simple one-page landing or “Under construction” WordPress theme. It keeps your users informed while you build your amazing new website. The quick landing page simply tells visitors what is going on and when your website will launch.

Timelaph (Demo)
Timelaph is a sleek, dark, spaced-out theme for landing pages and email newsletter subscription pages. It integrates easily with Feedburner to redirect RSS feeds and help build your email subscriptions.

Holding Pattern (Demo)

Placeholder (Demo)
This landing page is perfect if your website is in development and you simply need to let visitors know how to get in touch with you. Also, the built-in countdown timer is a nifty way to tell visitors when the project will launch.

Coming Soon (Demo)

Theme Development Frameworks And Bare-Bone Themes

Platform
This is the free version of Platform, a drag-and-drop design framework for WordPress. With this framework, you can design and build your website faster than ever before, entirely in WordPress’ back end.

Roots
Roots is a starter WordPress theme made for developers and based on HTML5 Boilerplate, Blueprint (or 960.gs) and Starkers. It helps you rapidly create brochure websites and blogs.

HTML5 WordPress Shell
With this framework, you get custom templates (including 404 and 503 error pages), the mother of all WordPress body tags, support for WordPress’ new menu system, Modernizr (i.e. HTML5 feature detection) and an HTML5 reset style sheet, @font-face examples, support for iPhone detection, and IE conditional style sheets.

Boilerplate: Starkers
This Boilerplate framework was developed by combining HTML5 Boilerplate and the bare-bones Starkers into a minimally marked-up, HTML5-ready framework. The Boilerplate theme is designed to function as a parent theme to whatever child you would like to add. But you could just as easily use this as a starting point and alter the PHP as your design requires.

TwentyTen Five
TwentyTen Five was originally launched in the Smashing Magazine article “Using HTML5 to Transform WordPress’ TwentyTen Theme.” It is basically an HTML5 upgrade of the default TwentyTen theme, and yet it is much more than that. With its support for brand new HTML5 elements and its compatibility with all modern browsers (although to use HTML5 with IE versions 6 to 8, you need a pinch of JavaScript, which is included), this theme is perfect as a development framework.

Theme Starter (Demo)
This is a starter theme for those who are looking for a starting point in WordPress without having to dissect anything more complex. The theme is WordPress 3+ compatible and uses the new menu navigation and thumbnail functionality.

Constellation (Demo)
This great starting point gives you the flexibility to provide bespoke styles for different devices, totally up-to-date HTML5 code (which is fantastic for SEO) and a flexible grid system, on top of all of the other goodness bundled in the HTML5 Boilerplate.

Bones
This feature-rich bare-bones theme was built using some of HTML5 Boilerplate”s recommended mark-up. It also has a ton of features, such as page navigation, breadcrumbs, a widget for related posts, HTML5 video with fallback and a heck of a lot more. Bones was designed to make the developer”s life easier; it”s meant to be hacked until it fits what you”re looking for.

Skimpy
Skimpy has basic WordPress 3.0 functionality, including custom menus, thumbnails and custom sidebars. A couple of other useful tweaks are commented out, but you can comment them in and do what you want with them. The only style included is a container that sets the width to 900 pixels.

Further Resources

For nostalgia, or perhaps to visually track the development of WordPress themes, browse back through the top 100 WordPress themes from previous years.

Please note that some of those themes (especially the ones from 2007 and 2008) may be outdated and incompatible with the latest version of WordPress. Use with caution.

• 100 Free High-Quality WordPress Themes: 2010 Edition
• 100 Amazing Free WordPress Themes for 2009
• 100 Excellent Free WordPress Themes: 2008 Edition
• Beautiful WordPress Themes You (Probably) Haven’t Seen: 2007 Edition

(al)

© Paul Andrew for Smashing Magazine, 2011.

We showed you the Lytro Camera, which uses an entirely new way to take pictures, almost miraculously letting you forget about focusing and exposure to instead concentrate on framing and art.

Now, we bring you an interactive gallery of simulated Lytro photos where you can adjust the focus in a way that’s similar to the final product’s behavior:

Pics and video courtesy of Lytro

More About: focus, gallery, interactive, Lytro, pics, prototype, trending

For more Tech & Gadgets coverage:

• Follow Mashable Tech & Gadgets on Twitter
• Become a Fan on Facebook
• Subscribe to the Tech & Gadgets channel
• Download our free apps for Android, Mac, iPhone and iPad