Onlineads@Highross.com

WordPress is one the most popular tools for publishing content on the web. Everything from e-commerce websites to blogs can be developed using WordPress. Additionally, the WordPress community has built up a huge offering of free themes and plugins to make it easy for newcomers to get content published on the web quickly and easily.

 

However, just posting content on the web isn’t enough for many; attracting people to your site is part science, part art — and many WordPress plugins help you do just that. This is a listing of top-notch WordPress plugins for SEO to improve your WordPress site’s search engine rankings.

1. SEO Rank Reporter

This WordPress SEO plugin allows you to track certain keywords in your site, and then issues you a report every 3 days (with all sorts of pretty graphs to boot). The plugin will also notify you via email whenever certain keywords experience major changes in search engine ranking.

2. All in One SEO Pack

Any basic research on SEO plugins for WordPress will lead you to All in One SEO Pack. It is the most popular solution for your WordPress site’s search engine optimization. This plugin automatically optimizes your WordPress site for search engines by generating meta tags and helping you optimize web page titles. Advanced users are given the ability to customize post titles, descriptions, URL structures and tags for each post.

3. SEO Ultimate

SEO Ultimate is a suite of tools for, well, ultimate SEO. It has a feature called Canonicalizer, which extends WordPress’s native canonical features to ensure that web spiders are pointed to the primary post in the case of web pages with the same content, but different URLs. It has a built-in robot.txt editor (one of the five web files that will enhance your site) that will allow you to easily set up this file for optimal search engine indexing. It works well with All in One SEO Pack, allowing you to import meta-data from it if you wanted to switch to SEO Ultimate.

4. SEO Content Control

This nifty plugin helps you identify weak content in your site. For example, many WordPress owners forget to include descriptions of their categories, which is a potential point of improvement for enhancing your search engine rankings. SEO Content Control helps you easily identify these potentially troublesome areas.

5. SEO Friendly Image

Optimizing images for search engines is often neglected; but when done right, you increase their semantic value, accessibility, and search engine indexability, especially for image searches. This WordPress SEO plugin automatically updates your images with alt and title attributes.

6. SEO Smart Links

SEO Smart Links is a WordPress SEO plugin that automatically links keywords and phrases in your blog posts based on previous pages and posts. SEO Smart Links gives you the ability to set up your own unique keywords and sets of matching URLs. It also allows you to set nofollow attributes and open links in new browser windows or browser tabs. A very convenient way to save time, learn a bit about SEO best practices and interlink blog posts.

7. Google XML Sitemaps

This WordPress plugin is able to generate an XML sitemap that will assist search engine spiders in crawling and indexing your WordPress site. XML Sitemaps reveals the structure of your site’s content in a transparent way for search engines. Google XML Sitemaps also includes support for Bing, Yahoo!, Ask.com, and MSN, notifying them every time you create a post.

8. Platinum SEO Pack

This SEO plugin for WordPress is loaded with plenty of features, including automatically generating meta tags, helping you optimize page and post titles for search engines, and aiding you in avoiding duplicate content (one of the ways to improve SEO of sites you design).

The Definitive Guide To Higher Rankings For Your Blog

I started writing my beginner’s guide to WordPress SEO a while back, and have since done a load of posts on the subject, an article in the Search Marketing Standard, newsletters, and presentations. It’s time to let all the info of all these different articles fall into one big piece: the final WordPress SEO tutorial.

Note: this article hasn’t been updated yet since the beta release of my WordPress SEO plugin, but that plugin does cover a lot of the stuff needed below, so do check it out! When that plugin goes into a more stable development mode, this article will of course be updated.

If you’re more of a visual type, try this WordPress SEO video. It’s an hour long presentation I gave at A4UExpo London, that covers most of what’s in here too.

Want to hire a consultant?
If you’d rather have me figure out what you should be doing, feel free to order a full site analysis by yours truly or hire me as your WordPress SEO Consultant.

As search, SEO, and the WordPress platform evolve I will keep this article up to date with best practices. If you don’t have the time to do this kind of optimization yourself, consider hiring us to do it, check out our WordPress consulting services.

As I take quite a holistic view on SEO, this guide will cover quite a lot, check out the table of contents for some quick jumping around.

1. The Definitive Guide To Higher Rankings For Your Blog
   1. 1. Basic technical optimization
      1. 1.1. Permalinks
      2. Optimize your Titles for SEO
      3. 1.3. Optimize your Descriptions
      4. 1.4. Optimize the More text
      5. 1.5. Image Optimization
   2. 2. Template Optimization
      1. 2.1. Breadcrumbs
      2. 2.2. Headings
      3. 2.3. Clean up your code
      4. 2.4. Aim for speed
      5. 2.5. Rethink that Sidebar
   3. 3. Advanced WordPress SEO and Duplicate Content
      1. 3.1. Noindex, follow archive pages
      2. 3.2. Disable unnecessary archives
      3. 3.3. Pagination
      4. 3.4. Nofollowing unnecessary links
   4. 4. A site structure for high rankings
      1. 4.1. Pages instead of posts
      2. 4.2. New wine in an old bottle
      3. 4.3. Linking to related posts
   5. 5. Conversion optimization
   6. 6. Comment optimization
      1. 6.1. How you get people to comment
      2. 6.2. Bond with your commenters
      3. 6.3. Keeping people in the conversation
   7. 7. Off site blog SEO
      1. 7.1 Follow your commenters
      2. 7.2. Use Twitter
      3. 7.3. Find related blogs, and work them
   8. 8. Conclusions on WordPress SEO

1. Basic technical optimization

Out of the box, WordPress is a pretty well optimized system, and does a far better job at allowing every single page to be indexed than every other CMS I have used. But there’s a few things you should do to make it a lot easier still to work with.

1.1. Permalinks

The first thing to change is your permalink structure. In WordPress 2.5, you’ll find this page under Settings -> Permalinks. The default permalink is

?p=<postid>, but I prefer to use either /post-name/ or /category/post-name/. For the first option, you change the “custom” setting into /%postname%/:

To include the category, you change it to /%category%/%postname%/.

Once you’ve done that, you’ll want to install the Redirection plugin, and make sure that under Manage -> Redirection -> Options, making sure both URL Monitoring select boxes are set to “Modified posts”. Now you can change those permalinks to perfectly SEO’d permalinks without having to do anything else, or worry about the search engine consequences.

WWW vs non-WWW

