If you already have Publicize active (which you should if you like traffic), you’ll now see a link to set options for Facebook, inside the Facebook block on the Sharing Settings page.

If you click on it, you’ll see a simple dialog box that lists all your available pages to pick from.

If you are new to Publicize, you’ll see a sequence of screens confirming permission to post to your Facebook account, before you see the screens above.

Also note, currently you can only Publicize to one target: either a page or your wall. This should be more than sufficient to get your great posts out to a wide audience of your choosing.

We hope you enjoy this added flexibility in how your blog posts get shared to Facebook.

No related articles yet.

It’s called Google Plus, and it’s kind of a big deal. At least, that’s what we’re being told. Over, and over, and over. Yep, Google Plus is the best thing since Facebook. In fact, it’s better than Facebook. And it’s better than Twitter. In fact, Google Plus is going to be the death of them both!

Poppycock. Not only is Google Plus one of the biggest examples of style-over-substance and over-hype that the Internet has seen, it will be prove to be absolutely no threat to the dominance of Facebook and Twitter within their respective niches.

And while there are some aspects of Google Plus that are fairly innovative (and have made it attractive to early adopters), other parts of the platform have been so poorly thought out and executed that it begs belief. Other highly-celebrated features flatter to deceive, whilst being all-but-ignored by those clapping the loudest.

The Hype

Google Plus  has certainly arrived with considerable fanfare. Using the same approach that made Gmail so desirable, Google Plus  launched as invite-only, with the platform open only to a lucky few. This wasn’t entirely random — Google was careful to pre-invite many thought leaders, bloggers and pundits in the tech space (particularly in Silicon Valley), as they were always going to have a lot to say. And say it loudly.

This created an early demand that probably hasn’t been matched in internet history. The Wall Street Journal reported that in just three weeks, Google+ has had 20 million unique visitors since its launch. Even Mark Zuckerberg signed up, quickly becoming the most-followed user on the network.

Of course, visitors isn’t the same thing as users, and users isn’t the same thing as active users. So how many people have signed up for Google+? Using a surname-based analysis system, Ancestor.com founder and statistician Paul Allen pegged the membership at 10 million on July 7, a feat achieved in just 16 days. As a comparison, it took Twitter 780 days and Facebook 852 days to reach the 10 million user mark.

I mean, look at this growth — insane!

Since then, Allen estimates that Google Plus is up to 18 million to 20 million users, all achieved in about three weeks. No wonder Zuck has signed up — he’ll have nowhere else to go at this rate.

The Reality

Google Plus seems exciting now because it’s new and shiny and lots of major tech players are giving it a decent amount of attention. But it’s deceptive, and underneath very little is actually going on.

Google Plus’ 20 million signups in such a small period of time certainly seems impressive. But this is Google, a well-established search giant that already boasts over a billion users. Couple that with the must-scratch-itch that is invite-only, and you have an influx that was both predictable and self-fulfilling.

But it’s not as good as it looks. For the week ending July 19, 2011, Experian Hitwise says that Google Plus had some 1.8 million visits. That number was up 283 percent from the previous week, but relatively it’s tiny, both compared to Facebook and Twitter, but also to the number of registered profiles on Google Plus.

If Google Plus actually has 20 million signups, that means that on any given day of that week only a fraction over a quarter of a million bothered to come back. That’s about 1.3 percent. Even if you assume there are only 10 million registered users, that’s still only 2.6 percent. It’s actually less than that, as number of those visits are from brand-new users.

Either way, it’s hardly a healthy stat for long-term growth. And anecdotally I’ve seen a lot of evidence of this myself. I’ve invited dozens and dozens of my friends to Google+, and of those who have bothered to sign up (probably less than half), the vast majority – easily 90% – have registered, had a quick look round and then promptly departed, never to return. The question I’m hearing again and again is: I already have Facebook and/or Twitter, so why do I need this?

The thing is, if you register on Google+ and follow a portion of the most-followed users – people like Danny Sullivan, Robert Scoble, Leo Laporte, Kevin Rose and Steve Rubel – you’ll start to believe that Google+ is the most popular thing, like, ever. Look at all those posts. More impressive, look at all those comments. Such engagement!

But it’s an illusion. These guys come with a ready-made audience, most of whom follow them pretty much anywhere. Google+ is the best thing that ever happened to them. This isn’t a criticism – they all produce first-class content. But just because they’re seeing a lot of reactions and getting a great response to their posts doesn’t mean everybody else is. In fact, virtually nobody else is. Try visiting the Google+ profiles of many of the people commenting in these guys’ posts. With a few exceptions, it’s a ghost town.

And Mark Zuckerberg racking up at least 350,000 followers isn’t proof of anything. Zuck could show up at MySpace and have 350,000 followers by the end of the day.

And let’s not forget that Google Plus had the help of Facebook and Twitter to generate all of this publicity. I don’t think we can credit this enough. A combined billion users (give or take some crossover) went completely nuts about Google Plus, with some 1.9 million tweets, 107,000 blog posts, 30,000 online news articles and 153,000 forum posts made about Google+ in the first two weeks of its launch. But this isn’t proof of success, as the vast majority of these people didn’t even have invites to the platform. It’s proof of hype, but also proof of the power of Facebook and Twitter, both of whom didn’t have the same help when they first opened their doors.

When it launched, Twitter had a little bit of help from Facebook. And Facebook had a little bit of help from MySpace, because it was so decidedly awful.

(Also, it’s worth observing that even with all this fuss, mentions of Google Plus were dwarfed by mentions of Facebook and Twitter over that same period.)

People have very short memories. When the much-derided Google Buzz opened it generated 9 million posts in the first 56 hours. It’s Google. These kinds of launches are inevitable. It doesn’t mean anything.

Where Google Got Social Right

Hangouts

Hangouts, the Google Plus live video chat, are proving very popular with a lot of users (although typically only when launched by somebody well-established and/or downright famous). Because Hangouts support multiple users, Google has one-upped Facebook’s one-on-one Skype integration, although it can’t be long until that also supports group video chat.

The User Interface

Google Plus looks great. So clean and minimalist, it totally reminds me of FriendFeed (more on that later).

Where Google Got Social Wrong (Again)

How about everywhere else?

Circles

This is being touted as Google Plus’ killer feature, as circles allow anyone to digitally organize their friends, as proposed by Paul Adam in his much-loved presentation, The Real Life Social Network. It’s so easy — simply drag and drop a friend into the circle of your choice. You can then click on any circle in your sidebar to see just content from those users. Even better, you can send your own content to any circle of your choice. Talk about targeted marketing!

The thing is: this is broken. Circles sound like a good idea on paper but in reality they don’t work. Why? Two main reasons. One, because people cannot digitally organize their friends by interest. And two, even if you could nobody talks about that same interest constantly and nothing else. In other words, a given person cannot be defined by something they like. Certainly not just that.

I’ll give you an example: Danny Sullivan. Danny is head of Search Engine Land and produces a ton of outstanding content about that space. I follow Danny on Google Plus, and filed him away in the appropriate circle. But the problem is that Danny doesn’t just talk about search engines. He also shares a lot of photos of sunsets and beaches and stuff like that. Which is fine — he can write about what he wants. Which, of course, is the crux of the issue. I could file Danny over multiple circles (search, tech, photos, sunsets, and so on) or I could keep him filed under one, but none of them are going to be accurate, because Danny Sullivan is not a robot, blindly mass-producing content about a finite number of subjects. He’s a person, and people aren’t easily pigeonholed.

This is an ongoing issue. Not only is the circle filing system likely to be inaccurate, but to make it even remotely useful you have to keep modifying and revising your circles as you start to follow new people and existing followers prove themselves to be somebody else.

Bottom line: most people won’t bother. They’ll just start to file everybody under one big circle, and put it up with it. And that’s exactly what will happen when you group too many people into one circle, especially if they’re pundits or self-promoters — the circle becomes unusable, almost instantly. A veritable nightmare of ramblings and noise.

This is the problem when you don’t have a character limit on status updates. Twitter has 140, Facebook has 420, and Google+ has no limit, at least not one that I’ve seen reached. Some of the updates are so long that they fill up multiple screens. Seriously: who wants that? Who signed up to see that? If I wanted to see every word of every article you’ve written I’d visit your blog. And cherry pick.

That’s the problem with circles as an input measure. For output, they’re even worse. Google thought they were being really smart by letting us, as individuals, decide who goes where, and then broadcasting to them accordingly. But as a system it simply does work, because of the reasons I’ve already outlined: I don’t know what you like. And you don’t know what I like. You might think you do, and Google might even be able to provide you with an algorithmic guesstimate that’s pretty accurate at this moment right now, but come tomorrow things will have changed. Come next week and next month and they’ll have changed completely. I’m not all about Twitter, and I’m not all about social media. I don’t want to see everything ever written about those things. I don’t see no ring on this finger. You don’t own me!

As you can see the way the output part of circles has been defined is backward. I shouldn’t be tagging you by your interests — you should be tagging yourself based on your own interests. You know what you like. Nobody else does. And you know that tomorrow you might not like that thing anymore. But I’ll still think your its biggest fan, blinding pushing my now-irritating content your way 24/7. Right up until you unfollow me. Hooray! Everybody wins.

If Google had set up circles so people tagged themselves, it could be a world-beater. I’d set up a Circle called Twitter, and other people would opt into it, ike a mailing list, circa 2011. Visit my profile, check out my different circles of topics, and sign up for what you want. That’s a winning content delivery system. And it will work because users choose what they want to see, rather than the broadcaster picking for them. Moreover, I could quickly see which of my circles was the most popular, and focus my efforts on that.

To me, the biggest proof that circles don’t work is the way that the Google Plus superstars like Scoble, Rubel and Sullivan are using them. Namely, they don’t. They post everything they do public. And why wouldn’t they? Who wants less people to see their content? It’s fundamentally opposed to everything we’ve ever been taught. Sure, targeted marketing certainly has its place, but only when people opt-in. Not the other way around.

And let’s remember that Facebook has had this feature forever, except over there it’s called Groups. And nobody uses it. Why would it be any different on Google?

Sparks

Are you having a laugh, Google?

I don’t think I’ve ever seen such a fundamentally useless, bolted-on-at-the-last-minute worthless piece of crap.

Search

The Google Plus search feature is… non-existent. You can find people and you can search via sparks (so sweet), but that’s it.

I mean: this is Google, right? Who thought leaving out a search box was a good idea?

Brand Profiles

Google Plus didn’t launch with brand profiles, promising to add them later, and announced that they only wanted real people to make profiles. Specifically: no non-humans (which I have to say I welcome). Google warned users that they’d remove any brand profiles that were set up. And on July 21, that’s exactly what they did, much to the chagrin of those involved. All except for Mashable, whose excess of 100,000 followers was saved and renamed as founder Pete Cashmore. All the other accounts — which included some major players such as Coca Cola and Good Morning America — were nuked. Talk about one rule for one.

The Scoble Effect

I’ve touched upon this a couple of times in this post but it needs more explanation. Basically, Robert Scoble ruins everything. He’s the Jack Nicklaus of social networks, because when you factor in what he’s done and doing compared to everybody else, it all falls apart. There is no comparison. He’s out there, alone, like Jonah versus the whale.

This isn’t me knocking the guy. I like him. Scoble is the early adopter personified, and gives every new major social network 100 percent of his attention. He follows bazillions of other users and seems to read everything they all post. He also generates a lot of his own content, all of which gets a bazillion comments.

So what happens is if you want Robert Scoble in your network, you are basically saying: I do not want to use this network. In fact, I want it ruined. This was true on FriendFeed, it was true on Google Buzz and it’s even truer on Google Plus. It isn’t an issue on Twitter because of the strict character limit. But when anything goes, then it’s game over. As I said, Scoble ruins everything. He even acknowledges this himself. It’s the litmus test of every new social platform.

But it’s not just Robert who breaks Google Plus. It’s all the other power users, too. Because Google Plus has relatively no controls over content, if you add more than a couple of these guys to your stream then Google Plus becomes essentially unusable. With their continuous updates and pages and pages of comments, they drown out everybody else so much that it’s both impressive and completely infuriating. Don’t worry — very soon you won’t care, because you’ll have stopped using Google+.

FriendFeed Again

To me, Google Plus is basically FriendFeed all over again. Bigger platform, and beefed-up, sure, but it’s essentially the same tech crowd (almost exactly), each of whom are showing the same enthusiasm, which delivers the same hype, which ultimately produces the same lack of returning users, simply because very few of them care about the same things to the same degree.

On that initial visit, Google Plus is just as overwhelming for most people as Friendfeed was. (And I liked FriendFeed, but it was never going to appeal to non-technical folk.) It doesn’t have the simplicity of Twitter and it doesn’t have the familiarity (and comfort) of Facebook. Instead, it sits somewhere between the two, satisfying neither one user nor the other, and ultimately appealing to neither.

Why Google Plus Is No Threat To Facebook

The people who are most active about the threat posed by Facebook, or what it is that they don’t like about the platform, are often the same people mentioned in this article. That is, early adopters, tech pundits, web entrepreneurs, journalists and high-profile bloggers. But cool as a lot of these guys are, they aren’t normal people. They aren’t the majority. They aren’t the hundreds of millions of people who use Facebook to chat with friends and family, and to play games. There’s fundamentally no reason whatsoever for these same people to leave Facebook and move over to Google Plus. Even if Google Plus copies Facebook exactly there’s no reason, as they already have what they need on Facebook.

Yep, it’s certainly true that nothing lasts forever — MySpace and AOL are the best (and increasingly cliched) examples of that. But at 750 million users plus, Facebook isn’t going away anytime soon. And Google Plus isn’t enough of a temptation to make any significant dent in that user base.

Why Google Plus Is No Threat To Twitter

People who want Twitter — that is, the majority of users, not the loudest users – want it because of what it is: a short, quick messaging service that, if one follows the right profiles (and ‘right’ is of course a very relative term – what’s right for you?) provides an easy (and powerful) way to position yourself right on the edge of the information curve.

Those same short updates also works brilliantly on most mobile phones, making Twitter very addictive.

If Google Plus has any appeal to the man in the street, it’s for vastly different reasons than why they’re using Twitter.

Google Plus As A Blogging Platform

Because there aren’t any limits to content updates, GooglePlus does work as a blogging system, and it could become a viable alternative to WordPress, Tumblr and Posterous for bloggers.

We’ve already seen some evidence of this with people like Kevin Rose and Bill Gross pointing their personal web domains directly at their Google profiles. Of course, they can reverse this any time they like, but it could be a trend of things to come, and it will be interesting to see if Google+ begins to take some share away from the established blogging platforms.

The Big Question

Google Plus could top 100 might users with little or no effort — because it’s Google. The key thing is what it takes to get the platform to the next level in social networking: The much-desired billion users. So let’s ask this question again: why would the average person leave Facebook for Google Plus, when it’s mostly the same and what’s different is a bit of a mess? Why on earth would they leave Twitter, when they’re a complete apple and oranges comparison?

Why do they have to leave at all? Surely there’s room on the block for another major social network — can’t we all just get along? So here’s what I think is the biggest question: Can people really cope with the work it takes to successfully manage three social networks?

More importantly, will they?