Another good thing to configure now you’re on that screen anyway is the Root domain: Add WWW / Strip WWW one. Make a choice, and set it here, don’t enable both, some search engines still can’t handle that. And enable the redirect index.php/index.html one too, it won’t hurt you, and might even do your WordPress SEO some good.

URL stopwords

The last thing you’ll want to do about your permalinks to increase your WordPress SEO, is install the SEO Slugs plugin, this will automatically remove stop words from your slugs once you save a post, so you won’t get those ugly long URL’s when you do a sentence style post title.

Optimize your Titles for SEO

By default, the title for your blog posts is “Blog title » Blog Archive » Keyword rich post title”. For your WordPress blog to get the traffic it deserves, this should be the other way around, for two reasons:

• Search engines put more weight on the early words, so if your keywords are near the start of the page title you are more likely to rank well.
• People scanning result pages see the early words first. If your keywords are at the start of your listing your page is more likely to get clicked on.

For more info on how to craft good titles for your posts, see this excellent article and video by Aaron Wall: Google & SEO Friendly Page Titles. I prefer to do this with HeadSpace, as that makes it very very easy. You should check your header.php though, and make sure that the code for wp_title(); contains two quotes, so it looks like this: wp_title('');. This makes sure you have absolute control over the title and don’t have any annoying separator in there.

After that, go into the HeadSpace settings, and make them look something like this for your posts and pages:

For the other pages, I have the following settings:

• Posts / Pages: %%title%% - Blog Title
• Categories: %%category%% Archives %%page%% - Blog Title
• Tags: %%tag%% Archives %%page%% - Blog Title
• Archives: Blog Archives %%page%% - Blog Title

With HeadSpace, you can also write optimized titles for each post specifically, overriding the settings here. This way you have absolute control over your titles, and can make sure your WordPress titles are actually helping your SEO.

1.3. Optimize your Descriptions

Give each category a decent description, and use HeadSpace to add that description to the meta description, by adding %%category_description%% in the Description field. After that, write a description for each post or page that you actually want to rank with. The descriptions has one very important function: enticing people to click, so make sure it states what’s in the page they’re clicking towards, and that it gets their attention.

Automated descriptions

In my opinion, auto generating descriptions is a load of bull, most plugins pick the first sentence, which might be an introductory sentence which has hardly anything to do with the subject, or another sentence with a keyword in it, which might be completely wrong to pick as description. Thus, the only well written description is a hand written one, and if you’re thinking of auto generating the meta description, you might as well not do anything and let the search engine control the snippet… If you don’t use the meta description, the search engine will find the keyword searched for in your document, and automatically pick a string around that, which gives you a bolded word or two in the results page.

Auto generating a snippet is a “shortcut”, and there are no real shortcuts in (WordPress) SEO (none that work anyway).

1.4. Optimize the More text

Another neat featuer of HeadSpace is that you can use it to optimize the more text, so if you use a more tag on the frontpage, you can replace the default “Read more” link with something meaningful for every post. It’s small things like that that make your WordPress SEO the best.

1.5. Image Optimization

An often overlooked part of WordPress SEO is how you handle your images. By doing stuff like writing good alt tags for images and thinking of how you name the files, you can get yourself a bit of extra traffic from the different image search engines. Next to that, you’re helping out your lesser able readers who check out your site in a screen reader, to make sense of what’s otherwise hidden to them.

You should of course be writing good titles and alt tags for each and every image, however, if you don’t have the time for that, there is a plugin that can help you. The plugin is called SEO Friendly Images, and it can automatically add the title of the post and or the image name to the image’s alt and title tag:

2. Template Optimization

2.1. Breadcrumbs

You’ll want to add breadcrumbs to your single posts and pages. Breadcrumbs are the links, usually above the title post, that look like “Home > Articles > WordPress SEO”. They are good for two things:

• They allow your users to easily navigate your site.
• They allow search engines to determine the structure of your site more easily.

These breadcrumbs should link back to the homepage, and the category the post is in. If the post is in multiple categories it should pick one. For that to work, adapt single.php and page.php in your theme, and use my breadcrumb plugin.

2.2. Headings

Although most themes for WordPress get this right, make sure your post title is an <h1>, and nothing else. Your blog’s name should only be an <h1> on your frontpage, and on single, post, and category pages, it should be no more than an <h3>.

These are easy to edit in the post.php and page.php templates. To learn more about why proper headings are important read this article on Semantic HTML and SEO.

2.3. Clean up your code

All that javascript and CSS you might have in your template files, move that to external javascripts and css files, and keep your templates clean, as they’re not doing your WordPress SEO any good. This makes sure your users can cache those files on first load, and search engines don’t have to download them most of the time.

2.4. Aim for speed

A very important factor in how many pages a search engine will spider on your blog each day, is how speedy your blog loads. You can do two things to increase the speed of your WordPress.

1. Optimize the template to do as small an amount of database calls as necessary. I’ve highlighted how to do this in my post about speeding up WordPress.
2. Install a caching plugin. I highly recommend WP-Super-Cache, which is a bit of work to set up, but that should make your blog an awful lot faster.

Also, be aware that underpaying for hosting, is not wise. If you actually want to succeed with your link-bait actions, and want your blog to sustain high loads, go for a good hosting package. I’ve recently switched to VPS.net myself, and they’ve proven to be better than anything I’ve ever seen in hosting, if you want to know more be sure to read my article about WordPress hosting.

2.5. Rethink that Sidebar

Do you really need to link out to all your buddies in your blogroll site wide? Or is it perhaps wiser to just do that on your front page? Google and other search engines these days heavily discount site wide links, so you’re not really doing your friends any more favor by giving them that site wide link, nor are you helping yourself: you’re allowing your visitors to get out of your site everywhere, when you actually want them to browse around a bit.

The same goes for the search engines: on single post pages, these links aren’t necessarily related to the topic at hand, and thus aren’t helping you at all. Thus: get rid of them. There are probably more widgets like these that only make sense on the homepage, and others that you’d only want on sub pages.

Some day you will probably be able to change this from inside WordPress, right now it forces you to either use two sidebars, one on the homepage and one on sub pages, or write specific plugins.

3. Advanced WordPress SEO and Duplicate Content

Once you’ve done all the basic stuff, you’ll find that the rest of the problems amount to one simple thing: duplicate content. Loads of it in fact. Out of the box, WordPress comes with a few different types of taxonomy:

1. date based
2. category based
3. tag based

Next to that, it seems to think you actually need to be able to click on from page to page starting at the frontpage, way back to the first post you ever did. Last but not least, each author has his own archive too, under /author/<author-name>/, resulting in completely duplicate content on single author blogs.

In essence that means that, worst case scenario, a post is available on 5 pages outside of the single page where it should be available. We’re going to get rid of all those duplicate content pools, by still allowing them to be spidered, but not indexed, and fixing the pagination issues that come with these things.

3.1. Noindex, follow archive pages

Install my robots meta plugin, and make sure the settings prevent indexing of all archive pages, like this:

Now the search engine will follow all the links on these archive pages, but it won’t show those pages in the index. Not everybody will agree on this policy, and others will tell you to just show a snippet of each post on the archive page. That’ll also work, but in my opinion completely throwing them out is better.

3.2. Disable unnecessary archives

If your blog is a one author blog, or you don’t think you need author archives, use the robots-meta plugin to disable the author archives. Also, if you don’t think you need a date based archive: disable it. Even if you’re not using these archives in your template, someone might link to them and thus break your WordPress SEO…

3.3. Pagination

Thirdly, you’ll want to make sure that if a bot goes to a category page, it can reach all underlying pages without any trouble. Otherwise, if you have a lot of posts in a category, a bot might have to go back 10 pages before being able to find the link to one of your awesome earlier posts…

There’s an easy fix, in fact, there are several plugins that deal with this. My favorite one at the moment is WP-PageNavi, but most others will work too. If you have the Genesis Theme, you can just enable numeric navigation under Theme Settings -> Content Archives.

3.4. Nofollowing unnecessary links

Another easy step to increase your WordPress SEO is to stop linking to your login and registration pages from each and every page on your blog. The same goes for your RSS feeds, your subscribe by e-mail link, etc. Robots Meta has an option to nofollow all your login and registration links. You’ll probably have to go into your RSS links and nofollow those by hand. If you’re using the meta widget, you might want to enable the option in robots meta to replace that with one that has nofollowed links.

4. A site structure for high rankings

Blogs are spidered so easily due to their structure of categories, tags etc.: all articles are well linked, and usually the markup is nice and clean. However, all this comes at a price: your ranking strength is diluted. They’re diluted by one simple thing: comments.

4.1. Pages instead of posts

You’ve probably noticed by now, or you’re seeing now, that this WordPress SEO post is actually… not a post. It’s a page. Why? Well for several reasons. First of all, this article needed to be a “daughter”-page of my WordPress page, to be in the correct place on this blog. Secondly, to rank for the term [WordPress SEO], this article has to have the right keyword density. And that’s where things go wrong. Comments destroy your carefully constructed keyword density.

That’s why I decided to make my most important articles into pages. That way, you can easily update them and do a new post about what you’ve changed.

4.2. New wine in an old bottle

If a post on your blog becomes incredibly popular and starts to rank for a nice keyword, like mine did for WordPress SEO, you could do the following:

• create a new page with updated and improved content
• change the slug of the old post to post-name-original
• publish the new page under the old post’s URL, or redirect the old post’s URL to the new URL
• send an e-mail to everyone who linked to your old post that you’ve updated and improved on your old post
• wait for the links to come in, again;
• rank even higher for your desired term as you’ve now got:
  • more control over the keyword density
  • even more links pointing at the article
  • the ability to keep updating the article as you see fit to improve on it’s content and ranking

Some among you will say: I could have 301 redirected the old post to the new one with the same effect. True. Except: you’d lose the comments on the old post, which is in my opinion a sign of disrespect to people who took the time to comment, and 301 redirects take quite a bit of time sometimes. Of course you should treat this technique with care, and not abuse it to rank other products, but I think it can be done in everyone’s benefit. For instance this article: if you came here through a social media site like Sphinn, expecting an article about WordPress SEO, that’s exactly what you got!

4.3. Linking to related posts

One way of getting search engines to get to your older content a bit easier, thus increasing your WordPress SEO capabilites a LOT, is by using a related posts plugin. These plugins search through your posts database to find posts with the same subject, and add links to these posts.

There’s a load of these available, but I just use the one that comes with the Simple Tags plugin, as I’ve found that the easiest and best one so far.

5. Conversion optimization

Get those readers to subscribe!

A lot of bloggers still think that because their blog is a blog, they don’t have to optimize anything. Wrong. To get people to link to you, they have to read your blog. And what do you think is easier: getting someone who is already visiting your blog to visit regularly and then link to your blog, or getting someone who visits your blog for the first time to link to your blog immediately? Right.

That’s why conversion optimization is so vitally important to bloggers as well: they need to learn how to test their call to actions on their blog so that more people will subscribe, either by e-mail or by RSS. (Ow btw, if you haven’t subscribed to this blog yet, do it now!)

One of the things I’ve found to be very important, and more bloggers seem to have found this, is that a BIG RSS subscribe button is very important, as is offering a way to subscribe by e-mail. I even offer daily and weekly e-mail subscribe options, using aweber (aff), and have found that people tend to really like those options too.

Another thing to be very aware of is when people might want to subscribe to your blog. If they’ve just finished reading an article of yours, and really liked it, that would be the ideal time to reach them, right? That’s why more and more people are adding lines like this to the end of their posts: “Liked this post? Subscribe to my RSS feed and get loads more!”

Another great time to get people to subscribe is when people have just commented on your blog for the first time, for which purpose I use my own comment redirect plugin. Which leads me to the next major aspect of WordPress SEO:

6. Comment optimization

Get those readers involved

Comments are one of the most important aspects of blogs. As Wikipedia states:

The ability for readers to leave comments in an interactive format is an important part of many blogs.

Comments are not only nice because people tell you how special you are, or that you made a mistake, or whatever else they have to tell you. Most of all they’re nice, because they show engagement. And engagement is one of the most important factors of getting people to link to you: they show you they care, and they open the conversation, now all you have to do is respond, and you’re building a relationship!

6.1. How you get people to comment

The easiest way of getting people to do anything is: ask them to do it. Write in an engaging style, and then ask your blog’s readers for an opinion, their take on the story etc.

Another important things is your comment links. Is your comment link “No comments »”? Or is it “No Comments yet, your thoughts are welcome »”? Feel the difference? You can change this by opening your index.php template, search for comments_popup_link() and changing the texts within that function.

6.2. Bond with your commenters

Another thing to do is thank people when they’ve commented on your weblog. Not every time, because that get’s annoying, but doing it the first time is a very good idea.