Because if they can’t, or won’t, it doesn’t matter what Google Plus does, what features it introduces and what fixes it makes to those already on the system. Because, relatively at first, and later in actuality, almost nobody will be paying attention.

No related articles yet.

Already using Google+? Follow Mashable’s Pete Cashmore for the latest about the platform’s new features, tips and tricks as well as our top social media and technology updates.

This month’s hot topic has been, without a doubt, Google+. Whether the new social service from the world’s largest search company will be a “Facebook killer” remains to be seen, but one thing’s for certain: This is one social network you don’t want to ignore.

When it comes to getting found, Google+ is fast becoming a great asset for bloggers and content producers thanks to its ever-expanding user base and simple sharing tools. In this post, we’ll show you a few ways to start spreading a little of that Google+ love on your WordPress-powered website.

Display Your Google+ Profile Information

Software developer John Henson from PlusDevs has developed a handy, easy to use WordPress widget that displays your Google+ profile on your blog. The setup is quick and simple: Install the plug-in and drag the widget into your sidebar. Just fill out the form and you’re done.

You can also incorporate the widget into your template with only a few lines of PHP code, giving you the flexibility to place it anywhere within your layout.

You can learn more about the widget in the official blog post or jump straight to the code on GitHub.

Unofficial Google+ user tracking site SocialStatistics.com also offers an embeddable Google+ widget. Simply add your profile to their database and grab the widget code from your page on their site.

Add the +1 Button

If you’re not already using the Google +1 button, consider taking a moment to add it to your site. This is a great way to let users save, promote and find their favorite content. The +1 button only takes a few minutes to integrate with your site and works with any Google profile. While this isn’t a Google+ specific feature, we wouldn’t be at all surprised to see it integrated with the service. Either way, it’s another great way of adding an additional avenue for promotion and sharing.

You can learn more about the +1 button from Google.

To add it to your WordPress site, you can either use the official +1 button code generator from Google or take a look at the myriad +1 button WordPress plug-ins available.

Use a Google+ Inspired Theme

Do you love the look of Google+’s clean, intuitive layout and unobtrusive interface? For the die-hard fan (or, hey, maybe you run a blog that’s centered around the service), there are already a few Google+ inspired WordPress themes for your perusal.

WP Plus

WP Plus is a fixed-width, 3 column Google+ inspred WordPress theme supporting custom content menus, styled sticky-posts and valid XHTML/CSS code. Clean, fast-loading and SEO optimized, WP Plus gives your blog the Google+ look and feel in just minutes.

PlusOne

Similar to WP Plus, PlusOne is another 3-column, fixed-width Google+ styled theme that supports custom WordPress menus. It’s a clean and well-designed theme, but it does take some liberties with how it translates Google+ to WordPress (so it doesn’t look quite as accurate to Google’s own design).

Reflex+

Reflex+ shares all of the features mentioned in the above two theme but it also brings in jQuery and incorporates AJAX for some tasks, such as the “read more” post navigation, helping it appear more fluid and seamless.

Want More?

Google+ is still a relatively new service locked behind an invite-only registration system. No doubt as time progresses and the service grows, there will be more options for publishers. Right now there are a couple of options if you’re a developer interested in having a go at creating your own Google+ plug-in.

If you’d like to gain access to the official Google+ API, you’ll need to sign up with Google to register interest in a Google+ developer account. Unfortunately, the API is not yet public. It’s unclear whether this will change as the service matures, but inquiring about developer access is certainly worth looking into if you want serious Google+ integration and sharing between your site and the service.

For a more portable (and presumably trimmed-down) solution, software developer Jason Striegel has put together a collection of PHP utilities for a locally-hosted Google+ API service. In its current state, the API will allow you to retrieve post and profile data and post to Google+. You can check out his code on GitHub. This is a great option to include within your own distributed code, such as WordPress plug-ins and widgets.

More About: dev, Google, Google Plus, WordPress

For more Dev & Design coverage:

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

No related articles yet.

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.

No related articles yet.

No related articles yet.

Facebook released its updated Comments plugin today, which includes a robust set of new features. The social networking site also announced a set of publisher partners that will now integrate the plugin as their commenting platform of choice.

The robust features, which include threaded comments, moderation controls and the ability to sync the comments to a Facebook Page, signal another step toward Facebook’s proliferation across the web with its social plugins. Perhaps the most notable feature is the ability to sync comments across a site and a publisher’s Facebook Page. This has the potential to increase the discussion and commentary on websites that see a bulk of the discussion take place on its Facebook Page.

The plugin can be seen in action on Facebook’s blog, and partner sites include The Economist, SportingNews.com, Redbook and Examiner.

Though the current functionality only allows commenting with a Facebook account, the plugin updates were supposed to include login support for Twitter users as well, but the functionality was not released. The Comments plugin is one of many Facebook plugins that can be integrated into websites off of Facebook – the most popular being the Like button. It will give Facebook further exposure across publisher sites and the web in general. The plugin is available to any publishers who get the code on Facebook’s Social Plugins page.

Here’s what the key changes and features are for both users and publishers integrating the plugin.

Key User Features

• Social Commenting & Context: When users are logged into Facebook, they are able to comment on a site with the Comments plugin immediately. Users are able to get more context about a person by looking at the text next to a commenter’s name, which displays any mutual friends, the person’s work title, the person’s age, or the place that a person currently lives – information pulled from the user’s Facebook profile. The information, of course, will be based on a user’s privacy settings.
• Best Comments First: Comments are ranked based on your personal network. The most relevant comments from friends, friends of friends, and the most liked or active discussion threads will be at the top.
• Moderation: As users are reading, they can mark comments as spam, or report them as being abusive to clean up any inappropriate comments.
• Easy Sharing: Users can share comments back to Facebook by clicking “Post to Facebook.” The comment will then be posted to their wall and surfaced for friends on Facebook.
• Threaded Conversation: This might be the neatest feature. Users can sync comments regardless of where they’re made. Whether a user makes a comment on an article or a post on Facebook Page, the comments will be threaded together in the same conversation so users don’t miss out on anything.

Publisher Features

• Comment as a Page: Page owners can comment on external sites as their Facebook Page. When a user is logged into Facebook, he or she will see the option to comment as a Page. The comment will be shared on the Page’s wall so users who’ve liked the Page have the opportunity to join the conversation as well.
• Simply Implementation: The plugin can be added to a site with just one line of code.
  Distribution: Users can easily share comments back to Facebook with a link that directs back to the original article on a publisher’s site.
• Syncing a Page & Website: Publishers are able to syncronize comments made by readers on their site or Facebook page. Regardless of where a comment is made, it will appear in both places. This has the potential to improve the quality of conversations by synchronizing it.
• Moderation Controls: The moderation includes blacklist controls to the Comments plugin and site admins can control the visibility of a comment by making it private or hiding it completely. Publishers can blacklist users and words.

What do you think of the new features? Do you think more publishers and sites will integrate this plugin? Try it below:

More About: facebook, facebook comments, plugin, social media, social networks

For more Social Media coverage:

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

No related articles yet.

Say goodbye to the Share button because the Like button is taking over.

After months of updates to its Like button, Facebook has released an update that fundamentally changes the button’s functionality to that of a Share button. Now after hitting the Like button, a full story with a headline, blurb and thumbnail will be posted to your profile wall. You’ll also be given an option to comment on the story link. Previously, only a link to the story would appear in the recent activity, often going unnoticed by users.

Though users may now think twice about hitting the button, given how prominently it will appear on their walls and in their networks’ newsfeeds, it should ultimately increase traffic to publishers’ websites.

Facebook has slowly been rolling out updates to its Like button and has stopped developing the Share Button. Facebook spokeswoman Malorie Lucich told us that while the company will continue to support the Share button, Like is the “recommended solution moving forward.” However, Lucich today called it a test, saying “We’re always testing new products that
incorporate developer feedback as we work to improve the Platform experience, and have no details to share at this time.” It’s unlikely that the change is just a test, however. Typically such tests from Facebook only affect a small number of users, whereas this change affects all Like buttons.

Perhaps the change was necessary. Because it was never made clear to users that the Like button would function differently than the Share button, many never understood what it meant to click Like on a piece of content. Making the result the same as the Share button could build stronger user expectations, ultimately fashioning a better user experience.

We want to know what you think. Do you “like” the new button?

More About: facebook, like button, social networking, social plugins, trending

For more Social Media coverage:

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

No related articles yet.

Jeff Ente is the director of Who’s Blogging What, a weekly e-newsletter that tracks over 1,100 social media, web marketing and user experience blogs to keep readers informed about key developments in their field and highlight useful but hard to find posts. Mashable readers can subscribe for free here.

Facebook has recently announced a lengthy list of significant design and feature changes for Pages.

One particular item is emerging with perhaps the greatest challenge and the highest potential for Page owners — there is a new way to present custom content on Facebook Pages. Tabs and FBML are going away. Get ready to friend iFrames. Here’s a basic rundown and some tips on how to make the switch.

Background: Starting With a Clean Canvas

iFrames are not new. An iFrame is a standard HTML tag that allows one page to be inserted into another. It would seem like a pretty obvious way for Facebook Page owners to customize content, and Facebook did experiment with it a while ago before discovering security issues. But as of February 10, iFrames are back. Facebook Markup Language (FBML), which has been the primary custom content creation tool, is being deprecated.

FBML is a subset of HTML that has additional Facebook specific functions. For example, the FBML tag <fb:visible-to-connection> requires a user to “Like” a page in order to see certain content. Existing FBML Pages will still be supported, but new ones cannot be created as of March 11. There is no immediate need to worry about existing FBML based Pages. In the software world, the time horizon for “deprecated” is often measured in years, if not decades. Still, you’ll want to continually delight your Facebook visitors, which means that there are iFrames in your future.

Learning to Love iFrames

The switch to iFrames means that developers can create dynamic web apps using their standard tools (HTML, CSS, PHP, ASP, JavaScript, Flash, etc.), register them as a Facebook “Canvas” app and then embed the app on a custom Page via the iFrame. Some limited info about the Facebook user is available through the API.

This all sounds much more complicated than it really is, and in fact it is probably simpler than the old process. Most developers are celebrating. “iFrames allow marketers the creativity and flexibility similar to that afforded by webpages, while developers can streamline integration with one process for Facebook canvas apps, Facebook Connect website widgets, and now Facebook custom Pages,” says Vikas Jain, director of business development for Wildfire Interactive. If you can create something for the web, respect Facebook’s ToS, and (preferably) hold it to 520 pixels in width, you can now present it as custom Facebook Page content.

Great content is only the start. Page owners can now have a more direct relationship with their Facebook visitors. “Right now the implications are countless,” says Patrick Stokes, chief product officer for Buddy Media. “Conversion tracking is probably the first thing that marketers should be focusing on. iFrames mean that you will be able to recognize the visitor, track their source and note their IP address in order to present a customized response. These capabilities are much stronger through iFrames than they are in FBML”.

Mark Spangler, director of client services at Stuzo|Dachis Group is also expecting “exciting personalization options which should now appear seamless to the user: Customized landing views based on user location or referral source, dynamically updating the view for specific content, loading of Flash elements and interactive front-end features which formerly could not initially load on custom Pages.”

But don’t expect things to change overnight. This is a change that lies firmly in a divide between the aspirations of the marketing department and the freshly fueled capabilities of web developers. Companies that can bridge that gap wisely will likely see the best and fastest results. Involver’s VP of marketing Jascha Kaykas-Wolff is advising marketers to proceed slowly and plan carefully for the best results. “The switch from FBML to iFrames is not earth-shattering right now. However, in the future — and as Facebook evolves their ToS — iFrames will allow for a much more immersive experience consistent with your brand’s corporate experience. The evolution of Facebook becoming the replacement for the branded micro-site is well on its way.”

Using Facebook

The best and simplest news for Facebook marketers is that they may not have to try and pull someone away from Facebook to get them onto their site. There are now better options for accomplishing their sales or branding goals entirely within Facebook. “We’ve found, in doing Facebook ad testing, that Facebook ad respondents tend to convert better when they land on a page within Facebook,” observes Search Mojo CEO Janet Miller. “iFrames now opens up a whole new world of possibilities for what can be delivered, including e-commerce, directly through a Facebook Page.”

Some of the selling may first have to occur internally as social media initiatives frequently need to fight for budget. Linda Bustos, director of e-commerce research with Elastic Path Software, notes, “Any new web development poses a challenge for social media. C-level execs want to see ROI from social initiatives — something that has historically been hard to prove.” In this case, she points to the improved tracking capabilities and the ability to monitor activity via Google Analytics as a unique opportunity to measure social media costs versus benefits. Additionally, businesses should find it easier to convert existing web apps for Facebook use with iFrames.

The Endgame for iFrames?

iFrames for Pages may be a win-win for all sides but it will require planning and some investment. As always with Facebook, you can’t ignore the huge user base, and you have to be open to new opportunities to interact. iFrames is very much a work in progress that warrants serious attention.

Disclosure: Buddy Media is a Mashable sponsor.

More Business Resources from Mashable:

- How 5 Companies Are Using the iPad to Increase Productivity
– How The iPad Is Helping Businesses Go Green
– How Facebook Deals Are Helping One NBA Team Connect With Fans
– 4 Small Business Mobile Predictions for 2011
– How Brands Can Make the Most of Facebook’s New Pages

More About: business, facebook, facebook pages, iframes, MARKETING

For more Business & Marketing coverage:

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

No related articles yet.

  

Last year, WordPress launched arguably its biggest update ever: WordPress 3.0. Accompanying this release was the brand new default theme, TwentyTen, and the promise of a new default theme every year. Somewhat surprisingly, TwentyTen declares the HTML5 doctype but doesn’t take advantage of many of the new elements and attributes that HTML5 brings.

Now, HTML5 does many things, but you can’t just add <!doctype html> to the top of a document and get excited that you’re so 2011. Mark-up, as they say, is meaning, and HTML5 brings a whole bunch of meaning to our documents.

In a recent survey by Chris Coyier over at CSS-Tricks, almost two thirds of respondents said they would not use HTML5 in new projects. In a similar survey by Smashing Magazine the results were almost identical: only 37% of voters said they use HTML5. This is depressing reading. Perhaps developers and designers are scared off by cross-browser incompatibility and the chore of learning new mark-up. The truth is that with a pinch of JavaScript, HTML5 can be used safely today across all browsers, back to IE6.

WordPress seems to sympathize with the majority of CSS-Tricks’ readers. TwentyTen is a fine theme that already validates as HTML5; but in order to cater to users without JavaScript, it has to forgo a large chunk of HTML5 elements. The reason? Our old friend Internet Explorer doesn’t support most of them prior to version 9.

The default TwentyTen WordPress Theme.

For example, you’ve probably already heard of the <section> and <article> tags, both of which are champing at the bit to be embedded in a WordPress template. But to use these HTML5 elements in IE8 (and its predecessors), you need JavaScript in order to create them in the DOM. If you don’t have JavaScript, then the elements can’t be styled with CSS. Turn off JavaScript and you turn off the styling for these elements; invariably, this will break the formatting of your page.

I assume that WordPress decided to exclude these problematic tags so that its default theme would be supported by all browsers — not just those with JavaScript turned on.