Justin Shattuck thought the same, and created the Comment Relish plugin which sends an email after someone has made his first comment. This email is a message you can enter yourself, with for instance your feed URL, and in my case, a newsletter subscribe URL, etc. Note that some people think this is spam, and that laws in several countries might prohibit the use of this. I can’t tell you, because I’m not a lawyer.

Another option, which is a bit less obtrusive / spammy, is to install my comment redirect plugin. This plugin allows you to redirect people who have made their first comment to a specific “thank you” page.

6.3. Keeping people in the conversation

Now that people have joined the conversation on your blog, you should make sure they stay in the conversation. That’s why you should install the subscribe to comments plugin, that allows people to subscribe to a comment thread just like they would in a forum, and sends them an e-mail on each new comment. This way, you can keep the conversation going, and maybe your readers will be giving you new angles for new posts.

7. Off site blog SEO

If you’ve followed all of the above WordPress SEO advice, you’ve got a big chance of becoming successfull, both as a blogger and in the search engines. Now the last step sounds easy, but isn’t. Go out there, and talk to people online.

7.1 Follow your commenters

There’s been a movement on the web for a while now that’s called the “You comment – I follow“. They want you to remove the nofollow tag off of your comments to “reward” your visitors. Now I do agree, but… That get’s you a whole lot of spam once your WordPress blog turns into a well ranked blog… What I do advocate though, is that you actually follow your visitors! Go to their websites, and leave a comment on one of their articles, a good, insightful comment, so they respect you even more.

If you think that’s a lot of work, do realize that, on average, about 1% of your visitors will actually leave a comment. That’s a group of people you have to take care of!

7.2. Use Twitter

Twitter is a cool form of micro-blogging / chatting / whatever you want to call it. Almost all the “cool” people are on there, and they read their tweets more often than they read their e-mail, if you even knew how to reach them through e-mail.

To boot, if you use WordTwit or Twitter Tools, all of your posts can be announced on Twitter, which will usually get you quite a few early readers! People will feel even more happy to comment on Twitter, which might get you into an extra conversation or two.

7.3. Find related blogs, and work them

If you want to rank for certain keywords, go into Google Blogsearch, and see which blogs rank in the top 10 for those keywords. Read those blogs, start posting insightful comments, follow up on their posts by doing a post on your own blog and link back to them: communicate! The only way to get the links you’ll need to rank is to be a part of the community.

8. Conclusions on WordPress SEO

This guide gives you a lot of stuff you can do on your blog. It goes from technical tips, to conversion tips, to content tips, to conversation tips, and a whole lot in between. There’s a catch though: if you want to rank for highly competitive terms, you’ll have to actually do most of it.

If you want to keep updated on the latest news about WordPress, and hear more tips as I come up with them, then subscribe to my WordPress mailing-list right now. If you need help implementing all the tips in this article, or want me to review whether you’ve done a good job implementing it all, order a full site analysis!

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 allWordPress 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.

WordPress plugins are PHP scripts that alter your website. The changes could be anything from the simplest tweak in the header to a more drastic makeover (such as changing how log-ins work, triggering emails to be sent, and much more).

Whereas themes modify the look of your website, plugins change how it functions. With plugins, you can create custom post types, add new tables to your database to track popular articles, automatically link your contents folder to a “CDN” server such as Amazon S3… you get the picture.

Theme Or Plugin?

If you’ve ever played around with a theme, you’ll know it has a functions.php file, which gives you a lot of power and enables you to build plugin-like functionality into your theme. So, if we have this functions.php file, what’s the point of a plugin? When should we use one, and when should we create our own?

The line here is blurrier than you might think, and the answer will often depend on your needs. If you just want to modify the default length of your posts’ excerpts, you can safely do it in functions.php. If you want something that lets users message each other and become friends on your website, then a plugin would better suit your needs.

The main difference is that a plugin’s functionality persists regardless of what theme you have enabled, whereas any changes you have made in functions.php will stop working once you switch themes. Also, grouping related functionality into a plugin is often more convenient than leaving a mass of code in functions.php.

Creating Our First PlugIn

To create a plugin, all you need to do is create a folder and then create a single file with one line of content. Navigate to the wp-content/plugins folder, and create a new folder named awesomeplugin. Inside this new folder, create a file named awesomeplugin.php. Open the file in a text editor, and paste the following information in it:

Of all this information, only the plugin’s name is required. But if you intend to distribute your plugin, you should add as much data as possible.

With that out of the way, you can go into the back end to activate your plugin. That’s all there is to it! Of course, this plugin doesn’t do anything; but strictly speaking, it is an active, functioning plugin.

Structuring PlugIns

When creating complex functionality, splitting your plugin into multiple files and folders might be easier. The choice is yours, but following a few good tips will make your life easier.

If your plugin focuses on one main class, put that class in the main plugin file, and add one or more separate files for other functionality. If your plugin enhances WordPress’ back end with custom controls, you can create the usual CSS and JavaScript folders to store the appropriate files.

Generally, aim for a balance between layout structure, usability and minimalism. Split your plugin into multiple files as necessary, but don’t go overboard. I find it useful to look at the structure of popular plugins such as WP-PageNavi and Akismet.

Naming Your PlugIn And Its Functions

When creating a plugin, exercise caution in naming the functions, classes and plugin itself. If your plugin is for generating awesome excerpts, then calling it “excerpts” and calling its main function “the_excerpt” might seem logical. But these names are far too generic and might clash with other plugins that have similar functionality with similar names.

The most common solution is to use unique prefixes. You could use “acme_excerpt,” for example, or anything else that has a low likelihood of matching someone else’s naming scheme.

Plugin Safety

If you plan to distribute your plugin, then security is of utmost importance, because now you are fiddling with other people’s websites, not just your own. All of the security measures you should take merit their own article, so keep an eye out for an upcoming piece on how to secure your plugin. For now, let’s just look at the theory in a nutshell; you can worry about implementation once you grasp that.

The safety of your plugin usually depends on the stability of its two legs. One leg makes sure that the plugin does not help spread naughty data. Guarding against this entails filtering the user’s input, escaping queries to protect against SQL injection attacks and so on. The second leg makes sure that the user has the authority and intention to perform a given action. This basically means that only users with the authority to delete data (such as administrators) should be able to do it. Guarding intention ensures that visitors aren’t misled by a hacker who has managed to place a malicious link on your website.

All of this is much easier to do than you might think, because WordPress gives you many functions to handle it. A number of other issues and best practices are involved, however, so we’ll cover those in a future article. There is plenty to learn and do until then; if you’re just starting out, don’t worry about all that for now.