While I understand this decision, I also think it’s a mistake. Three core technologies make the Web work: HTML, CSS and JavaScript. All desktop browsers support them (to some degree), so if any one of them off is disabled the user will have to expect a degraded experience. JavaScript is now fundamental to the user experience and while we should support users who turn off JavaScript, or have it turned off for them and have no chance to turn it on again as they don’t have the right to do so, I question just how far we should support them.

Why Using JavaScript Makes Sense

Yahoo gives compelling evidence that less than 1.5% of its users turn off JavaScript. My own research into this, ably assisted by Greig Daines at eConversions, puts the figure below 0.5% (based on millions of visitors to a UK retail website).

Whilst it’s true that JavaScript should be separated from a site’s content, design and structure the reality is no longer black and white. I strongly believe that the benefits and opportunities HTML5 brings, together with related technologies such as CSS3 and media queries (both of which sometimes rely on JavaScript for cross-browser compatibility), is more than enough reason to use JavaScript to ‘force’ new elements to work in Internet Explorer. I am a passionate advocate for standards-based design that doesn’t rely on JavaScript; HTML5 is the one structural exception.

Yes, we should respect a user’s decision to deactivate JavaScript in their browser. However, I don’t believe that this is a good enough reason for not using modern technologies, which would provide the vast majority of users with a richer user experience. After all, in the TwentyTen example, if the theme had HTML5 tags in it, everything would look fine in modern browsers (latest versions of Safari, Firefox, Opera, Chrome and IE9), with or without JavaScript.

If the browser is IE6 – IE8, and JavaScript is turned off, then users would see the content but it will not be styled correctly. If the content would not be displayed at all, we’d have a completely different discussion. If you are still not convinced, I will briefly discuss another option for those who absolutely must support users with JavaScript turned off.

To make TwentyTen play fair with IE, I suggest Remy Sharp’s HTML5 shim or, if you want to sink your teeth into CSS3, Modernizr. Modernizr not only adds support for HTML5 elements in IE but also tells you which CSS3 properties are supported by the user’s browser by adding special classes to the <html> element.

Mordernizr.js

So, let’s assume you’ve rightly banished non-JavaScript users with a polite message in a <noscript> tag. We can now start tinkering under the hood of TwentyTen to bring some more HTML5 to WordPress.

Upgrading To HTML5

TwentyTen gets a number of things spot on. First of all, it declares the right doctype and includes the abbreviated meta charset tag. It also uses other semantic goodness like Microformats and great accessibility features like WAI-ARIA. But we can go further.

Important notes:

• I am referencing the HTML generated at http://wp-themes.com/twentyten/, rather than the simple “Hello World” clean installation of WordPress 3.
• For this article, I’ll be editing the files directly in the /wp-content/themes/twentyten/ directory. I’ve provided all the updated HTML5 theme source files for you to download from TwentyTen Five.
• Line numbers may change over time, so when I reference one, I’ll usually say “on or around line…” The version of WordPress at the time of writing is 3.0.4.

Articles

One of the more confusing parts of the HTML5 spec is the <section> and <article> tags. Which came first, the chicken or the egg? The easiest way to remember is to refer to the specification. The HTML5 spec may be dry at the best of times, but its explanation of articles will always point you in the right direction:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

If the piece of content in question can be, and most likely will be, syndicated by RSS, then there’s a good chance it’s an <article>. A blog post in WordPress fits the bill perfectly.

On the TwentyTen home page, we get the following HTML:

<div id="post-19">
…
</div>

Semantically this means very little. But with the simple addition of an article tag, we’re able to transform it into mark-up with meaning.

<article id="post-19">
…
</article>

Note that we retain the id to ensure that this <article> remains unique.

To make this change in the TwentyTen theme, open loop.php, which is in /wp-content/themes/twentyten/. On or around line 61, you should find the following code:

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

We’ll need to change that <div> to an <article>, so that it reads:

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

And then we close it again on or around line 97, so that…

</div><!-- #post-## -->

… becomes:

</article><!-- #post-## -->

There are also instances on lines 32, 101 and 124. Opening some of the other pages in the theme, for example single.php, and making the same change is worthwhile. Thus, line 22 in single.php would change from…

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

… to:

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

And line 55 would change from…

</div><!-- #post-## -->

… to:

</article><!-- #post-## -->

So far, so good. These are simple changes, but they already serve to overhaul the semantics of the website.

Time and Date

According to the HTML5 spec:

The <time> element either represents a time on a 24-hour clock, or a precise date on the proleptic Gregorian calendar, optionally with a time and a time-zone offset.

This means we can give the date and time of an article’s publication more context with HTML5’s <time> tag. Look at the code that WordPress generates:

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><span>October 17, 2008</span></a>

We can add meaning to our mark-up by transposing this to:

<a href="http://wp-themes.com/?p=19" title="4:33 am"
rel="bookmark"><time datetime="2008-10-17T04:33Z"
pubdate>October 17, 2008</time></a>

This time is now machine-readable, and the browser can now interact with the date in many ways should we so wish. I’ve also added the boolean attribute pubdate, which designates this as the date on which the article or content was published.

Time in the datetime attribute is optional, but because WordPress includes it when you post an article, we can too. Implementing this in TwentyTen requires us to dig a little deeper. In loop.php, the following function on or around line 65 calls for the date to be included:

<?php twentyten_posted_on(); ?>

To make our HTML5 changes, let’s head over to /wp-content/themes/twentyten/ and open functions.php. On or around line 441, you’ll see this:

function twentyten_posted_on() {
printf( __( '<span>Posted on</span> %2$s <span>by</span> %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span>%3$s</span></a>',
get_permalink(),
esc_attr( get_the_time() ),
get_the_date()
),

If you don’t know what that means, don’t worry. We’re focusing on the sprintf function, which basically takes a string and inserts the variables that are returned by the three functions listed: that is, get_permanlink(), get_the_time() and get_the_date() are inserted into %1$s, %2$s and %3$s, respectively.

We need to change how the date is formatted, so we’ll have to add a fourth function: get_the_date('c'). WordPress will then return the date in Coordinated Universal Time (UTC) format, which is exactly what the <time> element requires. Our finished code looks like this:

printf( __( 'Posted on %2$s by %3$s', 'twentyten' ),
'meta-prep meta-prep-author',
sprintf( '<a href="%1$s" rel="bookmark"><time datetime="%2$s"
pubdate>%3$s</time></a>',
get_permalink(),
get_the_date('c'),
get_the_date()
),

I’ve included get_the_date() twice because we need two different formats: one for the <time> element and one that’s displayed to the user. I’ve also removed title="[time published]" because that information is already included in the <time> element.

For more details on WordPress’ date and time functions, check out:

• Function Reference/get the time,
• Formatting Date and Time.

Figures

A figure—for our purposes at least—is a piece of media that you upload in WordPress to embed in a post. The most obvious example would be an image, but it could be a video, too, of course. WordPress 3 is helpful enough to add captions to images when you first import the images, but it doesn’t display those captions using the new HTML5 <figure> and <figcaption> tags.

The spec defines <figure> as follows:

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

And it defines <figcaption> like so:

The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

Currently an image with a caption is rendered like this:

<div class="wp-caption" style="width: 445px;"><img alt="Boat"
src="http://wpdotorg.files.wordpress.com/2008/11/boat.jpg"
title="Boat" width="435" height="288" />
<p class="wp-caption-text">Boat</p>
</div>

A WordPress image with a caption.

Changing this HTML to include HTML5 elements requires us to first look at media.php in the /wp-includes/ directory, where this code is generated. On or around line 739, you’ll find:

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
. do_shortcode( $content ) . '<p>' . $caption . '</p></div>';

To upgrade this to HTML5, we need to define a new function that outputs our <figure>-based HTML and assign this function to the same shortcode that calls img_caption_shortcode(). I’ve done this in /wp-content/themes/twentyten/functions.php by adding the following to the bottom of the file:

add_shortcode('wp_caption', 'twentyten_img_caption_shortcode');
add_shortcode('caption', 'twentyten_img_caption_shortcode');

function twentyten_img_caption_shortcode($attr, $content = null) {

extract(shortcode_atts(array(
'id'    => '',
'align'    => 'alignnone',
'width'    => '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $idtag = 'id="' . esc_attr($id) . '" ';

  return '<figure ' . $idtag . 'aria-describedby="figcaption_' . $id . '" style="width: ' . (10 + (int) $width) . 'px">'
  . do_shortcode( $content ) . '<figcaption id="figcaption_' . $id . '">' . $caption . '</figcaption></figure>';
}

First, we point the shortcodes for wp-caption and caption to our new function twentyten_img_caption_shortcode(). Then, we simply copy the original function from media.php, and change the last few lines to include our <figure> element. This now renders our boat.jpg example from above like so:

<figure id="attachment_64" style="width: 445px;">
<a href="http://localhost/wp-content/uploads/2010/07/boat.jpg">
<img title="boat" src="http://localhost/wp-content/uploads/2010/07/boat.jpg"
alt="Screenshot" width="435" height="288" aria-describedby="figcaption_attachment_64"></a>
<figcaption id="figcaption_attachment_64">Boat</figcaption>
</figure>

The Comments Form

One of the biggest improvements introduced in HTML5 is how form fields work and respond to user input. We can take advantage of these changes by using HTML5 form elements in the default WordPress comments form in three ways:

1. We can set the text-input type to email and url for the relevant fields. This not only more accurately describes the input field, but also adds better keyboard functionality for the iPhone, for example.
2. We can add the boolean attribute required to our required form fields. This goes beyond WAI-ARIA’s aria-required='true' because it invokes the browser’s own required behavior.
3. We can add placeholder text to our form fields, a popular JavaScript method that is now handled in-browser. Placeholder text allows you to go into more detail about what information is required than a form label generally allows.

Before adding HTML, a typical comment input field might look like this:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="text" value=""
size="30" aria-required='true' />

After our HTML5 changes, it would look like this:

<label for="email">Email</label> <span>*</span>
<input id="email" name="email" type="email" value=""
size="30" aria-required='true'
placeholder="How can we reach you?" required />

To make these improvements in the code, we need to do two things. First, we need to change the HTML for the default fields (name, email address and website URL), and then we need to change it for the comment’s <textarea>. We can achieve both of these changes with additional filters and custom functions.

To change the HTML for the default form fields, we need to add the following filter to the bottom of functions.php:

add_filter('comment_form_default_fields', 'twentytenfive_comments');

And then we have to create our custom function twentytenfive_comments() to change how these fields are displayed. We can do so by creating an array containing our new form fields and then returning it to this filter. Here’s the function:

function twentytenfive_comments() {

$req = get_option('require_name_email');

$fields =  array(
'author' => '<p>' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder = "What should we call you?"' . ( $req ? ' required' : '' ) . '/></p>',

'email'  => '<p><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span>*</span>' : '' ) .
'<input id="email" name="email" type="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' placeholder="How can we reach you?"' . ( $req ? ' required' : '' ) . ' /></p>',

'url'    => '<p><label for="url">' . __( 'Website' ) . '</label>' .
'<input id="url" name="url" type="url" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" placeholder="Have you got a website?" /></p>'

);
return $fields;
}

You can see here that each element in the form has a name in the array(): author, email and url. We then type in our custom code, which contains the new HTML5 form attributes. We have added placeholder text to each of the elements and, where required, added the boolean required attribute (and we need to check if the admin has made these fields required using the get_option() function). We’ve also added the correct input type to the inputs for author, email address and website URL.

Finally, we need to add some HTML5 to the <textarea>, which is home to the user’s comments. We have to use another filter here, also in functions.php:

add_filter('comment_form_field_comment', 'twentytenfive_commentfield');

We follow this with another custom function:

function twentytenfive_commentfield() {

$commentArea = '<p><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" required placeholder="What\'s on your mind?"    ></textarea></p>';

return $commentArea;

}

This is more or less the same as the default <textarea>, except with placeholder and required attributes.

You can control exactly which fields appear in your form with these two filters, so feel free to add more if you want to collect more information.

Although relatively simple, these changes to the comment form provide additional (and useful!) features to users with latest-generation browsers. Look in Opera, Chrome (which doesn’t yet support required) or Firefox 4 to see the results.

Header, Navigation and Footer

We finally get around to inserting the new <header>, <nav> and <footer> elements. Currently, the code in /wp-content/themes/twentyten/header.php looks more or less like this:

<div id="header">
<div id="masthead">
<div id="branding" role="banner">
…
</div><!-- #branding -->

<div id="access" role="navigation">
…
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->

It doesn’t take a genius to see that we can easily make this HTML5-ready by changing some of those divs to include <header> and <nav>.

<header id="header">
<section id="masthead" >
<div id="branding" role="banner">
…
</div><!-- #branding -->

<nav id="access" role="navigation">
…
</nav><!-- #access -->
</section><!-- #masthead -->
</header><!-- #header -->

You can see that we’ve left the WAI-ARIA role of navigation assigned to the nav element—simply to offer the broadest possible support to all browsers and screen readers.

I have replaced the #masthead div with a <section> because all of the elements in this area relate to one another and are likely to appear in a document outline. It seems you could delete this section altogether and just apply 30 pixels of padding-top to the header to maintain the layout. I’ve maintained the elements’ ids in case more than one of each are on the page—multiple headers, footers and navs (and more) are all welcome in HTML5.

While we’re editing the header, we can introduce the new <hgroup> element. This element enables us to include multiple headings in a section of our document, while they would be treated as just one heading in the document outline. Currently, the code on or around line 65 in header.php looks like this:

<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>

We can edit this to include the <hgroup> tag, and also change <div id="site-description"> to an <h2> element:

<hgroup>
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

In /wp-content/themes/twentyten/footer.php, we have:

<div id="footer" role="contentinfo">
  <div id="colophon">
  …
  <div id="site-info">
    <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <?php bloginfo( 'name' ); ?>
    </a>
  </div><!-- #site-info -->

  <div id="site-generator">
  …
  </div><!-- #site-generator -->

  </div><!-- #colophon -->
</div><!-- #footer -->

We can easily edit this to include a <footer> and another <section> element:

<footer role="contentinfo">
<section id="colophon">
…
<div id="site-info">
<a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</div><!-- #site-info -->

<div id="site-generator">
…
</div><!-- #site-generator -->

</section><!-- #colophon -->
</footer><!-- #footer -->

JavaScript and CSS

As mentioned, we should include an HTML5 shim or Modernizr.js to make sure that all of our new elements render correctly in Internet Explorer prior to version 9. I added the following line to header.php:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/Modernizr-1.6.min.js"></script>

A couple of things to note here. First, we no longer need type="text/javascript" because the browser will assume that a script is JavaScript unless it’s told different. Secondly, we have to use the WordPress bloginfo() function to point the source URL to our theme directory.

Although we are including Modernizr partly to make sure that IE can deal with the new HTML5 elements, I am serving it to all browsers because of the CSS3-checking functionality it provides.

In style.css, we need to make sure that our HTML5 elements have a display: block attribute, because some older browsers will treat them as inline elements. For our purposes, the following line at the top of the CSS file will do:

header, nav, section, article, aside, figure, footer { display: block; }

While we’re talking about CSS, remember that we can now remove type="text/css" from our <link> tags. The simplified code looks like this:

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

That should be enough for now. Remember, though, that changing the structure of the page by replacing older HTML elements with new ones might require some additional CSS.

We should let the small minority of users know that we’ve stopped supporting browsers that have JavaScript turned off. A polite message just below the opening <body> tag in header.php should suffice:

<noscript><strong>JavaScript is required for this website to be displayed correctly. Please enable JavaScript before continuing...</strong></noscript>

Add some very basic styling in style.css to make this message unmissable.

/* A message for users with JavaScript turned off */
noscript strong {
display: block;
font-size: 18px;
line-height:1.5em;
padding: 5px 0;
background-color: #ccc;
color: #a00;
text-align: center; }

Still Not Convinced? A Cross-Browser Alternative

There is another option for those of you who absolutely must support users with JavaScript turned off, as suggested by Christian Heilmann. Simply wrap your HTML5 elements with divs which share the same ID name. For example:

<article id="post-123">
...
</article>

becomes

<div class="article">
<article id="post-123">
...
</article>
</div>

Then it’s just a case of adding .article to your article CSS definition. It might look like this:

.article,
article { display: block; background-color: #f7f7f7; }

It’s worth noting that this adds another layer of markup to your code which isn’t needed for most users. I’d only recommend it if non-JavaScript users are a significant proportion of your users and/or sales.

Final Thoughts

TwentyTen was a huge step forward for WordPress; and as a piece of HTML, it is a beacon of best practice. By including some simple JavaScript, we can now open up the theme to the world of HTML5—and the additional meaning and simpler semantic code that it offers.

While we’ve addressed a good number of new HTML5 elements in this article, it really is just a starting point and you can add many more yourself. For example, you could add headers and footers to individual posts, or you might like to add the new <aside> element. Let us know your ideas and how you get on with implementing them in the comments below!

Download TwentyTen With HTML5

To complement this article, I have created a new version of TwentyTen, with the HTML5 elements we have discussed. Download this theme from TwentyTen Five.

Other Resources

You may be interested in the following articles and related resources:

• HTML5: A Vocabulary and associated APIs for HTML and XHTML
  The HTML5 spec. An essential reference to bookmark.
• New Theme: Toolbox
  WordPress announces the sandbox theme called Toolbox, built entirely in HTML5.
• Toolbox
  Download the WordPress HTML5 theme Toolbox.
• Redesigning With HTML5 and WAI-ARIA
  Bruce Lawson takes an early crack at introducing some HTML5 into WordPress.
• Coding an HTML5 Layout From Scratch
  New to HTML5? This is a great place to start.

(al) (vf) (ik)

© Richard Shepherd for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: html5, wordpress

No related articles yet.

The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

WordPress.com is a great platform for users who want to easily create a free website or blog. With more than 23 billion pageviews in 2010, the service is a hit with millions of users.

Premium themes are now available for WordPress.com, but the nature of the system still limits what plugins can be used and how deeply customized a design and overall site structure can be.

For that reason, it is natural that some WordPress.com users will want to take the leap to the self-hosted WordPress.org software.

Transitioning from WordPress.com to WordPress.org may seem daunting — especially for users who have lots of content and multimedia already hosted on WordPress.com. That’s why we decided to put together this screencast that walks through the entire process from beginning to end.

Moving From WordPress.com to WordPress.org

Note: This process covers moving from an existing WordPress.com blog to an existing WordPress.org installation. If you need help installing WordPress.org or finding a web host to use with WordPress.org, WordPress offers some recommendations.

Using Plugins to Re-create WordPress.com Features

As I point out in the screencast, the real key to getting WordPress.org to function (and look) like an older WordPress.com site comes via plugins.

Automattic, the company behind WordPress.com, has customized its hosted version of WordPress to include some built-in features that just aren’t included in a standard WordPress.org installation.

As a result, some media like videos, embedded tweets and polls may not show up properly.

I mention some of the most common plugins in the video, but here are some quick links:

• WordPress.com Stats — This will give you the same kind of stats on WordPress.org that are available to WordPress.com users.
• VideoPress — If you have ever paid for the VideoPress video upgrade, this plugin will bring the same functionality (and access to your VideoPress videos) to WordPress.org.
• Wickett Twitter Widget — This is the same widget WordPess.com uses to display tweets in the sidebar of a blog.
• Grunion Contact Form — This plugin was used as the basis of the new Contact Form feature in WordPress.com.
• PollDaddy — This plugin will enable any polls created in WordPress.com.

After the Move

After moving content from WordPress.com to WordPress.org and installing any plugins to enable native WordPress.com functionality, users may want to consider purchasing the Site Redirect upgrade from WordPress.com.

For $12 a year, WordPress.com will redirect your old WordPress site links to the new site. These are proper 301 redirects which means search engines will get updated to redirect traffic as well. That also means that most users won’t need to pay for the upgrade after the first year.

You can learn more about Site Redirect at WordPress.com and add the feature from the Upgrades section of the WordPress.com dashboard.

Your Tips

Have you ever migrated from WordPress.com to WordPress.org? Let us know your tips in the comments!

The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More Dev & Design Resources from Mashable:

– How WordPress Themes Actually Work [INFOGRAPHIC]
– HOW TO: Make Your WordPress Blog More Like Tumblr
– 5 Hot Design Trends for Aspiring Bloggers
– HOW TO: Make the Most of TextMate
– HOW TO: Secure Your WordPress Blog

More About: blogging, screencasts, web design, Web Development, web development series, WordPress, WordPress.com, wordpress.org

For more Dev & Design coverage:

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

No related articles yet.

The aggregated credibility score is shown as a percentage and a total number of comments in the hovercard that appears when a user is moused over in the Social Commenting plugin. Through extensive testing, we’ve determined that the percentage is calculated using the formula (total Likes – total instances marked as unhelpful or spam) / total Likes. For instance, a commenter who has had their comments Liked seven times and been marked as unhelpful once would have the equation (7 – 1) /7, which equates to 85%. Scores are rounded down and are higher than the equation specifies when there are less than five Likes.

Users and admins will be able to look at this credibility score and deduce whether a certain comment is from a reputable source. Trolls and spammers will accrue a low score or have a low number of total comments, indicating their comments aren’t worth replying to, and their links shouldn’t be clicked. High quality users will build a high score and large number of comments over time.

Authenticated Identity is Too Valuable to Risk

Websites often run into issues using their own commenting system or a third-party solution such as Disqus and Intense Debate because there are few deterrents to abusive behavior other than of a site-wide or widget-wide ban. Spammers, trolls, and those looking to dispense hate can easily create another account or move to another site without losing much.

But Facebook wields a much more powerful weapon: the ability to terminate a user’s account, severing all their friend connections. Most users will be too scared of such social ruin to abuse the Facebook Social Commenting plugin with their real account, whether professionally, as a joke, drunk, or in a fit of anger. Since the aggregated credibility score reduces the reach of using a fake account, users have to respectfully comment with their real profile to be part of the conversation.

Examples of the power of authenticated identity to promote serious discussion are already emerging. At the recent Online News Association meetup at Facebook headquarters, Andy Carvin, NPR’s Senior Strategist with their social media desk, said that the conversation on its Facebook Page is more civil than that occurring through the proprietary commenting system on its website.

With its simple cross-publishing feature; quick login for Facebook, Google, Twitter, and Yahoo! users via OpenID; aggregated credibility scoring; and the repercussions Facebook can levy against abusive commenters; any website that accepts comments should strongly consider implementing the new Facebook Social Commenting plugin when it’s released.

No related articles yet.

Remember how we were all freaking out on New Year’s Eve, 1999, convinced that the world as we know it would end — at the hands of machines, of course? Well, we weathered that storm and then some. Still, as we shamble forward into the next decade, it might be prudent to take pause and take stock of the years behind us. Translation: Back up your stuff.

Think of it as stockpiling food and building a fallout shelter for the 21st century. We have a ton of information, photos and memories scattered around the web that we would be loathe to lose, and while it’s unlikely that the entire Internet is going to come crashing down in the next week or so, it still might be wise to put some of that stuff in an iron box for safe keeping.

Read on, and Christina Warren and I will show you how to…

… Back Up Your Facebook

We’re coming pretty close to living our lives on Facebook — it’s our photo album, diary and mailbox, all in one — so why leave all that info up to the whims of the all-mighty servers? This October, the social network got hip to data portability after it started allowing users to download their profiles — photos, statuses, updates, videos and all.

The process is really too simple to forgo. Here’s how you can stow away your social life for safekeeping: 1). Go to Account Settings, 2). Click on “Download Your Information” and allow Facebook to download your info, 3). Wait for an e-mail that will let you know your info is ready (it takes a while, what with all the stuff you probably have on Facebook), 4). Go through the security test that allows you to download your info (kudos on that one, Facebook), and, voila, your profile is ported to your desktop in a nifty folder. Do this before you go through with that New Year’s resolution to make your profile less scandalous — you know, for when you’re old and gray and full of sleep and nodding by the fire.

… Back Up Your Tweets

Yes, the Library of Congress is now hoarding tweets, but that doesn’t do much for the casual user looking to keep a log of his own mundane musings, now does it?

Thankfully, you’re got some options. There’s TweetStream, which lets you back up your data as well as mine it for information and statistics. (Be warned, this service takes a looooong time to gather your info).

And if TweetStream doesn’t strike your fancy, TweetScan, a site we covered back in 2009, will track your data back to 2007, and, using OAuth, will even grab your timeline, tweets from friends and direct messages.

Pinboard, a paid, Delicious-like (RIP) tool, also lets you store your tweets. You can also back up or archive tweets from other usernames or from hashtags, as well as add favorites from a username and turn links embedded in tweets into bookmarks.

… Back Up Your Blog

After Tumblr’s epic outage the other week, we showed you all how to back up your blogs. Well, we’re just going to reiterate that right now, along with some solutions for WordPress as well. Remember how you felt when your mom threw away all your old journals, crammed to the margins with angsty poetry? Well, that’s not a feeling one would like to replicate later in life (unless it was relief — in which case, disregard).

Tumblr

Last year, Tumblr launched a backup app that allows users to save their blogs so that they can be viewed on any computer, burned to a CD or hosted as an archive of static HTML files. The app is super easy to use: Simply download, enter your Tumblr sign-in info and save your blog to your desktop (it looks like the below screenshot). You can launch the app and back up more info every time you post as well.

Note, this app is only for Mac OS X (10.5 or higher), but there are other options for those who use different operating systems.

WordPress

If your blog or website uses WordPress, grabbing a backup file of all your posts, pages and comments is easy. In the WordPress dashboard, just go to Tools, Export and choose what types of posts you want to export.

If you want a backup of your entire WordPress database, the excellent WP-DB-Backup plugin can make scheduled database backups for your WordPress site at intervals you choose and even e-mail you the backup file.

… Back Up Your Photos

If you’re like millions of Internet users, you probably upload most of your photos to a photo-sharing site like Flickr or Facebook. While you’re backing up your blog entries, tweets and Facebook messages, it might be a good idea to go ahead and archive all of your photos, too. If nothing else, this is a great way to destroy the evidence from that sorority beer bong tournament in college.

Flickr is a great service and in terms of reliability, it’s consistently solid. What’s less consistent is the whims of its parent company, Yahoo. If the Delicious debacle has taught us anything, it’s that Yahoo isn’t afraid to sell off or shut down a service with millions of daily users.

Lots of apps and tools let you back up your Flickr photo stream, but a quick, fuss-free way to unload years of photo uploads is the Adobe Air app Flump. The app works on Mac, Windows and Linux and downloads a copy of each photo in your stream to a folder of your choice.

Be aware that while this will grab each and every photo, tags, titles and photo sets are not preserved. There a few other alternatives if you’re willing to invest more time in the process, but Flump gets the job done.

Image courtesy of iStockphoto, matspersson0

More About: facebook, flickr, social media, tumblr, twitter, WordPress

For more Social Media coverage:

• Follow Mashable Social Media on Twitter
• Become a Fan on Facebook
• Subscribe to the Social Media channel
• Download our free apps for Android, iPhone and iPad

No related articles yet.

As this year begins to wrap up and businesses start preparing big plans for 2011, we expect social media and technology innovations to be a bigger part of small business digital budgets. To spark a bit of creativity and help get that process rolling, we’ve gathered 35 of our most useful small business posts from the past few months to make sure businesses are in the digital know.

Each week we put together a roundup of essential social media resources that you may have missed that week — you can check those out here. But this week we decided to take it a step further and provide you with another megalist of just our top small business resources from the past few months, including social media, tech, marketing & advertising, dev & design and mobile articles written especially for our small business crowd.

Of course, if you’re still hungry for more business resources, you can follow Mashable’s business channel on Twitter and become a fan on Facebook. Happy reading!

Social Media

• 5 Big Social Media Questions From Small Business Owners
  From group buying and location-based marketing to SEO and blogging, here are five fresh questions that small business owners have on their minds.
• How SMBs Can Start Using Facebook Places Now
  Here are a few pointers for how SMBs can leverage Facebook Places and other marketing tools starting today.
• Should You Search Social Media Sites for Job Candidate Information?
  Here are some pointers from recruiting and legal experts about when it is and is not appropriate to search social sites for job candidates.
• 5 New Ways Small Business Can Offer Location-Based Deals
  Small businesses can leverage verified checkins, barcode scanning, group buying initiatives, activity-based rewards, and opt-in lists for location-based deals.
• HOW TO: Respond When Social Media Attacks Your Brand
  Here are three examples of companies that received negative attention on social media and how you can learn from their mistakes or successes.
• 12 Clever Social Media-Friendly Business Cards
  While virtual business cards are becoming a viable alternative to paper cards, there is still a huge demand for traditional business cards. Here are 12 biz cards that integrate social media.
• HOW TO: Use Social Media for Lead Generation
  Being that social media is a great place to attract new customers, we put together a quick guide on how to use social media for lead generation.
• Why Small Businesses Shouldn’t Take Social Media for Granted
  When done right, social media can be a valuable source for customer acquisition, retention and satisfaction. Here a few reasons to help drive the value home.

Tech

• Are Groupon Stores and Do-It-Yourself Deals Worth the Risk?
  Groupon is rolling out a self-serve product called Groupon Stores that allows merchants to set up virtual storefronts and manage their own deals through the group buying site.
• How Online Private Sales Work and How Businesses Can Get Involved
  A look at the ins and outs of online private sales and how businesses can benefit from getting involved.
• 12 Video Tutorials for Improving Product Photos
  If your company sells items online, product photographs can be a key factor in how well they sell. These 12 tutorials will help improve your presentation.
• HOW TO: Connect With Other Entrepreneurs Online
  The best way to learn how to run a business is to run a business. But the second-best way is to ask someone else who runs a business. Check out these sites for advice.
• 5 Tips for Utilizing Skype for Business
  We could write a book-length guide on using Skype, but here are just five of our favorite tips for getting the most out of Skype for small business.
• HOW TO: Run Your Business Online With $10 and a Google Account
  Follow these steps and you’ll be on your way to a customizable and scalable business infrastructure that lives where your employees do: in the cloud.

Marketing & Advertising

• HOW TO: Run Location-Based Google Ads
  Learn how to use Google Boost, a new location-based ad product for local businesses.
• HOW TO: Earn Some Inexpensive Online Exposure for Your Small Business
  Looking for inexpensive PR? We spoke to some PR pros to find out how to tap into the online media and get your biz a little exposure without breaking the bank.
• HOW TO: Manage Your Presence on Google Maps
  Many of the features that you might normally associate with Yelp are actually included in what Google calls Place Pages. Learn how to manage your Google Maps presence.
• 4 Tips for Writing SEO-Friendly Blog Posts
  Search rank can be a powerful way to drive readers and customers to your site. Check out this advice on how to make your business blog more Google-friendly.
• 15 Excellent Corporate Blogs to Learn From
  Although the act of blogging can be quite simple, forethought and planning must first go into the creation of a corporate blog in order to keep the processes running smoothly.
• 10 Tips for Corporate Blogging
  There is a laundry list of issues that need to be addressed when it comes to improving corporate blogs, but here we’ve narrowed it down to 10 tips that companies should work on.

Dev & Design

• 10 Free Drupal Themes for Small Business
  Drupal, an open source CMS, is a wonderful option for businesses needing a powerful website without the typical costs of having one made from scratch. Check out these free themes.
• 5 Beautiful Tumblr Themes for Small Businesses
  There are hundreds of great themes that you can use with Tumblr to give your blog its own unique look. Here are five clean and professional faves for small business users.
• 10 Free WordPress Themes for Small Businesses
  Need a professional-looking WordPress theme to complement your business website or blog? Here are 10 great free options.
• HOW TO: Hire a Designer or Developer
  Here are four tips that will help you hire the best tech creatives and ensure you’re getting what you paid for.
• HOW TO: Communicate Needs & Expectations to Web Designers
  Hiring a designer is simple. But what you get from that designer depends on how well you communicate what you want, need, and expect. That part’s not so easy.
• HOW TO: Avoid Being a Disaster Client
  We spoke with a few designers to find out about their worst client experiences and what could be learned from them.
• 5 Lightweight CMS Alternatives for Small Businesses
  These five lightweight alternatives might not have as many options and features as a traditional CMS, but they are built with an emphasis on making web pages easy to create and update.
• 5 Small Biz Web Design Trends to Watch
  Here are five current design trends that most small businesses can tap into for great effect.

Mobile

• 13 Branded Mobile Apps That Got It Right
  Branded apps can be a great way to market your company while providing utility to users. Take a lesson from these 13 mobile marketing success stories.
• 9 iPhone Apps for Managing the Recruiting Process
  Instead of creating new processes or downloading a bunch of new apps, here are some iPhone apps you might already have that can help you manage the recruiting process.
• HOW TO: Build an App for Your Small Business
  Small to medium-sized businesses looking to build a Facebook, mobile or web app can choose to employ online DIY tools, freelancers, agencies or in-house devs. Learn more about the options.
• HOW TO: Accept Credit Card Payments on Mobile Devices
  Learn how to set up mobile payments with Square, Intuit GoPayment and Verifone’s PAYware Mobile.
• Why Small Businesses Should Care About Mobile Payments
  Studies show that mobile transactions are increasing exponentially. Will your business be ready when this trend hits the mainstream?
• HOW TO: Use QR Codes for Small Business Marketing
  If you’re unfamiliar with the business potential of QR codes, use this post as a crash course in how to get started.
• 5 Useful iPhone Apps for Business Networking
  Five useful iPhone apps that will help you become a better business networker.

For more business news and resources, you can follow Mashable’s business channel on Twitter and become a fan on Facebook.

Image courtesy of Flickr, windsordi

More About: advertising, business, conversational marketing summit, online advertising, online marketing, small business, social media marketing

For more Business coverage:

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

No related articles yet.

Microsoft and Automattic, the parent company of WordPress.com, announced today that the Windows Live Spaces blogging service will be phased out in favor of WordPress.com. Users of the service will have the ability to transfer their blogs via a new migration utility beginning today.

In a post on Inside Windows Live, Dharmesh Mehta, director, Windows Live product management, said:

“Over the last few weeks, we’ve spent a good bit of time talking about our approach to partnering with the web, and as part of that, how we’re deeply integrating with the leading consumer services that you find most valuable….

As we looked at customers’ blogging needs and what different companies were providing, we were particularly interested in what WordPress.com is doing….

So rather than having Windows Live invest in a competing blogging service, we decided the best thing we could do for our customers was to give them a great blogging solution through WordPress.com.”

Automattic’s Paul Kim added on the Just Another WordPress Weblog:

“Over a six month period, beginning today, Windows Live Spaces users will have the option to move their blogs to WordPress.com. To make this possible, we’ve created a brand new importer for Windows Live Spaces to WordPress.com. New Windows Live users will also be offered a WordPress.com blog when they choose to create a new blog.”

WordPress.com currently hosts nearly 14 million blogs. If even half of the 30 million blogs on Windows Live Spaces make the transition, it’s a major client acquisition for the WordPress.com service.

More About: automattic, microsoft, Windows Live, windows live spaces, wordpress.com

For more Social Media coverage:

• Follow Mashable Social Media on Twitter
• Become a Fan on Facebook
• Subscribe to the Social Media channel
• Download our free apps for iPhone and iPad

No related articles yet.

  

It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.

After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.

As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

The Future is Content and Data

Look at your mobile phone. If you’re like most tech-savvy consumers, you’ve likely got a smartphone of the Apple or Android variety (or maybe a Blackberry, especially if you’re working in the corporate world). Most of us use our smartphones on a near-constant basis doing everything from checking email to working on projects to entertaining ourselves. How much of all that do you do in your phone’s browser?

The answer is probably “not much”.

We use an app to check email. We use the Facebook app for status updates. We use Twidroid or TweetDeck or the official Twitter app for tweeting. We use a YouTube app to watch videos. We use the Pandora or Last.fm apps for streaming music.

Mozilla Prism is an application that lets users split web applications out of their browser and run them directly on their desktop. Is this the future of mobile applications?

It’s likely a similar scenario on our desktop or laptop computer. We use apps for a lot of our common Internet-based activities. We even have options to create our own apps with single-site browsers (like Fluid or Prism). And Google’s Chrome OS is just around the corner with devices already planned to use the web-based OS.

Content is king and design is becoming less relevant – we’re already seeing this with mobile themes

Look at how many WordPress sites use one of less than a handful of standard mobile themes. It doesn’t matter what the site looks like in a standard browser; open it up in your mobile browser and you’re often greeted with a page that looks exactly like the last 10 sites you visited.

This is because for most users, design is irrelevant. That’s not to say they don’t appreciate good design. Many of them do (and many of them don’t). But they’re on a website because of the content. They don’t care about visual design, and they don’t care about interaction designer that much, either: as long as the design doesn’t give them a headache or interfere with their ability to find what they want, they don’t really care how exactly it looks like or how exactly it is working. The most widely-used mobile themes offer the content in an optimized format for mobile viewing. That makes users happy.

It is not just apps that reduce the need to visit a website

It’s not just apps that will pull data directly, without the need for an actual website. Devices are making real headway in this manner. We have cars now that can pull information from the Internet for you. Soon devices for Google TV will be out in the marketplace, pulling video content from the Internet without the need to visit a website.

Soon devices for Google TV will be out in the marketplace, pulling video content from the Internet without the need to visit a website.

It’s likely that more devices will add Internet integration in the near future. At some point we’ll probably have refrigerators that automatically generate shopping lists for us (including any available coupons and where the best prices can be found that week): based on previous shopping habits; what we currently have; and our average usage rates for different foods. This is just one example of how online data and content will become infinitely more important than the designs surrounding that content.

Content Will Be Funneled Through a Handful of Sources

It’s impractical to have apps for every website we visit. Most of us visit hundreds or thousands of websites every year. What’s more likely to happen is that most of our content will be delivered through aggregators.

Who will these aggregators be?

Currently, there are three big players on the Internet that are likely to continue to be the primary content delivery platforms. Who are they? Twitter, Facebook and Google. Think about where you spend most of your time online and you’re likely going to find that those are the sites you visit most often. This market share is only going to increase.

Facebook is already trying to be the Internet

Look at how much content is now aggregated through Facebook. They have pages for virtually every topic under the sun (most of which have canned content taken directly from Wikipedia). Post a YouTube video to Facebook and your friends can watch it right there, without ever leaving Facebook. Even third-party applications like Networked Blogs stick pretty closely to the Facebook environment.

Post a YouTube video to Facebook and your friends can watch it right there, without ever leaving Facebook. Even third-party applications like Networked Blogs stick pretty closely to the Facebook environment.

Besides that, look at the gaming environment that’s cropped up on Facebook. I’ve lost track of how many updates in my news feed are directly related to games like Farmville or Mafia Wars. Facebook has grown into such a complete online ecosystem that many users might never find a reason to leave. Facebook shows no signs of slowing down either. They’re expanding their business and their reach – a trend that’s likely to continue for as long as they can sustain it.

Google wants everything to go through them

Google already has its hands in virtually everything online. It has two operating systems (Chrome OS and Android), its own browser, web applications that allow you to do a lot of things that used to be limited to desktop applications and the most-used search engine in the world put it in a pretty solid position to continue to be a major stakeholder in the future Internet.

Google is also one of the more forward thinking and active participants in Internet policy and technology. It has a vested interest in how the Internet shapes up in coming years and will push to shape that Internet in a way that benefits its business model. I can see a future where Google doesn’t just offer a list of search engine results, but actually shows you the content you’re looking for without ever leaving their sites.

If you look at Google’s complete product offering, it’s easy to see that it wants to be the primary online destination for most people (or maybe even all people). Google is firmly positioned in blogging, video, search, business applications, webmaster tools, ecommerce and even phone services – expect its reach to expand even more.

Is there room for other services?

There are always going to be innovative startups online. Most will fall by the wayside soon after they’re started or are absorbed into other established companies. A select few will go on to become major influencers online. It’s unclear at the moment where there’s room for new companies and services online. The idea of more location-based services (going beyond FourSquare, et al) is probably the most promising as well as services that go beyond normal Internet activities and integrate into daily life more.

Function Will Prevail over Form

If everyone is accessing web content through an app rather than a browser, then no one will care what a website looks like. The way it functions and the content it delivers will become the paramount concerns to users. There will be no more balancing of form and function on a website; function will override form.

Form will retain a place in the design of apps. In all likelihood, content will be open to the extent that APIs will be developed that anyone can then use in application development – so the form in which an app displays that data will become what separates the good from the bad, the great from the mediocre.

There are Advantages…

There are some big advantages to this kind of model where apps and a small number of content aggregators deliver and control most of the content online. One issue is bandwidth. If there’s no design being transferred to a device (because the application on the device already includes all the design elements), that saves bandwidth. As more and more activities are done online, we’re going to have to consider infrastructure costs. Lower bandwidth use per site will result in more bandwidth available.

Another advantage is that there’s more potential for user control. Users can define their preferences on their device and see content in the way they want. This especially has positive implications when it comes to accessibility. Those who need special settings because of a disability will no longer have issues with unviewable content.

Technical advantages

Let’s face it: the technologies upon which the Internet is built aren’t the most efficient ones available. Part of this has to do with building upon infrastructure that isn’t as good as it could be. The Internet has to be backwards-compatible over very long periods of time. We can’t just suddenly change things, even if it is to make things work better in the future, if it causes half the sites out there to no longer function.

With a content-based Internet that uses device-side applications for displaying data and performing tasks, we can create more efficient applications. We won’t need to make sure each application can handle a huge variety of content and processes (as browsers currently have to do), because we’ll know exactly the kinds of data that application will need to process.

What Does It Mean for Users?

Practically, users will have a more integrated experience with the content they view and the services they use online. The Internet will become even more a part of everyday life, incorporated to such an extent that it’s seamless. It’s already happening in bits and pieces.

Again, look at your phone. You probably use apps or widgets for things like checking the weather or generating a shopping list. These apps will become more integrated and will work better with the data available online. For example, you could use that shopping list to automatically find the best prices on products, either online or at your local stores. In all likelihood, that data would be aggregated through a service like Google Base.

One profile fits all

An online profile will become even more important for users. Rather than setting up every device or service you have, you’ll simply authorize the device to grab your profile and preference information from the web. Security and privacy experts will have a field day with this, but most consumers will opt to use it anyway if it means the difference between going through a two-hour manual setup process or clicking a button and authorizing it to set everything up automatically.

What Does It Mean for the Web Design Industry?

So what does this all boil down to? If the web becomes app-based and content-based, where do web designers fit in — if at all? The bad news is that if the Internet starts relying much more heavily on access via app rather than browser, there’s going to be a lot less demand for web designers. Companies won’t see the point in hiring someone to create an entirely bespoke website when they can just use a template and then feed all their content to Google and Facebook and Twitter.

Developers, on the other hand, will likely see a boom in business. A lot of money will be exchanging hands for apps that work better than current offerings and apps that might be able to undermine the big players. Of course, all these apps also need design work, but it will be a lot less demand than there is now for website design. It’s likely a lot of designers will need to expand their offerings to cater to content creation rather than just web design.

Websites aren’t going to go away any time soon. It’s likely that there will be a bigger market for templates and themes as companies stop paying for custom designs. And there will be certain kinds of sites (like portfolios or art projects) that will always want to be designed.

Multimedia content will also still have a strong market. Those who can produce high-quality videos and even web-based apps (for things like Chrome OS) will have a strong business for years to come.

Who Wins in All This?

If there’s a definite winner in this possible future Internet, it is the content creators. If the only thing that sets one company or organization apart from their competition, then those who can create high-quality content will be in high demand. The thousands of dollars that a company used to be spent on website design will be funneled into website content instead.

Users will also benefit as they’ll have a more integrated, customized experience. Their version of the Internet will be tailored specifically to them, based on their own wants and needs. They’ll get content in the manner they prefer and find most usable.

Application developers will also likely win in all this. While the APIs and the data available will be pretty standardized, the manner in which it’s displayed will become a battleground of creativity. Innovation here will be key, doing something different and better than what everyone else is doing is the only way an app will stand out.

Update

Update (26.09.2010): We’ve got quite many negative responses for this article, like Web Designers Won’t Die Out, They Will Transition. At Smashing Magazine, we are aiming for strong, high quality articles and after reading the article we do think that it raises some valid points, and now in retrospect we understand why the title and the content may appear to be aggressive. We also can see where the accusation of trying to be sensationalist comes from. But it was never the intention of the article.

We are trying to do our best to provide only relevant and high qualilty content, but apparently sometimes we see our things differently than our readers do. We do appreciate constructive criticism like the above post on Drawar. And we are listening to what you are saying. And we will certainly keep it in mind for our future articles.

(afb)
Tweet

© Cameron Chapman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

No related articles yet.

No related articles yet.

  

It’s hard to believe that a year has passed since our last WordPress theme collection, but there you have it — the time has come again. Once a year we feature the most useful and interesting WordPress-themes that we are collecting over months and present them in a nice quick overview. The collections from 2007, 2008 and last year are still useful, but some of the themes are outdated or updated now.

Looking back over these previous theme articles, you can clearly see how and why WordPress has rapidly matured into the CMS powerhouse it is today. With all of the features that have been added and improvements made with every new WordPress version and with its ever-increasing popularity among the design and development community, the quality of free themes is evident. Developers are continually pushing WordPress’ boundaries, giving us today’s outstanding free theme collection.

Today, we present a fresh collection of useful WordPress themes. Please notice that some themes are a bit older, but they are included because we haven’t featured them last time. This round-up picks up where we left off last year: most themes below were released between June 2009 and August 2010. We’ve also split this collection into the following categories: gallery and portfolio themes, themes for bloggers, e-Commerce WordPress themes, clean themes, magazine-style themes, minimal themes, mobile themes; pre-launch themes; and finally “Themes That Take WordPress Beyond.”

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Gallery And Portfolio Themes

Cumulus (Free version) (demo)
Cumulus is a very clean and calm portfolio theme. It contains a large block for featured projects and images and a nifty blog posts navigation in the sidebar.

Imbalance (demo)
Free wordpress theme in modern-minimalist style. Imbalance is a very user friendly, jQuery powered theme which looks really well under any browser and OS. Perfectly fits for your blog, online magazine or portfolio websites. It is optimized for high-loads, contains WordPress 3.0 menu support, Twitter widget, jQuery-based gallery and WP Post Thumbnails support.

Shaken and Stirred Theme (demo)
This theme is perfect for you if you’re in need of a gallery/portfolio website or if you just want a website with a unique grid layout that not many websites have taken full advantage of yet. “Shaken Grid” uses the jQuery Masonry plugin which “arranges elements vertically then horizontally according to a grid.” The result is a gap-less layout even if you have varying post heights.

AutoFocus+ (demo)
The theme is designed on an 800px, 8 column grid layout that truly allows your images to shine. The theme boasts a sharp typographic approach with a 22px baseline grid, and a Garamond/Helvetica (Times/Arial for you PC users) font stack that’s much easier to read.

Fotofolio Landscape (demo)
A nice dark WordPress theme with sidebar navigation and jQuery-powered lightbox for images. A good choice for photographers who want to feature their works in an online portfolio.

FolioGrid (demo)
This theme contains a fluid grid-based layout, jQuery-based transitions and automatically resizing thumbnails. Also, you can choose between various page tamplates, and the theme has a widget-enabled area, too.

Mansion (demo)
Mansion is a free photoblogger’s theme for WordPress. It features a flexible-width thumbnail grid for both images and photo journal entries. Mansion is perfect for those who want to primarily showcase their photographs and occasionally write blog posts.

PhotoView (the link is currently unavailable due to server problems of the theme’s author) (demo)
PhotoView was designed for displaying photos and videos in a simple and clean manner. The theme has an integrated lightbox. Also, a PSD file is included for easy customization.

SimpleFolio (demo)
SimpleFolio is a portfolio theme that includes a blog and a very extensive option page that allows you to exclude all your portfolio items from the blog page. It also includes a front page slider. It has 2 different widget areas and threaded comments, and also supports paged comments and has 2 different page templates for advanced usage. The control of images is done from the post page.

Smashing Multimedia (demo)
This theme was designed especially for podcasters, photographers and users who can now easily embed videos and images, rate them and showcase them in their own WordPress-based blog. It has a parent theme and an easily customizable child theme. This WordPress Theme comes with layered PSD source files, a visual help guide and is fully localized ready for you to translate it into your target language.

Fullscreen Photo and Multimedia (demo)
Fullscreen is a free one-column photography and multimedia theme for WordPress that can be used for portfolios, photoblogs, videoblogs, and virtually anything else where you want your content to be front and center. It provides visual artists a unique way of presenting their latest work online using a minimalist side-scrolling homepage.

Brave Zeenat (demo)
A clean Portfolio Theme ideal for photographers, artists and designers to showcase their portfolios.

Monokrome (demo)
This grid-based theme is widget ready and has a Twitter stream and Flickr integration. The column width adapts to the width of the images and the width of the browser viewport.

Portfolio WPESP Theme (live demo)
Portfolio – WPESP Theme is a “minimalist” Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using WordPress as CMS.

Selecta (demo, WordPress 3.0+ compatible)
Selecta’s rounded edges and bold, modern color palettes make for a fresh theme that’s best suited to blogs where video will be the main focus. The wider-than-usual frames around thumbnails and videos bring to mind the retro-cool of Polaroid photographs and old home movies.

Work-a-holic (demo)
Work-a-holic is a free two and three column WordPress theme that focuses mainly on showcasing portfolios for artists, web designers, photographers and illustrators.

BlueBubble WordPress Theme (demo)
The theme is clean and simple, contains a theme options page, uses post image thumbnail plugin, has 2 widget ready sidebars and uses jQuery/PHP-based contact form with easy customization. Requires WordPress 2.9+.

WordPress Themes For Bloggers

Lap of Luxury (demo)
This theme uses gold in the logo, and white and black are used as the main colors. The 2-col theme contains a sidebar on the right that allows for a large square ad up top, and splitting into 2 columns below that. Comes fully widgetized. A special feature of this theme is the logo changer.

Katana (demo)
This theme has a simple layout based on anime or game niche. Theme will be suitable for blogs of such niches. Theme has features like featured post section, post thumbnails, banner ads, adsense, twitter widgets etc. Theme uses custom fonts for various titles. It has an intuitive theme option page which lets you configure the theme.

Koi Theme (demo)
Koi is a simplified version of N.Design Studio’s theme (2009 redesign). Key features: multi-level dropdown menus, social media buttons, threaded & paged comments, and sidebar widget plus three footer widgets. This theme includes an option page to manage dropdown menus, favicon, footer tracking code, and social media buttons. Requires WordPress 2.9+.

Bueno
Bueno is a clean, minimalistic design which sophistication in both its typography and structure. It uses a grid-based design, has integrated banner ad management, widgetized sidebar and 7 different color schemes. Also, the theme is packaged wth a .po file for easy theme integration.

Notepad Theme (demo)
The theme is inspired by the iPhone’s Notes.app. This new theme is widget compatible with threaded comments, social media buttons, and multi-level dropdown menus. It has been tested on WordPress 2.9 with Firefox, Chrome, Safari, and IE7+. It also includes some nice CSS3 enhancement such as rounded corners and drop shadow.

Strukture (demo)

Peacekeeper (demo)

The Seven Five (demo)
A minimalist blogger/social theme including several customization and layout options.

Simplo (demo)

Galaxy (demo)
The Galaxy WordPress theme is a two column theme that supports banner ads and the WP-PageNavi plugin. Perfect theme for personal blogs.

Aparatus (demo)

Zexee (demo)

Cyangant Elegant (demo)

Obscure (demo)
A dark magazine wordpress theme suitable for any site nitche and best fit for community-based sites.

Designpile (demo)

Obscorp (demo)

The Side Blog Theme (demo)
A free blogging theme with all sorts of customization and content management options.

E-Commerce WordPress Themes

e-Commerce Theme: Kelontong (demo)
The theme has a simple layout, clean, professional look, is integrated with WP e-commerce and features a slideshow for products.

Dangdoot (e-commerce theme: free version) (demo)
Dangdoot is a free e-commerce theme for WordPress and requires the e-Commerce plug-in.

AppCloud (e-commerce theme: free version) (demo)
AppCloud is another free e-commerce theme for WordPress. (It too requires the e-Commerce plug-in).

Clean WordPress Themes

Blissful Blog (demo)

The Ideal Website
The Ideal Website is designed to fit Fibonacci’s Golden Section – otherwise known as the divine proportions. These measurements are said to be the most pleasing to the eye, and have been widely used for everything from judging beauty of a face, to the design of bank notes.

Un.complicated Theme (demo)
The layout is minimalist, clean, and organized into three 320px columns. This theme, are built on Starkers and implements the The Golden Grid. here is a wigetized sidebar, which looks like a regular three column row. I have also integrated twitter within the theme, using javascript. All the user has to do is find this line in the index.php page.

Voidy (demo)
Voidy is the perfect theme for your great blog. It is clean, clear and beautiful. It is minimalistic two-cloumn theme with the widgets all arranged in the right sidebar. Voidy was designed to make your content stand out and make everything else get out of the way.

Clear (demo)
Clear is the perfect theme for great authors. It is clean, clear and beautiful. It is minimalistic one-cloumn theme with the widgets all arranged at the bottom. Clear was designed to make your content stand out and make everything else get out of the way.

Delicate (demo)

Boldy (demo)
A free theme that includes support for WordPress 3.0 Menu Management, has in-built slideshows, jQuery-based forms and live form validation as well as a widget for Twitter.

Smooth (demo)

Inuit Types (starter edition) (demo)

Modernist (demo)
The theme is based on the design ideas of Jan Tschichold, Josef Müller-Brockmann, Dieter Rams, and other modernists. Beautifully built yet transparent, it was designed with a focus on optimal typography in order to better showcase your content: text, images and video.

Titan Theme (free edition) (demo)

YouAre Theme (demo)

Simple Organization (demo)

Neutra (demo)
Neutra is a simple and elegant theme for WordPress. Grid-based with focus on simplicity and typography.

The Erudite (demo)
A theme for writers who want readers, not visitors, traffic, click-throughs, CPMs or what-have-you. Carefully crafted typography and generous use of whitespace lets your writing shine. Version 2 includes a dark theme option.

Magazine-Style Themes

The Columnist
The Columnist WordPress theme is inspired by traditional newspaper layouts and the grid structures and typography techniques they employ. It has WordPress thumbnail support, widget support, CSS3 column structure, jQuery animations, custom fields for images and featured latest post area.

The Structure Theme (the link was removed because the pricing was changed after the article was published, demo)
The Structure Theme is a free WordPress theme with a modern minimalist design. There are 4 themes included with the Structure Theme download; a white theme, black theme, two column blog and a single column blog design. The theme was created with a simple and clean aesthetic meant to easily adopt the style of the content added to the site. The Structure Theme is also designed with customization in mind. Meaning, with a little work, the theme can be completely personalized to suit your brand.

Aurelius (demo)

Tanzaku (demo)

The WhatsUp (demo)

WPCount (demo)

Maimpok (demo)

Malleable (demo)

Furvious (demo)
A nice theme coming with 5 color styles, powerful admin framework and featured posts area.

Newspress (demo)

Minimal WordPress Themes

Modernist

Reptile

WP-Notes (demo)

Satoshi (demo)

Ulap Theme (demo)

Manifest
The goal with Manifest was to create a clean and streamlined theme that focused on the content and not the distractions. It utilizes a single column, 500 pixel wide layout. No sidebars. No widgets.

Miniml Press Theme (demo)

Functionalism (demo)

LifeStreaming White (demo)

Vostok (demo)
Vostok is for those who don’t want attention to be distracted from content. Colors and typography have been carefully chosen to achieve maximum legibility with minimum eye fatigue. Also, code has been written with extreme care for web standards and accessibility.

Mini (demo)

Mobile Themes For WordPress

iPhonsta WordPress theme (demo)
iPhonsta Theme is made for iPhone but it also looks nice on other mobile phones and gadgets. iPhonsta wordpress theme is an easy way to expand your visitor’s loyality by providing them with a mobile version of your website.

WordPress Mobile Pack
The WordPress Mobile Pack includes the following: a mobile switcher to select themes based on the type of user visiting your website; a selection of mobile themes; extra widgets; device adaptation; and a mobile administration panel to allow users to edit the website or write posts while out and about.

WordPress Mobile Theme
This is a minimalist theme that can be used to target mobile users. The theme works with any mobile phone of any resolution. And with its light weight, it also drastically reduces loading times.

Möbius
Möbius is compatible with iPhone (and iPod Touch), Android, BlackBerry, Windows, Palm Pre and Symbian touchscreen mobile phones.

News Press Mobile
The News Press theme is a simple and elegant solution for creating an iPhone-friendly news, blog or other text-centric WordPress website. It comes complete with all the standard WordPress blog features: search, log-in, categories, tags, archives, photos and more.

Carrington Mobile
Carrington Mobile is an elegant mobile theme that supports advanced touchscreen browsers (iPhone, Android, BlackBerry, Pre) and that is also backwards-compatible with older mobile devices.

Pre-Launch WordPress Themes

BEBACKWP (demo)

Ice Breaker (demo)

Ready2Launch! (demo)

WP Blueprint

Themes That Take WordPress Beyond

GuruQ (demo)
GuruQ is a basic theme designed to be used for Q&A websites. Visitors post questions to the guru, and the guru answers via the WordPress admin screen.

P2 (Like Twitter in a Box)
P2 is a theme for WordPress that transforms a mild-mannered blog into a super-blog, with features like inline comments on the home page, a posting form right on the home page, inline editing of posts and comments, real-time updates (to display new posts and comments without reloading) and much more.

Driftwood Contact Manager (demo)
Driftwood is a contact manager theme built for WordPress. This easy-to-use theme gives you an effortless way to track interaction with your clients and contacts.

Aggregator (demo)
Aggregator is a theme that aggregates feeds of any kind in one place and in an attractive format.

GTD (private theme for teams to collaborate)

MiniCard (demo)
The MiniCard theme supports hCard and vCard microformats, it supports a ton of social networks, it can accommodate some portfolio items (optional), and it does much more, all from the dedicated theme configuration page.

LiveTwit (demo)

WordPress Theme Tools

Elastic Theme Editor
The awesome Elastic is a visual theme editor and engine for WordPress. It takes a completely innovative approach to theme development. To get an idea of what it can do, check out this video:

Divine (Convert PSD to WordPress)
Divine is a Photoshop plug-in that allows you to assign WordPress roles to your main elements (e.g. #footer, #header, etc.). The plug-in then prepares all the files you need. Once you set up FTP access, the tool uploads the theme automatically to your server. Look at this video for insight into how Divine works:

WordPress Debug Theme
The WordPress Debug theme allows you to check early on for any possible issues you might have with your WordPress installation. It is quite simple for now, doing only a few things, but it does them very effectively.

Starter And Blank WordPress Themes

Starkers HTML5 WordPress Theme Kit
Starkers is a bare bones WordPress theme created to act as a starting point for the theme designer… Free of all style, presentational elements, and non-semantic markup, Starkers is the perfect ‘blank slate’ for your projects, as it’s a stripped-back version of the ‘Default’ theme that ships with WordPress

WP-Constructor
WordPress Constructor is a many-in-one theme. It contains 6 sidebar variations and three layouts (and you can create new is easy). You can configure colors and fonts. The theme also has post thumbnails (WordPress 2.9+) and navigation menu customization options (WordPress 3.0+).

Buddymatic Theme Framework
Buddymatic is a highly extensible theme framework for WordPress and WordPress MU blogs, including BuddyPress-enabled home and member blogs.

ET Starter Theme for WordPress
The ET starter theme lets you easily choose between a one-, two- and three-column layout. It supports the WP-PageNavi, Twitter Tools and Contact Form 7 plug-ins and also includes a built-in jQuery drop-down menu.

WordPress Skeleton Theme
The feature-rich WordPress Skeleton Theme has been developed to speed up and streamline your WordPress development. One of its outstanding out-of-the-box features is CSS support for the iPhone and iPad (both portrait and landscape); simply edit the iPhone.css and iPad.css files.

Paintbox CMS (demo)
Paintbox CMS is a grid-based CMS theme layered on my actual theme-canvas Paintbox. It comes with a smooth 960 grid layout plus some creative jQuery effects for content loading.

BLANK
Blank is a theme with all the functionality of a typical WordPress theme but almost none of the styling. The idea is that using this as your base theme is far easier than using one that is already styled.

(al)

© Paul Andrew for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: themes, wordpress

No related articles yet.

Today we’re launching the Tweet Button to make sharing simple. It lets you share links directly from the page you’re on. When you click on the Tweet Button, a Tweet box will appear — pre-populated with a shortened link that points to the item that you’re sharing.

After you post to Twitter, you may see suggestions for accounts to follow. These accounts are suggested by the web site you visited and may include, for example, the news outlet and reporter of the article you shared.

Check out our video, and try out the button at the bottom of this post!

The Tweet Button is not only simple for users, but for publishers of all sizes, too. Recreational bloggers to large media companies can quickly and easily add the Tweet Button to their sites. It only takes a few lines of code. The Tweet Button will help publishers grow traffic and increase their Twitter following.

You may have seen similar buttons on blogs, news sites and other places that let you share content on Twitter. These have been created by third parties. Most notably, a company called TweetMeme created a popular “retweet button” for publishers. They’ve already made it easier to share links on Twitter and have helped a tremendous number of publishers get their content into Twitter. We’re pleased to be working closely with the good folks at TweetMeme and, from here on out, they will be pointing to the Twitter Tweet Button. Check out TweetMeme’s blog to learn more about what they’re up to next.

Starting today, the following sites will use the Tweet Button. All of them integrated this in less than one week.

AddThis
Arizona Republic/azcentral.com
Ask.com
CBS Interactive
CNN.com
Cracked.com
Detroit Free Press
eHow.com
Eventbrite
Gawker Media
HuffingtonPost.com
Hulu
LIVESTRONG.com
Redfin
SFGate.com
ShareThis
Sky News
The Cincinnati Enquirer
The Des Moines Register
The Indianapolis Star
The Onion
The Tennessean
Threadless
TIME.com
TV Guide
USA TODAY
WordPress.com
WUSA 9
Yardbarker
YouTube

Our guess is that more than a few sites will join the above in the hours to come. Get the Tweet Button for your website today and let the sharing begin.

No related articles yet.

The company says it is “hoping this will be an awesome new way to discover other interesting bloggers and start new conversations with people who – literally! – like you.”

Sponsor

According to the blog post introducing the new feature, liking a post does two things.

First, the blog post’s author sees your “like” and can click through to your Gravatar profile. Second, clicking “like” saves the post in your homepage dashboard (in the “Posts I Like” section), so you can share it with others or just keep it around for future reference.

The feature is currently only available for blogs hosted on WordPress.com (though this accounts for more than 10 million WordPress blogs) and to signed-in bloggers – that is, people with WordPress accounts. That non-bloggers (the majority of visitors to blogs) could not choose to like a post was a main complaint in the comments.

On blogs that enable the new “like” feature, small images of each blogger that has liked a post is shown at the bottom of each post. Each image links to the Gravatar profile of the blogger.

The look and feel is very similar to the Facebook Like – too similar, really. It’s an approach we have to question. Immediately, we went to try out the “like” feature, found that we couldn’t and saw no indication as to why. Only through reading through the comments did we realize that we needed to be logged in as a WordPress user to take part. And what about WordPress bloggers that also integrate the Facebook “Like” at the bottom of their post page? Will the two show up side-by-side?

In the comments on the post, WordpPress blogger Andy Peatling defends the feature, noting that “It does still say that “X number of bloggers liked this post” so it should be fairly clear what the images mean. The only thing that is different is the button is gone.”

The Web is full of examples of one service copycatting another, often to users’ delight. What do you think about WordPress’ attempt at co-opting the Facebook “Like”? Will it be a hit or just a confusing factor for readers? Or will it create more of a WordPress community and take WordPress in a new, more social direction?

Discuss

No related articles yet.

Ask A Question With Every Post

The secret is to simply ask a question each time you share your article via your Facebook Page. If you don’t have a Facebook Page for your site, you can set one up in a few minutes by going here. Every time you write a post on your blog you should share it on your Facebook Page, however rather than just sharing the article, try asking a question. The question doesn’t always have to be related to the article itself. There are a number of benefits from asking a question, however here are 3 primary benefits:

Greater Engagement Leads To More Exposure

One of the most important benefits from simply asking a question is that it increases engagement and it provides you with a higher “post quality” rating. According to Facebook, “The Post Quality score measures how engaging your Posts have been to Facebook users over a rolling seven-day window.” What most people don’t realize is that this post quality impacts the visibility of your feed stories. If a post has a large volume of replies and likes, it tends to get better placement in your fans’ news feeds.

Increasing this score should increase the likelihood that your future posts will end up with better placement in each user’s news feed.

More Clicks On Your Articles

Better placement in the news feed means that you’ll also get more clicks on your feed stories. In other words, there’s no reason that you shouldn’t be asking at least one question with your posts. Also, keep in mind that some of the best questions are those that require a simple “Yes” or “No” from your fans. People don’t have a ton of free time (even though they’re spending much of it on Facebook), so make it easy for them to respond with a short response.

A Greater “Share Count” On Your Articles

Want to have a post that goes viral? The first step to accomplishing that is making the blog post appear viral to begin with. Did you know that the “share count” which appears next to likes and share buttons is not actually the number of times that article was shared? It’s actually the sum total of the following: the number of comments on the story + the number of likes + the number of shares. Yes, you read that right. The number of comments and the number of likes impacts your overall share count.

The more popular your blog posts appear, the more likely that they will be shared by others. A quick way to instantly inflate the number of shares or likes on a post is to ask a question and get people to respond to that question. That comment count will then be included in your share count. I see too many professional blogs that aren’t taking advantage of this feature, and to be honest, it’s simply being lazy.

Conclusion

It only takes 5 seconds to ask your fans a question and to get them engaged. If you think you don’t have time to ask a question, then think again. Increasing engagement can also increase the rate of growth of your Facebook Page. It will also help you end up in the feeds of more of your fans. While you can let your Facebook Page stagnate like the majority of Facebook Pages, why not take an extra 5 seconds to share that article you spent 30 minutes (or more) on? It will provide lasting value.

No related articles yet.

In March, VideoPress added support for Facebook so that when using Publicize, your videos would get added to your Facebook update as well.

Until now, we’ve neglected your images.

Starting today, however, we’ll cherish your images as much as we already do your text and video; when sending a Facebook Profile update, WordPress.com will include any image you upload to the post. Image support was the #1 most requested feature for Publicize: Facebook, and we’re happy we finally got around to it

(Before you ask, the #2 most requested feature is the ability to update Facebook Pages as well as Profiles, so it’s already on our list.)

Since we started, you’ve sent out nearly 1.3 million Facebook updates from WordPress.com. Keep them going!

NB: Only the first five images uploaded to a post and included directly, in a gallery, or in a slideshow will be sent to Facebook.

No related articles yet.

A broken telephone I saw while wandering around Bangkok

It’s happened to all of us. The night starts off innocently enough with a little gin and tonic, maybe a mojito, then next thing you know you’re doing tequila shots with the bartender and the girl from Brazil and you find yourself thinking it would be a treMENdous idea to call up your ex and see how they’re doing and perhaps impress them with your newfound wit.

We’ve got the cure. Now, instead of drunk dialing random friends, lovers, and acquaintances one at a time, what if you could dial your blog and talk to the whole world at once? It’d be like something out of Star Trek.

The future is now, folks. You can now go to your My Blogs tab, enable Post by Voice, and get a special number and code to call your blog. After you’re done, the audio file from your phone call will be posted to your blog for all to listen to and enjoy. (And added to your RSS feed for podcast support.)

So now you can post to your WordPress via the web, email, iPhone, Android, Blackberry, desktop clients, and now any telephone in the world. Of course when you post it can be pushed to Facebook, Twitter, and more using the Publicize feature. What more could you want?

Right now this is completely free, but we’ll charge you money to take down posts. Just kidding! We’re making it free and allowing recording lengths up to sixty minutes, but that limit may go down without a paid upgrade in the future. Mostly we’re just curious to see how people use this.

I have a few ideas myself, but to find out you’ll have to listen to this voice post:

No related articles yet.

For a more comprehensive look at everything that has improved in 3.0 check out 3.0′s Codex page or the long list of issues in Trac. (We’re trying to keep these announcement posts shorter.) Whew! That’s a lot packed into one release. I can’t think of a better way to kick off the 3.X cycle we’ll be in for the next two and a half years.

The Future

Normally this is where I’d say we’re about to start work on 3.1, but we’re actually not. We’re going to take a release cycle off to focus on all of the things around WordPress. The growth of the community has been breathtaking, including over 10.3 million downloads of version 2.9, but so much of our effort has been focused on the core software it hasn’t left much time for anything else. Over the next three months we’re going to split into ninja/pirate teams focused on different areas of the around-WordPress experience, including the showcase, Codex, forums, profiles, update and compatibility APIs, theme directory, plugin directory, mailing lists, core plugins, wordcamp.org… the possibilities are endless. The goal of the teams isn’t going to be to make things perfect all at once, just better than they are today. We think this investment of time will give us a much stronger infrastructure to grow WordPress.org for the many tens of millions of users that will join us during the 3.X release cycle.

It Takes a Village

I’m proud to acknowledge the contributions of the following 218 people to the 3.0 release cycle. These are the folks that make WordPress what it is, whose collaboration and hard work enable us to build something greater than the sum of our parts. In alphabetical order, of course.

Committers: azaozz (Andrew Ozz) (prof), dd32 (Dion Hulse) (prof), donncha (Donncha O Caoimh) (prof), iammattthomas (Matt Thomas) (prof), josephscott (Joseph Scott) (prof), markjaquith (Mark Jaquith) (prof), matt (Matt Mullenweg) (prof), nacin (Andrew Nacin) (prof), nbachiyski (Николай Бачийски) (prof), ryan (Ryan Boren) (prof), westi (Peter Westwood) (prof), and wpmuguru (Ron Rennick) (prof). Contributors: aaroncampbell (Aaron Campbell) (prof), akerem (prof), alexkingorg (Alex King) (prof), amattie (prof), ampt (Luke Gallagher) (prof), andrea_r (prof), andreasnrb (Andreas Nurbo) (prof), anilo4ever (Angelo Verona) (prof), apeatling (Andy Peatling) (prof), apokalyptik (Demitrious Kelly) (prof), arena (André Renaut) (prof), barry (Barry Abrahamson) (prof), batmoo (Mohammad Jangda) (prof), beaulebens (Beau Lebens) (prof), belg4mit (prof), bigdawggi (Matthew G. Richmond) (prof), blepoxp (Glenn Ansley) (prof), brentes (Brent Shepherd) (prof), briancolinger (Brian Colinger) (prof), bumbu (prof), caesarsgrunt (Caesar Schinas) (prof), camiloclc (prof), CAMWebDesign (prof), carbolineum (prof), caspie (prof), catiakitahara (Cátia Kitahara) (prof), CharlesClarkson (Charles Clarkson) (prof), chdorner (Christof Dorner) (prof), chrisbliss18 (Chris Jean) (prof), chrisscott (Chris Scott) (prof), cnorris23 (Brandon Allen) (prof), coffee2code (Scott Reilly) (prof), computerwiz908 (prof), cyberhobo (Dylan Kuhn) (prof), dancole (Dan Cole) (prof), Daniel Koskinen , deepak.seth (Deepak Seth), demetris (Δημήτρης Κίκιζας) (prof), Denis-de-Bernardy (prof), dimadin (Milan Dinić) (prof), dndrnkrd (Dan Drinkard) (prof), docwhat (prof), dougwrites (prof), dphiffer (Dan Phiffer) (prof), dragoonis (prof), dremeda (Dre Armeda) (prof), dtoj , dougal (Dougal Campbell) (prof), duck_ (Jon Cave) (prof), dxjones (David Jones) (prof), eddieringle (Eddie Ringle) (prof), edward mindreantre (Edward Hevlund), eoinomurchu (prof), empireoflight/Ben Dunkle (prof), ericmann (Eric Mann) (prof), etiger13 (Eddie Monge Jr.) (prof), filosofo (Austin Matzko) (prof), firebird75 (prof), frankieroberto (Frankie Roberto) (prof), Frumph (Philip M. Hofer) (prof), garyc40 (Gary Cao) (prof), gautam2011 (prof), Gary Ross (Gazzer) , GDragoN (Milan Petrovic) (prof), greenshady (Justin Tadlock) (prof), GIGALinux (Dennis Morhardt) (prof), hakre (prof), husky (prof), iandstewart (Ian Stewart) (prof), ipstenu (Mika Epstein) (prof), jacobsantos (Jacob Santos) (prof), jamescollins (James Collins) (prof), jane (Jane Wells) (prof), jbsil (Jesse Silverstein) (prof), jdub (Jeff Waugh) (prof), jeffikus (Jeffrey Pearce) (prof), jeffstieler (Jeff Stieler) (prof), jeremyclarke (Jeremy Clarke) (prof), jfarthing84 (Jeff Farthing) (prof), Jick (James Dimick) (prof), jmstacey (Jon Stacey) (prof), jobjorn (Jobjörn Folkesson) (prof), johanee (Johan Eenfeldt) (prof), johnbillion (John Blackbourn) (prof), johnjamesjacoby/jjj (John James Jacoby) (prof), johnjosephbachir (John Joseph Bachir) (prof), johnl1479 (John Luetke) (prof), johnonolan (John O’Nolan) (prof), JohnPBloch/wmrom (John Bloch) (prof), joostdevalk/yoast (Joost de Valk) (prof), jorbin (Aaron Jorbin) (prof), joshtime (prof), jshreve (prof), junsuijin (prof), kallewangstedt (Karl Wångstedt) (prof), keighl (Kyle Truscott) (prof), kevinB (Kevin Behrens) (prof), koopersmith (Daryl Koopersmith) (prof), kpdesign (Kim Parsell) (prof), ktdreyer (Ken Dreyer) (prof), kurtmckee (Kurt McKee) (prof), laceous (prof), lancewillett (Lance Willett) (prof), lloydbudd (Lloyd Budd) (prof), lriggle (prof), markauk (prof), markmcwilliams (Mark McWilliams) (prof), markoheijnen (Marko Heijnen) (prof), markup (Sasha Mukhin) (prof), mattsains (prof), matveb (Matias Ventura) (prof), mdawaffe (Michael Adams) (prof) , mentel_br (prof), messenlehner (Brian Messenlehner) (prof), miau_jp (prof), Michael (Michael Heilemann) (prof), MichaelH (prof), mikeschinkel (Mike Schinkel) (prof), Miloslav Beňo , minusfive (prof), miqrogroove (Robert Chapin) (prof), misterbisson (Casey Bisson) (prof), mitchoyoshitaka (mitcho (Michael 芳貴 Erlewine)) (prof), MMN-o (prof), momo360modena (Amaury Balmer) (prof), morganestes (Morgan Estes) (prof), mrmist (David McFarlane) (prof), mtdewvirus (Nick Momrik) (prof), nadavvin (prof), Nao (Naoko McCracken) (prof), nathanrice (Nathan Rice) (prof), neoxx (Bernhard Riedl) (prof), niallkennedy (Niall Kennedy) (prof), ninjaWR (Ryan Murphy) (prof), noel (Noël Jackson) (prof), nomulous (Fletcher Tomalty) (prof), ocean90 (Dominik Schilling) (prof), Otto42 (Samuel Wood) (prof), pedger (prof), PeteMall (prof), pampfelimetten (prof), pnettle (prof), PotterSys (Juan) (prof), prettyboymp (Michael Pretty) (prof), ptahdunbar (Ptah Dunbar) (prof), ramiy (prof), RanYanivHartstein (Ran Yaniv Hartstein) (prof), reaperhulk (Paul Kehrer) (prof), reko (prof), remi (Rémi Prévost) (prof), rlerdorf (Rasmus Lerdorf) (prof) , rmccue (Ryan McCue) (prof), rooodini (prof), rovo89 (prof), ruslany (prof), sc0ttkclark (Scott Kingsley Clark) (prof), scottbasgaard (Scott Basgaard) (prof), ScottMac (prof), scribu (prof), SergeyBiryukov (Сергей Бирюков) (prof), ShaneF (prof), sillybean (Stephanie Leary) (prof), Simek (Bartosz Kaszubowski) (prof), simonwheatley (Simon Wheatley) (prof), simosx (Σίμος Ξενιτέλλης) (prof), sirzooro (Daniel Frużyński) (prof), sivel (Matt Martz) (prof), skeltoac (Andy Skelton) (prof), snumb130 (Luke Howell) (prof), solarissmoke (Samir Shah) (prof), sorich87 (prof), ssandison (prof), stencil (prof), stephdau (Stephane Daury) (prof), tai (prof), TECannon (Tracy Cannon) (prof), technosailor (Aaron Brazell) (prof), tenpura (prof), thales.tede , TheDeadMedic (prof), thee17 (Charles E. Frees-Melvin) (prof), thetoine (Antoine Girard) (prof), tinkerpriest (c.bavota) (prof), TobiasBg (Tobias Bäthge) (prof), tomtomp (prof), tychay (Terry Chay) (prof), typeomedia (prof), uglyrobot (Aaron Edwards) (prof), UnderWordPressure (prof), usermrpapa (prof), Utkarsh (Utkarsh Kukreti) (prof), validben (Benoit Gilloz ) (prof), Viper007Bond (Alex Mills) (prof), vladimir_kolesnikov (Vladimir Kolesnikov) (prof), willmot (Tom Willmot) (prof), wahgnube (prof), waltervos (Walter Vos) (prof), wds-chris (Christopher Cochran) (prof), williamsba1 (Brad Williams) (prof), wnorris (Will Norris) (prof), xibe (Xavier Borderie) (prof), yoavf (Yoav Farhi) (prof), zeo (Safirul Alredha) (prof), znarfor (François Hodierne) (prof), and zoranzaric (Zoran Zaric) (prof).

Bonus

If you’ve made it this far, check out my 2010 State of the Word speech at WordCamp San Francisco, it’s jam-packed with information on the growth of WordPress, 3.0, what we’re planning for the future, and the philosophy of WordPress.

No related articles yet.

  

Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect.

In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Learn About Obscure CSS Properties

The Little Known font-size-adjust Property
Ever wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? The sparkling new CSS3 font-size-adjust property could do just that.

Demystifying CSS At-Rules
CSS at-rules (or @rules) are so-named because they utilize the ‘@’-character. They aren’t used as often as other CSS elements, and so it may be easy to overlook their function. If you’ve ever been confused about CSS at-rules, here’s a quick guide.

The CSS white-space Property Explained
CSS has a pretty useful property called white-space that often goes unnoticed among CSS beginners. You can probably live without this property for quite some time, but once you learn how to use it, it will come in very handy and you’ll find yourself going back to it over and over again.

How nth-child Works
nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. By Chris Coyier.

The CSS3 :target Pseudo-class And CSS Animations
There are so many underused techniques that we could be applying to our designs as an enhancement layer. Let’s take a brief look into the :target pseudo-class and a very simple CSS animation.

The space combinator
Combinators are an overlooked part of CSS development. Most juniors don’t even know they are making use of them, others are unaware of their full potential and let’s face it, even most professionals don’t really know about the ins and outs of css combinators. It’s all connected to that little piece of nothingness in between class names, so let’s start by taking a good look at the space (descendant) combinator.

Cross-Browser Inline-Block
Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. An article explaining what inline-block is, how it works and what it is good for.

The Skinny on CSS Attribute Selectors
Single element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.

The Mysterious Pseudo Class in CSS
Pseudo classes let you control the CSS of stuff in different forms, states and places easily and efficiently, without taking up too much room. CSS3 is going to introduce many new pseudo classes, and they’re going to make our lives a lot easier (if you take browser compatibility out of the equation). They help both aesthetics and usability, and can make things that were once hard easier than ever before.

CSS Opacity: A Comprehensive Reference
This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers. One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

Visual Walkthrough of @font-face CSS Code
In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.

Taming Advanced CSS Selectors
The best way to avoid plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.

A Look at Some of the New Selectors Introduced in CSS3
Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course, CSS3 isn’t supported at all by any IE browsers including IE8; but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Useful CSS Techniques

Deal-breaker problems with CSS3 multi-columns
“I’ve been playing around with the new multi-column properties of CSS3 (column-count, column-width, and so forth), and I’ve come to the conclusion that they’re sadly not ready to really use. I found that there’s not enough control over how the content is distributed between columns to make them reliable. I’m not sure if the browser behavior I’ve been seeing is correct or not; the spec is unfortunately not well defined enough to make it clear—at least to me—of how browsers ought to be handling some of the problems I ran across.”

Correcting Orphans with Overflow
“The overflow property in CSS can be used in various ways and comes in handy when correcting bugs. Below are some tutorials that demonstrate how to clear up some common issues using the overflow property.”

CSS Sprites without Using Background Images
” The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the access to update his affiliate banners using WordPress, and the simplest thing was to let him just upload his own images and put the URL in a custom field. No CSS tweaks involved, just what he needed.”

Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center.

Different Stylesheets for Differently Sized Browser Windows
Otherwise known as “resolution dependent layouts”. Single website, different CSS files for rearranging a website to take advantage of the size available. There is a W3C standard way of declaring them.

The New Clearfix Method
The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way.

Preload Images with CSS, JavaScript, or Ajax
“Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.”

How to Center an Absolutely Positioned Element Using CSS
“Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solutions seem obvious once I’ve done it, but I still find myself googling the problem every few months.”

Wrapping Long URLs and Text Content with CSS
To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags).

Unconventional: CSS3 Link Checking
An interesting solution of finding empty links on a web page. Only CSS3 in use.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Although the lack of cross-browser CSS selector support has caused a number of useful CSS selectors to go almost unnoticed, developers can still manipulate styles on their pages using some of these little-used selectors through jQuery.

“Checkmark” Your Visited Links with Pure CSS
The goal of this tutorial is to get a check mark preceding visited links for a nice visual indicator. The article will be targeting the a:visited pseudo class, but it also includes information on the other anchor pseudo classes.

Reorganize visited links with CSS3 flexible box model
An interesting technique that uses flexible box model (box, box-flex, box-ordinal-group), generated content (:before, :after) and :not and :first-of-type selectors to reorganize visited links on the page.

Vertical Centering
Vertical centering with CSS seems to be a large obsticle in the Web design world and I notice a lot of people favor <table>-based layouts when the need for vertical center arises. That’s too bad. Whilst CSS vertical center can get [very] complicated at times, I believe that learning various techniques for archiving it is beneficial and once you get a hang of it, you’ll do it just as anything else with CSS.

Robust Vertical Text Layout
Few formatting systems today can handle vertical text layout, and most of those only lay out text in right-to-left columns. This document outlines a system that can not only handle common scripts in vertical right-to-left columns, but that can gracefully accept uncommon script combinations and left-to-right text columns. The model is described here as a CSS system, but the concepts can apply to non-CSS systems as well.

iPad Orientation CSS
For the most part, Mobile Safari on the iPad is the same as that on the iPhone. One difference is that Webkit on the iPad honors CSS media query declarations based on orientation.

How to keep footers at the bottom of the page
When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.

Sexy CSS Buttons
CSS is getting quite powerful these days. It can even take the place of images in many ways, giving you a more flexible design and fewer files to work with. Imagine being able to make an ultra sexy button with just CSS, giving you complete control through code. Well, you can! And it’s not too difficult, really.

CSS Image Maps: A Beginner’s Guide
While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp. In this tutorial, we’re not only going to get you up to speed on how to create a CSS image map, but, we’re also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a “tooltip” like popup.

Make All Links Feel Subtly More Button-Like
On this current design of CSS-Tricks, you may have noticed how all links bump themselves down one pixel as you click them. This tutorial displays how to implement this technique.

Footnotes
“I figured that it would be a good idea to show the content of a footnote as soon as you indicate that you are interested in the footnote. Namely, when you move the cursor over the footnote symbol. This allows footnotes to work on devices that don’t support mouse hovering, because you can still jump to a footnote via its link, but it removes the necessity of having to click on a footnote link for most people.”

Progressive enhancement: pure CSS speech bubbles
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML.

IE CSS Bugs That’ll Get You Every Time
A comprehensive guide for developers hunting for solutions to take care of the nasty Internet Explorer bugs.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
Only if you must: an extensive article featuring common problems, issue and solutions for dealing with Internet Explorer 6.

Useful CSS Tools, Tips and Advice

CSS deployment: combine CSS files into a master file
A handy PHP script which reads a directory with css files and combines them automatically into one master stylesheet. No matter how many files you add while developing, before launch you can use a build script that merges them all so you can save HTTP requests.

CSS efficiency tip: use a single stylesheet file for multiple media
The way most people link CSS intended for different media types, such as screen, print, or handheld, is to use multiple files. The files are then linked either through link elements with a media attribute or through @import statements with one or more media types specified.

Efficiently Rendering CSS
How efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Let’s cover some of the big ideas they present, and then discuss the practicalities of it all.

JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines. It’s very simple to use and manipulate, and can be used to write a CSS validator, filters or even CSS extensions for a given browser.

CSSDesk: A CSS Playground
A playground where you put in HTML and CSS, and see a live preview (via Ajaxian).

CSS Buttons is the Plug and Play Solution for Web Designers and Developers
CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.

Website Colors Finder
This neat little tool extracts any color information, no matter if inline CSS, CSS files via import or link, and even if you have a master CSS file with references to other css files – mooColorFinder reads it out.

CSS Inliner Tool
If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles.

HTML5/CSS3 Framework
CSS3 is one of the coolest thing in the web designer world and has been a long time coming. With CSS3 you can save time designing and slicing fancy layouts. CSS3 has features like text/box shadow, rounded corners,and animations. These just a few of the many CSS3 features has to offer you.

CSS Buttons Generator

CSS Border Radius Generator

CSS Corners Generator

CSS3 Generator
This online tool generates cross-browser CSS3 snippets that you can use right away on your website. You can also preview the code in a sandbox.

CSS 3, Please!
Another generator and tester of CSS3 rules on the fly.

CSS Linear Gradients Generator
This little helper generates the code for CSS3 linear gradients online. Handy.

CSS Border Image Generator

minify
Minify is a PHP5 app that helps you follow several of Yahoo!’s Rules for High Performance Web Sites. It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Rendera
Rendera makes learning HTML5 and CSS3 easy. Type in your HTML and CSS to see it rendered. Each time you press the Enter key, the live preview will update. Some examples are already provided.

HTML5 and CSS3 Web App Prototyping
Web developers often tweak style according to the device (desktop, tablet, mobile) in use. ProtoFluid makes intial tweaking much quicker.ProtoFluid requires a freshly updated, standards compliant, modern browser.

HTML5 Readiness
An interactive table featuring the support of HTML5 and CSS3 in browsers.

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)
Smashing Magazine’s cheat sheets that will help you quickly look up the right CSS 2.1-property or an obscure CSS 3 property. The style sheets contain most important properties, explanations and keywords for each property. The help sheets were created by GoSquared and released for Smashing Magazine and its readers.

Which email clients support CSS3?
“In this update to our existing guide to CSS support, we tested both widely implemented and experimental CSS3 properties across 24 popular desktop, web and mobile email clients. The results were mixed, but certainly surprising! If you’re planning to introduce CSS3 to email campaigns, read on: we’ve not only got a summary of which email clients display what properties, but observations and hand-picked recommendations for the style-savvy email designer.” Also check Guide to CSS support in email clients.

Brosho Plugin: Design from built-in element selector and CSS editor
With this Brosho Plugin you can design your markup in the browser. It is a jQuery Plugin designs with the help of a build-in element selector and CSS editor. The CSS code of the altered elements can be generated with just one click. This can be further used in your own stylesheet.

When can I use…
Compatibility tables for features in HTML5, CSS3, SVG and other web standards.

PrimerCSS
Primer undercoats your CSS by pulling out all of your classes and ID’s and placing them into a starter stylesheet. Paste your HTML in to get started.

CSS Infos
A comprehensive reference table for all 243 CSS properties. Also, the page contains a full list of CSS properties supported by Safari and Firefox.

CSS font stacks
A quick presentation on Font stacks including a basic explanation and a step-by-step example.

CSS Reset, a simpler option
A quick presentation on CSS Reset including a basic explanation, an outline of some of the advantages and disadvantages, as well as a simpler reset option.

Last Click

Webble
Webble is fun. It was written using HTML, JavaScript and CSS and does not make use of the HTML5 canvas element. The goal of Webble is to make horizontal or vertical lines of three or more tiles.

Further Resources

50 Useful Tools and Generators for Easy CSS Development
The tools have been sorted into the following categories: Grid and Layout, CSS Optimisers, CSS Menus Tools, CSS Buttons, CSS Rounded Corners, CSS Frames, CSS Sprites, CSS Tables, CSS Typography and CSS Forms.

50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
We are permanently looking to collect such articles for our posts so that we can deliver the most useful and relevant content to our readers. In this post, we present an overview of useful CSS/jQuery coding tips, tricks and techniques for visual effects, layouts and web form design to help you find solutions to the problems you are dealing with or will have to deal with in future.

What about other round-ups?

What round-ups would you like to see on Smashing Magazine in the future?survey software

© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: CSS, css3

No related articles yet.

Let’s do away with the plain old, not very cool, default WordPress login/register form page for once, what do you say? I’m going to show you how to change the way you login to your site, and the way others join and login to your site too.

Okay, so you may be thinking what’s so great about this tutorial compared to all the other one’s posted on the internet. I’ve seen this a million times, and the all end the same, blah blah blah.

I can pretty much guarantee that there is nothing quite like this posted online, at least not available for free. You may be able to find a similar tut on the Tuts+ network, if you have a premium membership, which is great and all, but how many people actually do. Trust me, this is not like any other tutorial you may have “seen” before. There isn’t anything as complete, or useful, or just plain awesome. I know because I have scoured the internet in search of how to create this when I was trying to first make it myself. It’s just not out there, until now!

What you will learn from this tutorial

How to:

• create a sidebar jQuery UI Tabs widget
• create a custom form to show under each tab
  • a WordPress 3.0 Login form
  • a custom register form
  • a custom password reset form
• check if the visitor is logged in
• change the content of the tabs if user is logged in
• finally love yourself for knowing how to do this.

No related articles yet.