Cleaning Up After Yourself

Many plugins are guilty of leaving a lot of unnecessary data lying around. Data that only your plugin uses (such as meta data for posts or comments, database tables, etc.) can wind up as dead weight if the plugin doesn’t clean up after itself.

WordPress offers three great hooks to help you take care of this:

• register_activation_hook()
  This hook allows you to create a function that runs when your plugin is activated. It takes the path to your main plugin file as the first argument, and the function that you want to run as the second argument. You can use this to check the version of your plugin, do some upgrades between versions, check for the correct PHP version and so on.
• register_deactivation_hook()
  The name says it all. This function works like its counterpart above, but it runs whenever your plugin is deactivated. I suggest using the next function when deleting data; use this one just for general housekeeping.
• register_uninstall_hook()
  This function runs when the website administrator deletes your plugin in WordPress’ back end. This is a great way to remove data that has been lying around, such as database tables, settings and what not. A drawback to this method is that the plugin needs to be able to run for it to work; so, if your plugin cannot uninstall in this way, you can create an uninstall.php file. Check out this function’s documentation for more information.

If your plugin tracks the popularity of content, then deleting the tracked data when the user deletes the plugin might not be wise. In this case, at least point the user to the location in the back end where they can find the plugin’s data, or give them the option to delete the data on the plugin’s settings page before deleting the plugin itself.

The net result of all our effort is that a user should be able to install your plugin, use it for 10 years and then delete it without leaving a trace on the website, in the database or in the file structure.

Documentation And Coding Standards

If you are developing for a big community, then documenting your code is considered good manners (and good business). The conventions for this are fairly well established?—?phpDocumentor is one example. But as long as your code is clean and has some documentation, you should be fine.

I document code for my own benefit as well, because I barely remember what I did yesterday, much less the purpose of functions that I wrote months back. By documenting code, you force good practices on yourself. And if you start working on a team or if your code becomes popular, then documentation will be an inevitable part of your life, so you might as well start now.

While not quite as important as documentation, following coding standards is a good idea if you want your code to comply with WordPress’ guidelines.

Putting It Into Practice

All work and no play makes Jack a dull boy, so let’s do something with all of this knowledge that we’ve just acquired. To demonstrate, let’s build a quick plugin that tracks the popularity of our articles by storing how many times each post has been viewed. I will be using hooks, which we’ll cover in an upcoming installment in this series. Until then, as long as you grasp the logic behind them, all is well; you will understand hooks and plugins before long!

Planning Ahead

Before writing any code, let’s think ahead and try to determine the functions that our plugin will need. Here’s what I’ve come up with:

• A function that registers a view every time an individual post is shown,
• A function that enables us to retrieve the raw number of views,
• A function that enables us to show the number of views to the user,
• A function that retrieves a list of posts based on their view count.

Preparing Our Function

The first step is to create the folder and file structure. Putting all of this into one file will be fine, so let’s go to theplugins folder and create a new folder named awesomely_popular. In this folder, create a file namedawesomely_popular.php. Open your new file, and paste some meta data at the top, something like this:

Recording Post Views

Without delving too deep, WordPress hooks enable you to (among other things) fire off one of your functions whenever another WordPress function runs. So, if we can find a function that runs whenever an individual post is viewed, we are all set; all we would need to do is write our own function that records the number of views and hook it in. Before we get to that, though, let’s write the new function itself. Here is the code:

As you can see, I have added phpDocumentor-style documentation to the top of the function, and this is a pretty good indication of what to expect from this convention. First of all, using a conditional tag, we determine whether the user is viewing a post on a dedicated page.

If the user is on a dedicated page, we pull in the $post object, which contains data about the post being shown (ID, title, posting date, comment count, etc.). We then retrieve the number of views that the post has already gotten. We will add 1 to this and then overwrite the orignal value with the new one. In case something goes wrong, we first check whether the current view count is what it should be.

The current view count must be set; it cannot be empty. And it must be numeric in order for us to be able to add 1 to it. If it does not meet these criteria, then we could safely bet that the current view count is 0. Next, we add 1 to it and save it to the database. Finally, we return the number of views that the post has gotten, together with this latest number.

So far, so good. But this function is never called, so it won’t actually be used. This is where hooks come in. You could go into your theme’s files and call the function manually from there. But then you would lose that functionality if you ever changed the theme, thus defeating the entire purpose. A hook, named wp_head, that runs just before the </head> tag is present in most themes, so we can just set our function to run wheneverwp_head runs, like so:

That’s all there is to the “mysticism” of hooks. We are basically saying, whenever wp_head runs, also execute the awepop_add_view function. You can place the code before or after the function itself.

Retrieving and Showing the Views

In the function above, I already use the WordPress get_post_meta() function to retrieve the views, so writing a separate function for this might seem a bit redundant. In this case, it might well be redundant, but it promotes some object-oriented thinking, and it gives us greater flexibility when further developing the plugin. Let’s take a look:

This is the same piece of code that we used in the awepop_add_view() function, so you could just use this to retrieve the view count there as well. This is handy, because if you decide to handle the 0 case differently, you only need to change it here. You will also be able to extend this easily and provide support for cases when we are not in the loop (i.e. when the $post object is not available).

So far, we have just retrieved the view count. Now, let’s show it. You might be thinking this is daft?—?all we need is echo awepop_get_view_count() . "views", no? That would certainly work, but what if there is only 1 view. In this case, we would need to use the singular “view.” You might also want the freedom to add some leading text or some other tidbit, which would be difficult to do otherwise. So, to allow for these scenarios, let’s write another simple function:

Show a List of Posts Based on Views

To show a list of posts based on view count, we create a function that we can place anywhere in our theme. The function will use a custom query and loop through the results, displaying a simple list of titles. The code is below, and the explanation follows.

We start by passing a bunch of parameters to the WP_Query class, in order to create a new object that contains some posts. This class will do the heavy lifting for us: it finds 10 published posts that have awepop_views in the meta table, and orders them according to this property in descending order.

If posts meet this criterion, we create an unordered list element. Then, we loop through all of the posts that we have retrieved, showing each title as a link to the relevant post. We cap things off by adding a closing tag to the list when there are posts to show. Placing the awepop_popularity_list() function anywhere in your theme should now generate a simple list of posts ordered by popularity.

As an added precaution, place the call to this function in your theme, like so:

This ensures that if the plugin is disabled (and thus the function becomes undefined), PHP won’t throw a big ol’ error. It just won’t show the list of most popular posts.

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 thatalready 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:

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.

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:

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

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

… becomes:

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

… to:

And line 55 would change from…

… to:

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:

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

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:

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:

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:

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 thefigcaption element’s parent figure element, if any.

Currently an image with a caption is rendered like this:

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:

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:

First, we point the shortcodes for wp-caption and caption to our new functiontwentyten_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:

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’saria-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:

After our HTML5 changes, it would look like this:

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 offunctions.php:

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:

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:

We follow this with another custom function:

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:

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>.

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:

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

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

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

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:

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:

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:

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:

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

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:

becomes

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

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.

With the advent of sophisticated and user-friendly content management systems like WordPress, textual content has become increasingly easier to manage. The architecture of these systems aims to deliver a well-formed code foundation; this means that if you are a good writer, then your content will be just as awesome as the structure and quality of the code that runs it.

However, media handling is, by nature, not the greatest. In many cases, images are used merely to make the website look good, not to supplement the content. Little care is usually taken to make these elements as useful as their textual counterparts. They are often tacked on as an afterthought; the owner thinks, “If all of my posts have an image, surely I should find something quickly for this next one as well.”

Because the content of images cannot be parsed by search engines, making sure they are rich in meta information before publishing them is important. Here are a few ways to enrich your blog using some common sense, best practices and the power of WordPress.

Understanding And Using Images

To get the most out of your graphic content, you’ll need to be familiar with how they work in HTML. To put an image on a page, you would add an image tag, with the appropriate attributes, like so:

As you can see, the tag has three attributes that contain information about the image:

• src is the URL source of the image file;
• alt, or alternative, text is shown when an image can’t load (whether because of a loading error, text-only browser, etc.);
• title is the title attribute, where you can add a short description of the image, which will pop up after hovering over the image for a second.

The src and alt attributes are both required; the HTML is invalid without them. However, HTML is not a strict language. Your post will still render just fine if you leave out the alt text, which is one of the negative aspect of loose languages: it doesn’t force best practices.

Why Use Alt and Title Attributes?

The most useful aspect of alt and title is that they allow you to add text-based information to an element on your website that would otherwise be invisible to search engines. If you sell umbrellas, Google won’t see that one particular image on your page is of the coolest umbrella it’s ever seen. You’ll have to add that information yourself.

Also, alt attribute can be a huge help to the disabled, because this is how they know what is in an image. So,use the title attribute to write something snappy about the image, and use the alt attribute to describe it. Sticking with our umbrella example, the incorrect way to do this would be:

And the correct way would be:

Remember, the alt attribute is descriptive not only for the visually impaired, but for Google as well. Your website might even rank better if it’s image-heavy.

While not as critical, it is probably worth optimizing the file name as well. The name o290rjf.jpg won’t get in the way showing the image, but super-sleek-umbrella.jpg is a parsable bit of text, and there is a chance that some search engines would take it into account. Also, if someone downloads the image from your website, they will be able to find it more easily in their “Downloads” folder. And user satisfaction translates into more visits.

Adding Images Properly With WordPress

WordPress allows you to attach media to posts very easily through the “Add media” modal window, which you can access by clicking one of the icons over the editing toolbar in a post. You can select multiple images and upload them to the post with a click. Because this is so easy, adding the meta attributes is often overlooked and regarded as a hassle.

When uploading images, make sure to fill out the form which is displayed. Add the title and alt attribute at a bare minimum, but also consider filling in the caption and description fields. If you want a short, nicely formatted caption to appear under the image (which is a good idea), type one in. We’ll look later at harnessing the description field, so writing a paragraph or so about the image might be a good idea.

Once done, all you need to do is insert the image, and the correct HTML tag will be plopped in by WordPress automatically. By taking an extra minute, you will have added a sizable bit of text to your image, making it SEO-friendly and in turn making your website that much more informative. If this is all you have time for, then you have done the most important step. But let’s look at some more advanced image-handling techniques.

Managing Image Sizes

If you display an image at a size of 450×300 pixels, then having an image file of roughly the same size is a good idea. If the source file is 2250×1500 pixels, the image will show up just fine, but instead of loading a 50 KB image, you would be loading a 500 KB image, while achieving the same effect.

WordPress is super-smart, though, taking care of this for you by churning out different sizes for each image you upload. See the dimensions it creates by going to the media settings in the back end. You can modify these once you have the final layout, which I would advise.

For an image-centric website, you might want to add a couple of more sizes, to make sure you never serve an image that is bigger than needed. By putting the following code in your theme’s functions.php file, you create two extra sizes:

The first line defines an image that is cropped to exactly 75×75 pixels, and the second line defines an image whose maximum dimension is 200×150, while maintaining the aspect ratio. Note the name given in the first argument of the function, because you will be referring to it when retrieving the images, which you can do like so:

The first argument is the ID of the attachment that we want to show. The second argument is the size of the image.

Rebuilding Your Thumbnails

If you have been blogging for a while now, you probably have a ton of images. Adding an image size now will notcreate new thumbnails of your existing images. If you specify an image size—for example, our wider_imageformat—WordPress will fetch a resolution that is close to it, but it won’t create a thumbnail especially for this size.

Using a plug-in, however, you can go back and regenerate the thumbnails to make sure that all of the images are optimized, thus minimizing server load. I can personally vouch for AJAX Thumbnail Rebuild, which goes through all of your images and regenerates the selected sizes for you.

Using Featured Images

A featured image can capture the message of a post. Featured images have many uses: for adding flare in a magazine-style layout, underlining a point made in an article, or substituting for an article’s title (in the sidebar, for example).

Featured images have been built into WordPress since version 2.9, so you don’t need any special plug-ins. If you are using the new default WordPress theme, TwentyTen, or the cutting-edge TwentyEleven (which is right now only in development versions), then featured images are already enabled. Otherwise, you might need to switch them on manually. To enable them, just open your theme’s functions.php file, paste in the code below, and voila!

The first line of code tells WordPress to enable featured images, while the second sets the default size for featured thumbnails. The set_post_thumbnail_size() bit works just like the add_image_size() function we looked at above. You can give it a width, a height and, optionally, a third boolean parameter (true or false) to indicate whether it should be an exact crop.

Once that’s done, go into the back end and edit a post. You should see a featured image widget in the right sidebar; click it to add an image. Or navigate to the media section of the post, view an image’s details, and click the “Use as featured image” link.

The only thing left to do is make these featured images show up! You will need to edit the code for the loop in your theme’s files, which is usually found in index.php or in some cases in loop.php. Look for something like this:

Wherever you want to show the images, add the following in the loop:

In some cases, you may want to show the featured image at a size different than the default. If so, you can pass the desired size as an argument, like so:

You can name a size that you have previously created using add_image_size(), as I have done above, or you can use an array to specify a size on the fly: array(225, 166).

Creating Galleries

The easiest way to show multiple images in a post is to upload the images to the post and then use the gallery shortcode to display them all.

Simply open the “Upload/insert” media screen, click on “Galleries,” and scroll down to the gallery settings. Make sure the links point to the attachment pages (more on this later), and then insert the gallery. Now, thumbnails of all the images you have uploaded to that post will be displayed, each linked to its attachment page.

Including and Excluding Images

You can easily include images from other posts or exclude certain images from the current post by modifying the gallery shortcode. If you switch the editor to the HTML view, you should see [ gallery ] where the gallery would show up. You can add options to it using the following format: [ gallery option_1="value" option_2="value" ].

To include a specific image, you will need to know its attachment ID. You can find that by going to the “Media” section of the WordPress admin area, finding the image you need, hovering over it, and reading the target from the URL or status bar. It should be something like http://webtastique.net/wp-admin/media.php?attachment_id=92&action=edit. The number after attachment_id is what you need.

You can include multiple items like so: [ gallery include="23,39,45" ]. And exclude items the same way: [ gallery exclude="87,11"].

Excluding the Featured Image

Sometimes you will want to use all of the images attached to a post except the featured one. You could find the ID of the image and enter it in the exclude options of the gallery shortcode every time, but that would be a hassle (especially if you change the featured image later). Let’s automate this.

Regrettably, the only way to do this is by replacing a core function in WordPress with our own, using theremove_shortcode() and add_shortcode() functions. The large chunk of code below may be off-putting, but implementing it is as easy as copying, pasting and adding two lines of code. The reason we need to add all this is that we can’t just go around editing a WordPress core file; we need to replace core functions with built-in functions.

First, open your theme’s functions.php file (if it doesn’t exist, simply create it), and add the following code to it:

This removes the gallery_shortcode() function that WordPress uses to display galleries and replaces it with our own function, called myown_gallery_shortcode().

The code below is almost exactly the same as the default, but we are adding a line to exclude our featured image. Paste the code below into the functions.php file, and then read the explanation further down:

In lines 18 through 29, WordPress is determining the default attributes. By default, nothing is excluded; so under this bit of code, we add two more lines, and that’s it:

The first line here finds the featured image of the post in question, while the second appends it to the exclude list. The rest of the code is the same as the default.

Using Attachment Pages

In my opinion, attachment pages are the single best tool for creating richer, more informative image-driven websites. They enable you to create separate pages for each and every media item you have, affording you considerably more power in managing them.

Attachment pages exist in WordPress by default, but people seem to rarely link to them. Linking thumbnails directly to their full-sized versions (i.e. without the website framework) is much more common. I am not a huge fan of this because it throws the user into a completely new environment without prior warning. Attachment pages allow you to show the user a wealth of information about the image; and for those who need a bigger version, you can display download links for different sizes.

Enabling Attachment Pages

As stated, you don’t need to do anything to enable attachment pages. Just make sure to link your images to them instead of to the original files. For galleries, link to the attachment page using the radio buttons before inserting them. When inserting a single image, point the link’s URL field to the “Post URL” by clicking the relevant button below it.

Styling Attachment Pages

If your theme doesn’t have an attachment.php file, then single.php will handle the display of attachment pages by default. If you have a decent theme, chances are this will work fine without your needing to touch any code. When clicking on an image, you should arrive on a page that shows the title and description of the image and the image itself.

To add additional information to this page, you will need an attachment.php file. I suggest duplicating single.phpand going from there, because in most cases it will have most of what you need.

Adding Image Data

To make the attachment pages more informative, add a bunch of meta data to your images. To help with this, I have created a plug-in especially for Smashing Magazine readers, which you can download from the WordPress Plugins page, or just search for “media custom fields” in WordPress’ back end where you “Add new” plug-ins.

This plug-in lets you create your own custom fields, like the photographer’s name, coordinates, color palette, etc. What you add is up to you. You can easily manage all of the information on the plug-in’s admin page.

In the video below, I’ll walk you through how I did this on my own blog. You’ll learn about basic usage and see an example.
“Better Media Management With WordPress Using the Media Custom Fields Plugin,” by Daniel Pataki.

Creative Attachment Page Uses

Download Links for Image Sizes

Using the add_image_size() function mentioned above, you could create five or six image sizes and show Flickr-style download options that allow users to choose the dimensions of their preference. This is helpful when showcasing desktop backgrounds and large photographs. So, let’s do that:

Adding Color Palettes

By adding some creativity to the mix, you can come up with some nifty features. The screencast above and the code below shows you how to display color blocks of the dominant colors in each of your photos.

To accomplish this, you will first need to create a custom field using the Media Custom Fields plug-in and name it something like “Color Palette.” Remember to look at the field name that the system generates; it is displayed in parentheses next to the title you chose. It should be something like tqmcf_color-palette.

Once that’s done, edit the image you’d like, and add the following in the custom field:color_1,color_2,color_3, where colors_x should be hex values. In my case, I entered the following string:f0e9bf,e4dc99,000000.

Open up the attachment.php file in a code editor. Wherever you want to display the colors, you’ll need to add something like this:

You will also need to style the link element so that it shows up. Because anchors are inline elements by default, if they have no content, they won’t show up. Here’s the CSS I used, but you’ll need to change it to match your website:

Conclusion

As you can see, even with minimal effort, you can create a much more robust system for storing and showing images. And with some copying and pasting, you can take it one step further.

The first and most important step is to add meta data like alt text to images, give them meaningful file names and so on. By doing so, you lay a foundation for any media management system. You can easily add other meta data to your files by using the Media Custom Fields plug-in for WordPress.

With this foundation in place and a few simple code tweaks, you can show images based on any of the custom fields you wish, displaying relevant and interesting information about them. Creating download buttons for multiple sizes and creating multiple color palettes are only the tip of the iceberg. The techniques showcased here can be used for so much more!

(al)

High-quality WordPress themes always come in handy. Whether you are looking for some design inspiration or professional coding solutions — in both cases you can learn a lot, you can apply them and you can build customized designs upon them without reinventing the wheel all the time.

In this article we present 100 free high-quality WordPress themes. Together with hundreds of other designs, these themes have been manually selected, installed and tested over the last weeks. They all can be downloaded, customized and used for free in both personal and commercial projects. Links to demo-versions provide a direct preview of a theme.

Please notice that the listed WordPress themes are presented in 8 sections: vibrant themes, simple & minimalistic themes, magazine style, grid-based, clean and legible, advanced, experimental, photoblog & videoblog.

You might also want to take a look at our previous selections:

• 83 Beautiful WordPress Themes
  An overview of beautiful, but rather unknown themes you might have missed.
• 21 Fresh, Usable and Elegant Themes
  A quite pretty selection of elegant yet well thought-out themes.
• 10 Fresh and Clean Themes
  The beauty of these themes lies in their clean look supported by a legible content presentation.
• 13 WordPress Magazin-Themes
  from Dr. Web Magazine

You want them — you get them. This page may take a while to load; therefore please be patient and don’t hit “Reload” too often.

You may notice that some of your blog posts are drawing search engine traffic for particular search phrases and keywords (especially if your blog has had some time to establish itself with search engines). Even if you are doing keyword research prior to writing posts, you’ll almost definitely see that some of these phrases that are producing traffic are not something that you had intentionally targeted. While this is a nice surprise, it also means that there is likely more potential if you’re willing to make some small, but significant, tweaks.

If you’re drawing search traffic from a phrase that you’re not targeting, it probably means that you could be ranked even higher, and draw even more traffic as a result, if you make some changes to optimize your post accordingly. Just because a post was published at some point in the past doesn’t mean that it can’t be modified and made to be more effective.

In this post we’ll look at a few simple changes that can be made to improve upon these unintentional rankings. By taking a relatively small amount of time to recognize these opportunities and act on them, you could be setting yourself up for significantly more search engine traffic on an on-going basis.

First of all, you’ll need to find the keywords and phrases that are already driving traffic to your site. These are the search terms that you know are already producing results, so making a small effort to move up in the rankings is well worth your time. If your post is ranked 5th in Google for a particular phrase without even attempting to optimize the page, you may be able to quickly improve to the 1st or 2nd spot and see a noticeable increase in traffic. Repeat this process for a few different posts and the results will add up.

As an example, I have a post on my primary blog that has steadily attracted search traffic for the past six months or so. It’s not a ridiculous amount of traffic each day, but it does come from some fairly competitive search phrases and it is consistent every day, which adds up over the span of a month. I recently spent a few minutes to look into which search phrases were sending traffic to this post and I was surprised to see that I was ranked 4th in Google for a phrase that didn’t seem to be optimized. I made a simple change in just a couple of minutes and within a few days the post had moved to the #1 spot for that same phrase. Since then search traffic has been up consistently for that phrase.

To find these opportunities for your own blog, look at your stats from Google Analytics (or a similar program) and see what search phrases are sending traffic to your site. Most likely these phrases will be leading traffic to a particular post rather than to your homepage, which means you can simply optimize that post to more effectively target the phrases that are already sending traffic. Just look through the phrases that are sending traffic and you’re sure to find some that could be more productive. Personally, I start with the ones that are sending the most traffic since they have potential for the best results.

In addition to looking at Google Analytics, you can also use Google Webmaster Tools. Webmaster Tools will show you some valuable data under “Statistics” and “Top Search Queries.” This will show you 20 phrases where your site is ranking well, and 20 phrases that are sending the most traffic to you. You may find some items on this list that surprise you a little bit. If they surprise you, it probably means that you weren’t intending to draw traffic from these phrases and there should be some room for improvement.

So now that you have identified a few phrases to work with, what should you do? Here are a few simple suggestions.

1. Page Titles

Page titles are the most significant on-page factor for search engine rankings. If your post is ranking very well for a particular phrase that is not exactly used in your page title, you should be able to see some improvement in the ranking if you change your page title to include this phrase. If you’re using WordPress and the All-In-One SEO Pack Plugin this is very easy. From the example that I used earlier, I didn’t remove anything from the existing title, I simply added a two-word phrase that was already producing the search traffic. As a result, with no other effort, that was enough to jump a few spots in the rankings.

2. Add New Internal Links

By adding more internal links to a particular post you will be indicating to search engines that the post is important. This is a pretty simple process, but one that most of us don’t take the time to do. If you’re blog has been around for a while you have plenty of places where you can add internal links. Go back and find posts on related topics and add a link in the content of the page or at the beginning or end of the post. Also, look for opportunities to link from any significant pages on your blog.

3. Change Anchor Text

Another factor that will influence search engine rankings is the anchor text that is used on links that point to that post. You can obviously control the anchor text used on your internal links, so take a few minutes and see what anchor text you are currently using on these links and see if it could be optimized to match the phrase that you are now targeting.

The anchor text of links from other sites to this page will also be significant, but you may or may not be able to change that. In most cases the best you could do is to contact the other blogger or website owner and ask them if they mind changing the anchor text on a particular link. I know some people do this, but I can’t say that I have ever asked someone to change the anchor text on their site for me.

4. Meta Description

While meta descriptions are not going to make a big difference in terms of rankings, an effective description is capable of improving the click-through-rate from the SERPs. For example, if your page is ranking 3rd in Google for a particular phrase, you could enter a description that will do a better job of attracting clicks from those searchers and you may find a 10% in traffic without moving up in the rankings. Again, this is something that you can easily do with the All-In-One SEO Pack Plugin.

5. Add to the Content of the Post

One of the best ways to help a post draw more traffic on an on-going basis is to make the post more useful. Most of us don’t take the time to improve our old posts, but the time can be a good investment in some cases. By making adding new or updated content you will be making the post more useful and hopefully it will attract more links in the future because it continues to be valuable. And more links mean possible improvement in rankings.

6. Write a Follow Up Post

I rarely write posts to target a specific word or phrase, but I did so about a year ago with a post on my primary blog. After a while the post attracted some links and moved up to the number one spot for the targeted phrase. After that I thought it would be nice if I could get a second post to rank well for that phrase, so I published a follow up. Since my site was already recognized by Google as a good source of information for this phrase it was pretty easy to get a second post to rank for the same phrase. Before long I had the first two spots in Google for the phrase pointing towards my two posts.

If you have a page that is ranked very high, this is a very achievable way to grab an even higher share of the traffic for this phrase. However, most of us (including me) rarely think to do this. Take a look at your posts that are ranking well, most likely you’ll find some opportunities where you could write a follow up post to target the same phrase.