Varnish is an open source, state of the art web application accelerator.

What it does is make your existing site faster by caching requests so your web server doesn’t have to handle them. This helps because your web server may be a lumbering giant like Apache that is loaded up with extra functionality like PHP, the GD library, mod_rewrite and all the other tools you need to make your website. All these modules unfortunately make your general purpose web server slower and heavier so by avoiding it your site spits out pages much faster!

Varnish sits in front of your webserver. Most documentation I’ve read on the subject suggest having Apache listen on any port other than port 80 and then have Varnish listen on port 80 of the external IP address. There’s no need to do this as I configured Apache to listen on port 80 of the 127.0.0.1 or localhost address while Varnish sits on the external IP.

Installing Varnish
Setting up Varnish is fairly easy. I’m going to assume that you’re already using Apache and On a Debian based system just use this to install it (as root)

apt-get install varnish

Apache
You need to configure Apache first. It has to listen on port 80 of the localhost interface. Edit /etc/apache2/ports.conf and change the following settings:

NameVirtualHost 127.0.0.1:80
Listen 127.0.0.1:80

Normally Apache listens on port 80 of all interfaces so you’ll probably just have to add “127.0.0.1:” in front of the 80.

Varnish
By default Varnish won’t start. You need to edit /etc/default/varnish. Change the following options in that file:

START=yes

DAEMON_OPTS="-a EXTERNAL_IP_ADDRESS:80 \
-T localhost:6082 \
-f /etc/varnish/default.vcl \
-S /etc/varnish/secret \
-s file,/var/lib/varnish/$INSTANCE/varnish_storage.bin,1G"

Replace EXTERNAL_IP_ADDRESS with the IP of your external IP address.

Now edit /etc/varnish/default.vcl. The file should already exist but most of it is commented out. First of all change the “Backend default”:

backend default {
.host = "127.0.0.1";
.port = "80";
}

This tells Varnish that Apache is listening on port 80 of the localhost interface.

I’m going to define several functions in the default.vcl now. Comments in the code should explain what most of it does.

# Called after a document has been successfully retrieved from the backend.
sub vcl_fetch {
# Uncomment to make the default cache "time to live" is 5 minutes, handy
# but it may cache stale pages unless purged. (TODO)
# By default Varnish will use the headers sent to it by Apache (the backend server)
# to figure out the correct TTL.
# WP Super Cache sends a TTL of 3 seconds, set in wp-content/cache/.htaccess

# set beresp.ttl = 300s;

# Strip cookies for static files and set a long cache expiry time.
if (req.url ~ "\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm)$") {
unset beresp.http.set-cookie;
set beresp.ttl = 24h;
}

# If WordPress cookies found then page is not cacheable
if (req.http.Cookie ~"(wp-postpass|wordpress_logged_in|comment_author_)") {
set beresp.cacheable = false;
} else {
set beresp.cacheable = true;
}

# Varnish determined the object was not cacheable
if (!beresp.cacheable) {
set beresp.http.X-Cacheable = "NO:Not Cacheable";
} else if ( req.http.Cookie ~"(wp-postpass|wordpress_logged_in|comment_author_)" ) {
# You don't wish to cache content for logged in users
set beresp.http.X-Cacheable = "NO:Got Session";
return(pass);
} else if ( beresp.http.Cache-Control ~ "private") {
# You are respecting the Cache-Control=private header from the backend
set beresp.http.X-Cacheable = "NO:Cache-Control=private";
return(pass);
} else if ( beresp.ttl < 1s ) {
# You are extending the lifetime of the object artificially
set beresp.ttl = 300s;
set beresp.grace = 300s;
set beresp.http.X-Cacheable = "YES:Forced";
} else {
# Varnish determined the object was cacheable
set beresp.http.X-Cacheable = "YES";
}
if (beresp.status == 404 || beresp.status >= 500) {
set beresp.ttl = 0s;
}

# Deliver the content
return(deliver);
}

sub vcl_hash {
# Each cached page has to be identified by a key that unlocks it.
# Add the browser cookie only if a WordPress cookie found.
if ( req.http.Cookie ~"(wp-postpass|wordpress_logged_in|comment_author_)" ) {
set req.hash += req.http.Cookie;
}
}

# Deliver
sub vcl_deliver {
# Uncomment these lines to remove these headers once you've finished setting up Varnish.
#remove resp.http.X-Varnish;
#remove resp.http.Via;
#remove resp.http.Age;
#remove resp.http.X-Powered-By;
}

# vcl_recv is called whenever a request is received
sub vcl_recv {
# remove ?ver=xxxxx strings from urls so css and js files are cached.
# Watch out when upgrading WordPress, need to restart Varnish or flush cache.
set req.url = regsub(req.url, "\?ver=.*$", "");

# Remove "replytocom" from requests to make caching better.
set req.url = regsub(req.url, "\?replytocom=.*$", "");

remove req.http.X-Forwarded-For;
set req.http.X-Forwarded-For = client.ip;

# Exclude this site because it breaks if cached
#if ( req.http.host == "example.com" ) {
# return( pass );
#}

# Serve objects up to 2 minutes past their expiry if the backend is slow to respond.
set req.grace = 120s;
# Strip cookies for static files:
if (req.url ~ "\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm)$") {
unset req.http.Cookie;
return(lookup);
}
# Remove has_js and Google Analytics __* cookies.
set req.http.Cookie = regsuball(req.http.Cookie, "(^|;\s*)(__[a-z]+|has_js)=[^;]*", "");
# Remove a ";" prefix, if present.
set req.http.Cookie = regsub(req.http.Cookie, "^;\s*", "");
# Remove empty cookies.
if (req.http.Cookie ~ "^\s*$") {
unset req.http.Cookie;
}
if (req.request == "PURGE") {
if (!client.ip ~ purge) {
error 405 "Not allowed.";
}
purge("req.url ~ " req.url " && req.http.host == " req.http.host);
error 200 "Purged.";
}

# Pass anything other than GET and HEAD directly.
if (req.request != "GET" && req.request != "HEAD") {
return( pass );
} /* We only deal with GET and HEAD by default */

# remove cookies for comments cookie to make caching better.
set req.http.cookie = regsub(req.http.cookie, "1231111111111111122222222333333=[^;]+(; )?", "");

# never cache the admin pages, or the server-status page
if (req.request == "GET" && (req.url ~ "(wp-admin|bb-admin|server-status)")) {
return(pipe);
}
# don't cache authenticated sessions
if (req.http.Cookie && req.http.Cookie ~ "(wordpress_|PHPSESSID)") {
return(pass);
}
# don't cache ajax requests
if(req.http.X-Requested-With == "XMLHttpRequest" || req.url ~ "nocache" || req.url ~ "(control.php|wp-comments-post.php|wp-login.php|bb-login.php|bb-reset-password.php|register.php)") {
return (pass);
}
return( lookup );
}
Notes:

Varnish caches Javascript and CSS files without the cache buster ?ver=xxxx parameter. Varnish doesn’t cache any url with a GET parameter so those files weren’t getting cached at all.
The code removes the Cookies for Comments cookie after it checks for GET and HEAD requests. This improved caching significantly as web pages are not cached with and without that cookie. They are all cached without it. The cache hit/miss ratio went up significantly when I made these two changes.
I have a private site on this server that requires login. I had to stop Varnish caching this site as the privacy plugin thought I wasn’t logged in. See the example.com code above.
If pages were purged Varnish could store cached pages for much longer.

As I didn’t modify WordPress so it would issue PURGE commands there are probably issues with the cache keeping slightly stale pages cached but I haven’t seen it happen or receive complaints about that.

PHP
Since all requests to Apache come from the local server PHP will think that the remote host is the local server. By using an auto_prepend_file set in your php.ini or .htaccess file you can tell PHP what the real IP is with this code:

if ( isset( $_SERVER[ "HTTP_X_FORWARDED_FOR" ] ) ) {
$_SERVER[ 'REMOTE_ADDR' ] = $_SERVER[ "HTTP_X_FORWARDED_FOR" ];
}

You’ll see a huge improvement if you use Apache, especially if you don’t use a full page caching plugin like WP Super Cache on your WordPress site.

To see exactly how well Varnish is working use varnishstat and watch the ratio of cache hit and miss requests. This will vary depending on your TTL and by how much time Varnish has had to populate the cache. You can also configure logging using varnishncsa as described on this page:

varnishncsa -a -w /var/log/varnish/access.log -D -P /var/run/varnishncsa.pid

Now use multitail to watch /var/log/varnish/access.log and your web server’s access log.

I used a number of sites for help when setting this up. Here are a few:

Tutorial: Setting up Varnish with Apache.
Putting Varnish In Front Of Apache On Ubuntu/Debian
WordPress + nginx + Varnish + Apache 2
MediaWiki Manual:Varnish caching
Using Varnish So News Doesn’t Break Your Server

I have tried Nginx in the past but could not getting it working without causing huge CPU spikes as PHP went a little mad. In comparison, Varnish was simple to install and set up. Have you tried Varnish yet? How can I improve the code above?

Edit: It looks like someone else has done the hard work. I must give the WordPress Varnish plugin a go.

This plugin purges your varnish cache when content is added […]

Can you help? RT @pygnol #WPML seems to be a very complete solution to design a multilingual #wordpress blog. Any feedback?

Get back to the Bones (ha!) #wordpress #wpthemes #wpdev

15 Most Useful Twitter Plugins for Wordpress #wordpress #twitter

HTML5 Video that works (almost) everywhere #WordPress

Post Comments Using Twitter and Facebook:

Free HTML5/CSS3 WordPress 3.1 Theme With Responsive Layout: Yoko #wordpress #html5

I have seen many questions from people about how to create photo galleries in WordPress. But often I see these questions answered by somebody recommending a plugin or something like that. You don’t really need plugins to create photo galleries. WordPress has a huge amount of gallery functionality built right in. You just need to make your theme smarter in order to take advantage of it.

Note: Matt has one of the neatest photo gallery implementations around, and he often gets questions about it. So I’m going to refer to it from time to time in this post. Maybe you’ll want to head over there and familiarize yourself with some of the look and features of it.

Understanding the Gallery Concept
One of the first things you need to know is how WordPress organizes Galleries. A gallery is really just a post with a bunch of images attached to it.

While editing a post or creating a new one, you have the option to upload images or other files. When you upload a file through the file Uploader, WordPress creates a post just for that file. This post has a post_type of “attachment”. Images in particular get some extra processing, and they show up in multiple sizes, you can insert them into the posts, etc. You probably already knew that. You probably have seen the gallery inserter, which just inserts the “gallery” shortcode into your post.

What you might not have known is that it’s doing more than you think. It’s not just resizing those images you’re uploading, but it’s pulling out metadata and other information about the image too. It’s grabbing alot of the EXIF data from the image and storing it as postmeta items for that attachment post. The post itself, being a post, gets its own URL, which is the post that it is attached to’s URL followed by the attachment posts title. Basically, an attachment post is sorta like a child of the parent post, which contains the gallery. So all a gallery really is is the sum of the attachments posts that are children of the gallery post itself.

Graph of the Gallery concept

Is that clear as mud? Don’t worry, it’s simpler to work with than you think.

Create an Image Template
First thing you need to do is to edit your theme (or create a child theme, if you prefer). What you’re going to do is to make an “image.php” file.

(Side note: If you browse through the source of WordPress, you’ll never find where it loads the “image.php” file, because it isn’t there. What it is actually doing is looking for the mimetype of the attachment as a filename. So since you uploaded, say, a JPG file, then the mimetype is image/jpeg. It splits that and looks for image.php, followed by jpeg.php, followed by image_jpeg.php, and finally just attachment.php as the generic base. It does this for any and all attachments, and any and all mime types. So you can have a video.php for video attachments, audio.php for audio attachments, etc.)

The image.php file is the template that will load for “single images”. A gallery shows thumbnails, but when you click on them, you go to the attachment page for just that image. An easy way to start with your custom image page is to copy your existing single post page to it. Just copy single.php to image.php. If you don’t have a single.php, maybe you should try copying the index.php file instead.

Modify your Image Template
Since this is an image, it’s going to have things in it that normal posts don’t. It’s also going to need special navigational entries that other posts don’t have.

For starters, it has a parent, which is the post containing the gallery. So what if we want to display the gallery post’s name? Easy, we can reference the parent using $post->post_parent. So code like get_the_title($post->post_parent) will get us that title so we can echo it. Similarly, using something like get_permalink($post->post_parent) will get us the link back to the gallery. So this sort of code in our image template will display that link:

echo "<a href='" . get_permalink($post->post_parent). "'>Go back to ". get_the_title($post->post_parent) ."</a>";

For navigation, we have special functions. previous_image_link and next_image_link will let us display links to the previous or next images in the gallery order. Each of these takes two parameters. The first is the size of the previous or next image we want to display (or false to not show a thumbnail at all), the second optional parameter is some text to put in the link. So to show a couple of text navigational links, this code would work:

echo previous_image_link(false,'Previous Photo');
echo next_image_link(false,'Next Photo');

If I wanted to display image links instead, I could change that false to ‘thumbnail’ to display the thumbnail sized images. Or ‘medium’. Or whatever size I preferred.

Next we want to display the image. The wp_get_attachment_image function takes care of that easily:

echo wp_get_attachment_image( $post->ID, 'medium' );

The second parameter there is the size we want to display it at. You could also use ‘large’, ‘full’, ‘thumbnail’, etc. Any of the image sizes. If you want the image to be clickable, you might wrap it in an A tag and link it to the image itself.

But remember that attachment posts are still posts. All those fields you can enter on the image uploader are available to you to use. For example, the “Title” is stored in the normal Post Title field, so calling the_title() will display that. The Description is stored in the Content field and can be displayed with the_content(). The Caption is stored in the Excerpt field and can be displayed with the_excerpt(). You should use these as needed.

EXIF Information
Here’s an example of one of Matt’s single image pages, showing a balloon: http://ma.tt/2011/05/balloon-ride/mcm_9033/.

Nice shot. Scroll down a bit and look on the right hand side of that page, where it says INFO. Lots of nifty information there. But he didn’t put any of that in, WordPress did it all by itself.

To gain access to that information in your image.php file, you use this code:

$imagemeta = wp_get_attachment_metadata();

If you examine this array, you find that it contains widths, heights, filenames of the various sizes of thumbnails generated, etc. But it also contains an array called “image_meta”. This is an array of information that represents everything WordPress was able to glean from the image itself. After you know this, it’s just a matter of displaying it properly.

For example, to display the camera name, he has code similar to this:

if ($imagemeta['image_meta']['camera']) {
echo "Camera: " . $imagemeta['image_meta']['camera'];
}

There’s other bits in there, like Aperture, Focal Length, ISO settings, and Shutter Speed. Most of these are straightforward, except for shutter speed which is often not in an easy format to display. Usually it’s a fractional value, represented as a decimal. Often we want to convert this to the fractional display. Here’s a bit of code I wrote to do that. It’s not perfect, but what is?

if ($imagemeta['image_meta']['shutter_speed']) {
echo 'Shutter: ';

// shutter speed handler
if ((1 / $imagemeta['image_meta']['shutter_speed']) > 1) {
echo "1/";
if (number_format((1 / $imagemeta['image_meta']['shutter_speed']), 1) == number_format((1 / $imagemeta['image_meta']['shutter_speed']), 0)) {
echo number_format((1 / $imagemeta['image_meta']['shutter_speed']), 0, '.', '') . ' sec';
} else {
echo number_format((1 / $imagemeta['image_meta']['shutter_speed']), 1, '.', '') . ' sec';
}
} else {
echo $imagemeta['image_meta']['shutter_speed'].' sec';
}
}

Ugly, I know, but it gets the job done, more or less. Works on most shutter speeds I’ve tested it with.

Gallery Formatting in the Stream
Now, obviously you want your posts to look good in the normal flow of the blog as well. Twenty-Ten and the upcoming Twenty-Eleven themes both show you how to do this rather easily. Twenty-Ten used the “gallery” category for this at one point, before Post Formats came along and made that method obsolete. Now it uses the gallery post format instead.

So first, obviously, your theme will need to support the gallery post format. This is easy, just add this to your theme’s functions.php if it doesn’t have gallery support already (or add “gallery” to it if it does have post format support).

add_theme_support( 'post-formats', array( 'gallery') );

Now that that’s done, you have the option of choosing gallery as a post format. So you need to edit your theme to use that flag as an indicator to display things differently.

There’s plenty of tutorials on post formats out there, so I’ll assume you’re more than capable of figuring out how to use has_post_format(‘gallery’) or the “.home .format-gallery” CSS indicators to style the posts as needed.

What you need to know for specific gallery formatting in the main stream of the blog is how to display a selected representative image from the gallery there instead of the whole thing. There’s two basic steps to this.

First, you have to write your post appropriately to begin with. Take one of Matt’s posts for example: http://ma.tt/2011/05/20/

Here’s how that post actually looks in the editor:

Description text at the top here... Went for balloon ride, etc.
< !--more-- >
[ gallery ]

In other words, he puts the description first, then the more tag, then the gallery after it. This has the effect of giving a natural separation of the description content and the gallery itself. The gallery is not displayed on the front page, because it’s after the more tag. So a call to the_content() on the stream pages will only show the description.

Secondly, you can easily adapt the Featured Image function to let you choose which image to display in the stream. All the user has to do is to upload their gallery then select one and set it to be the featured image. Voila, it’ll be the main represent[…]

Added a blog email subscription widget to my site () using Jetpack. That was painless. #WordPress

Added a blog email subscription widget to my site () using Jetpack. That was painless. #WordPress

A Few Words on Child Themes #wordpress

Developing your own WordPress plug-ins should be near the top of your list of things to master as a web developer. Not only are they indispensable to clients to bridge gaps that haven’t been filled yet, they are very immensely helpful to the WordPress community. If that doesn’t give you a warm feeling inside you can always charge a fair price and if your plug-in is useful, you’ll make a pretty penny on the side.

As for learning how to create them its should be a walk in the park especially with some php knowledge and theme development experience ; if you don’t have these it should still be easy , there is a lot of info out there and the WP codex is an amazing resource which is why we put it first.

Take your time to read through these and book mark them for later reference – good luck.

 

WordPress Plugins allow easy modification, customization, and enhancement to a WordPress blog. Instead of changing the core programming of WordPress, you can add functionality with WordPress Plugins.

 

This tutorial will describe the implementation of a WordPress plugin starting from scratch. The plugin will connect to an external OSCommerce database and display random products on your WordPress site. It also implements a configuration page for the WordPress admin panel.

 

Create Your First WordPress Plugin in 10 Minutes

 

There will be situations where you will have a main administrative panel, but would like individual users to set their own preferences. In the case of the Devlounge Plugin Series, we added an option for text to be added in at the end of each post. However, what if a logged-in user doesn’t want to see this text? Why not give them the option without affecting all of the other users?

 

Despite an extensive codex, many WordPress users remain unfamiliar with how to create their own custom plugins. In today’s screencast, we’ll start from scratch and build our first usable plugin. For this example, we’ll write a simple “tuts formatting” function that allows a blog editor to more easily format articles.

 

Just read a forum topic Organizing Plugins on the wordpress.org support forums and thought I’d give you all the tips and tricks that I’ve learned and use when developing WordPress plugins.. which can be quite fun! I’m definately not a php or WordPress expert, anyone can create useful WordPress plugins without being a hacker.

 

A lot of plugins nowadays are more reliant on JavaScript and Cascading Style Sheets. It is important to separate your JavaScript and CSS into separate files so that the plugin is easier to maintain. This portion of the series will cover how to load JavaScript and CSS files for your plugin.

 

More Tutorials:
WP Tutorial: Your First WordPress Plugin « Mark on WordPress
WordPress Codex – WordPress Coding Standards
WordPress Codex – Creating Tables with Plugins
WordPress Hooks from Flat Earth
How to Write a WordPress Plugin | Devlounge
SEOpher – How to write a WordPress plugin : episode 1 – getting started …
A Love Letter to WordPress Plugin Authors

 

 

Widgets

The Dashboard Widgets API (added in WP 2.7) makes it very simple to add new widgets to the administration dashboard. Doing so requires working knowledge of PHP and the WordPress Plugin API, but to plugin or theme authors familiar with hooking actions and filters it only takes a few minutes and can be a great way to make your plugin even more useful.

 

Before WordPress version 2.0, these extra visual plugins had to be hand coded into the theme template, so a knowledge of PHP is required. In version 2.0 they introduced "Widgets" which wrap around a plugin and allow a non code editing method for incorporating into a theme using sidebars and a drag and drop interface.

 

This tutorial will explain how to create Wordpress widget from scratch. You will also learn how to implement configuration page for your widget.

 

 

Videos
How to Create a Simple WordPress Plugin

 

Building a Plugin – It’s Easier Than You Think Video

This video tutorial, from WordPress TV, demonstrates the basics of constructing a plugin, designing it to make the changes you want, and then using that plugin to alter your WordPress site in a persistent way. Includes some basic discussion on hooks and functions, as well as some sample code.

 

Screencast of presentation made at Wordcamp Montreal 2010

Wordpress’ open nature makes it very easy to create plugins to provide a large variety of capabilities to a site. However, developers don’t always think to follow best practices as they are writing up their code. Will their code break other plugins? Will the resulting site become very slow? Will users be able to understand how to get the most out of the extension? All of these questions will be discussed using concrete examples from four Wordpress plugins developed over the past five years. View Slide Presentation

 

 

Cheat Sheets

WordPress Optimization/Cheat Sheet

 

The WordPress Help Sheet was a good WordPress resource, but it was pretty limited and only had the basics of WordPress. I kept thinking to my self, “What about more advanced WordPress developers? They need something too!”. I felt they were being left out of all the fun. So here’s something for all you WordPress gurus…

 

I know that there are many resources regarding this topic but there are never enough. This post is dedicated to small snippets from WordPress that will make your life easier. Or maybe my life easier and in this case I want to have them in one single post. In a way I’m trying to help you and in another I’m trying to organize this stuff for myself.

 

This cheat sheet is designed to be a quick reference to all of the elements and attributes available in the XHTML 1.1 specification. And because XHTML 1.1 is designed to be modular, it is organized into sections to mirror the XHTML abstract modules and the elements and attributes contained within each.

 

Good looking and well structured html overview.

 

Useful WordPress Plugins
Featured Content Gallery
Ultimate GA
Yet Another Related Posts Plugin
WP Super Cache
WP re-CAPTCHA
Easy Adsenser

 

 

About the Author
Ben Rama is a Graphic Designer, CG Artist & Cinematographer from London. He is the founder & director at Digital Empire with many years of experience in Graphic Design, Film & TV within London.

il est temps de mettre à jour! WordPress 3.1, lots of fun - #wordpress #update #wp31

Excellent ! Avec le thème Guruq, on peut transformer un #WordPress en #Formspring !

21 plugins #Wordpress à éviter (via @wordpress_fr)

Gotta love the #wordpress community: Twitter announces its "official" Tweet Button and voilà :)

Pratique : Tous les Short Codes pour #WordPress 3 (via @L_Demontiers)

Si vous êtes sur #Wordpress, quelques conseils techniques pour votre sécurité : [eng] (via @egoflux)

How To Build Your Own #Wordpress Theme /via @PierreTran

And of course I forgot the link: TwentyTen for #WordPress:

RT: @imath: 10 Features to Look Forward to in #WordPress 3.0

RT: @imath: 10 Features to Look Forward to in #WordPress 3.0

The New Yroker - well done! RT @milo317: new edgy #buddypress #wpmu #wordpress theme is out, check out here

Since the launch of the site we’ve be welcoming questions regarding the HTML 5 spec through the contact form. It doesn’t matter if you think your question is too <H1>big</H1> or <small>small</small> we’re here to help.

Last month we decided to pull together a post that covered some of the emails that were sent in through the contact page. Since the publication of the last post we have received a lot more questions regarding the HTML 5 spec and have decided that some of these warranted another post.

Content Type
Christian asked:

In checking out various implementations of html5 around the web with a quick “view source”, I find everyone seems to specify content type in the headers like so; <meta http-equiv=”content-type” content=”text/html;charset=utf-8″> even though it’s already a part of the HTTP header.

Does it really need to be in both locations, or can we all cut out that redundancy as long as our servers are specifying the content type appropriately in the HTTP header?

If you take a look at Dr.Bruce’s weblog http://www.brucelawson.co.uk/ you will see that most of the information can be cut out and simplified. As more and more sites make the jump to HTML 5 you will be able to see what elements can and cannot be left out. If you’re interested in checking out more sites then please feel free to visit our sister site HTML 5 Gallery where you will be able to view the source of plenty of sites that are already sporting HTML 5 elements in their markup.

If you’re looking to take your reading even further then Dr. Remy has recently published an article entitled HTML5 boilerplates which should give you more information on the above.

HTML 5 & SEO
Julio asked:

I’m thinking of using HTML 5 in my projects as soon as possible, but I need to be sure that everything will work just as fine as HTML 4. My question is: Google (and other search engines) is already indexing HTML 5 sites? In terms of SEO, will I have any drawbacks?

In answer to your question, yes Google is indexing HTML 5 sites. Between us we run several sites built with HTML 5 markup and none of the Doctors have had any issues with our sites being indexed or competitive on key phrases.

Yes, Google is indexing HTML 5.

In fact if you look at the source code of google.com you’ll see that their doctype is declared as <! doctype html> meaning it’s using HTML 5! Another site that is part of the Google group, Youtube, has also recently created a mock-up of their layout that can be found at http://www.youtube.com/html5 and this definitely shows that they are thinking about it. One last fact to help settle your nerves, if we’ve not managed to do it already, is that Ian Hickson who is writing the bulk of the HTML 5 spec works for Google so we don’t think you’ll have any problems.

HTML 5 Templates
Klaus asked:

Where can if find HTML 5 Templates?

When this email came in, we weren’t too sure by what Klaus meant so we’re tackling his question with two responses.

For static HTML pages you’d be hard pushed to find a better resource than Remy’s boilerplate explained here: http://html5doctor.com/html-5-boilerplates/

However, if you are looking for some HTML 5 Wordpress themes then have a look at the following:

http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
http://diggingintowordpress.com/2009/07/free-html-5-wordpress-theme/
http://www.thatstandardsguy.co.uk/blog/2009/04/03/brave-new-world-wordpress-theme/

WebSocket Support
Dave asked:

There’s a lot of features, and I can’t find anywhere that lists current support in major browser versions (and/or with Google Gears). The particular one I’m looking for is WebSocket support

This is a good resource for checking the state of browser support for a particular feature: http://a.deveria.com/caniuse/ Regarding web workers specifically, we’ve come across a library that implements Web Sockets and falls away when it’s available natively.

None of the doctors have used these personally but feel that they will be useful in answer to your question:

http://orbited.org/
http://molly.com/html5/html5-0709.html
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

Reusing Elements Within Same Page
Daniel asked:

Dear Doctor,
Just a quick confirmation please. Am I right in thinking that nav, like header and footer, can be used more than once in a single page? For example, surrounding a menu at the top of the page and surrounding next/previous buttons at the bottom. Come to think of it, is it fair to say that all tags except html, head and body can be used more than once?
Thanks in advance, doctor.
I’ll be back soon about my dodgy knee.

Yes, for more information please reference this article – http://html5doctor.com/designing-a-blog-with-html5/ and this diagram of a single blog entry (of course, there can be many blog entries on a page) http://html5doctor.com/wp-content/uploads/2009/06/html5-article-outline.gif probably.

Other articles that we have already covered on the site – http://html5doctor.com/the-header-element/, http://html5doctor.com/the-footer-element/ and a great article on the http://html5doctor.com/nav-element/.

Learning HTML/XHTML Before Reading About HTML 5
Manuel asked:

Hi, I’m new to this field and I would like to learn HTML.

If I understand correctly, most future web sites will be written in HTML5 (served using the text/html MIME type) and just a few sites will use XHTML5 (served using the application/xhtml+xml MIME type). As a consequence, I will focus on HTML5.

HTML5 can use both the HTML syntax and the stricter XHTML syntax, but since I’m starting from scratch I suppose I could safely ignore the XHTML syntax and focus on the HTML syntax (HTML 4.1/5). Why bother about XHTML syntax in 2009? Unfortunately all modern introductory book/online resources about HTML are focused on the XHTML syntax. Where I could learn the pure HTML syntax without any reference to the useless and distracting (for my purposes) XHTML syntax?

Your best bet would be to get into the good coding practices of XHTML (lowercase tag, always closing tags, etc.) while writing HTML, there are a number of resources on the Internet for learning HTML 4.01 which you shouldn’t have any problems finding. A particular favorite of mine when I was starting out was HTMLDog.

We understand the issue of a number of the resources use the XHTML sytax but as I said above this will get you into good coding habits when writing HTML (particularly as HTML is less strict).

thank you for your quick reply. You won me: I will learn XHTML (from HTMLDog). Just a last question: when in the next future I will make the transition to HTML5 (served using the text/html MIME type) I hope the XHTML syntax validates anyway, so that I will have just to change the doctype of my pages to <!DOCTYPE html>. Right? (My fear is that the XHTML syntax will require a XHTML5 doctype).

This is correct though you won’t get the extra semantics added by HTML 5. For that I suggest you read the articles that appear on the site. If you want to use semantic class naming in your current XHTML I suggest you see the related links after ‘Automated Conversion’ in this post. – http://html5doctor.com/your-questions-answered-1/

There we have it folks…
Another quick round up of some of the more difficult questions we’ve had to respond to over the last few weeks. We hope that you’ll find this article helpful and remember that if you have a question that hasn’t been covered in an article so far feel free to get in touch, you never know, your question might just appear in one of these posts.

Since the launch of the site we’ve be welcoming questions regarding the HTML 5 spec through the contact form. It doesn’t matter if you think your question is too <H1>big</H1> or <small>small</small> we’re here to help.

Last month we decided to pull together a post that covered some of the emails that were sent in through the contact page. Since the publication of the last post we have received a lot more questions regarding the HTML 5 spec and have decided that some of these warranted another post.

Content Type
Christian asked:

In checking out various implementations of html5 around the web with a quick “view source”, I find everyone seems to specify content type in the headers like so; <meta http-equiv=”content-type” content=”text/html;charset=utf-8″> even though it’s already a part of the HTTP header.

Does it really need to be in both locations, or can we all cut out that redundancy as long as our servers are specifying the content type appropriately in the HTTP header?

If you take a look at Dr.Bruce’s weblog http://www.brucelawson.co.uk/ you will see that most of the information can be cut out and simplified. As more and more sites make the jump to HTML 5 you will be able to see what elements can and cannot be left out. If you’re interested in checking out more sites then please feel free to visit our sister site HTML 5 Gallery where you will be able to view the source of plenty of sites that are already sporting HTML 5 elements in their markup.

If you’re looking to take your reading even further then Dr. Remy has recently published an article entitled HTML5 boilerplates which should give you more information on the above.

HTML 5 & SEO
Julio asked:

I’m thinking of using HTML 5 in my projects as soon as possible, but I need to be sure that everything will work just as fine as HTML 4. My question is: Google (and other search engines) is already indexing HTML 5 sites? In terms of SEO, will I have any drawbacks?

In answer to your question, yes Google is indexing HTML 5 sites. Between us we run several sites built with HTML 5 markup and none of the Doctors have had any issues with our sites being indexed or competitive on key phrases.

Yes, Google is indexing HTML 5.

In fact if you look at the source code of google.com you’ll see that their doctype is declared as <! doctype html> meaning it’s using HTML 5! Another site that is part of the Google group, Youtube, has also recently created a mock-up of their layout that can be found at http://www.youtube.com/html5 and this definitely shows that they are thinking about it. One last fact to help settle your nerves, if we’ve not managed to do it already, is that Ian Hickson who is writing the bulk of the HTML 5 spec works for Google so we don’t think you’ll have any problems.

HTML 5 Templates
Klaus asked:

Where can if find HTML 5 Templates?

When this email came in, we weren’t too sure by what Klaus meant so we’re tackling his question with two responses.

For static HTML pages you’d be hard pushed to find a better resource than Remy’s boilerplate explained here: http://html5doctor.com/html-5-boilerplates/

However, if you are looking for some HTML 5 Wordpress themes then have a look at the following:

http://www.brucelawson.co.uk/2009/redesigning-with-html-5-wai-aria/
http://diggingintowordpress.com/2009/07/free-html-5-wordpress-theme/
http://www.thatstandardsguy.co.uk/blog/2009/04/03/brave-new-world-wordpress-theme/

WebSocket Support
Dave asked:

There’s a lot of features, and I can’t find anywhere that lists current support in major browser versions (and/or with Google Gears). The particular one I’m looking for is WebSocket support

This is a good resource for checking the state of browser support for a particular feature: http://a.deveria.com/caniuse/ Regarding web workers specifically, we’ve come across a library that implements Web Sockets and falls away when it’s available natively.

None of the doctors have used these personally but feel that they will be useful in answer to your question:

http://orbited.org/
http://molly.com/html5/html5-0709.html
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

Reusing Elements Within Same Page
Daniel asked:

Dear Doctor,
Just a quick confirmation please. Am I right in thinking that nav, like header and footer, can be used more than once in a single page? For example, surrounding a menu at the top of the page and surrounding next/previous buttons at the bottom. Come to think of it, is it fair to say that all tags except html, head and body can be used more than once?
Thanks in advance, doctor.
I’ll be back soon about my dodgy knee.

Yes, for more information please reference this article – http://html5doctor.com/designing-a-blog-with-html5/ and this diagram of a single blog entry (of course, there can be many blog entries on a page) http://html5doctor.com/wp-content/uploads/2009/06/html5-article-outline.gif probably.

Other articles that we have already covered on the site – http://html5doctor.com/the-header-element/, http://html5doctor.com/the-footer-element/ and a great article on the http://html5doctor.com/nav-element/.

Learning HTML/XHTML Before Reading About HTML 5
Manuel asked:

Hi, I’m new to this field and I would like to learn HTML.

If I understand correctly, most future web sites will be written in HTML5 (served using the text/html MIME type) and just a few sites will use XHTML5 (served using the application/xhtml+xml MIME type). As a consequence, I will focus on HTML5.

HTML5 can use both the HTML syntax and the stricter XHTML syntax, but since I’m starting from scratch I suppose I could safely ignore the XHTML syntax and focus on the HTML syntax (HTML 4.1/5). Why bother about XHTML syntax in 2009? Unfortunately all modern introductory book/online resources about HTML are focused on the XHTML syntax. Where I could learn the pure HTML syntax without any reference to the useless and distracting (for my purposes) XHTML syntax?

Your best bet would be to get into the good coding practices of XHTML (lowercase tag, always closing tags, etc.) while writing HTML, there are a number of resources on the Internet for learning HTML 4.01 which you shouldn’t have any problems finding. A particular favorite of mine when I was starting out was HTMLDog.

We understand the issue of a number of the resources use the XHTML sytax but as I said above this will get you into good coding habits when writing HTML (particularly as HTML is less strict).

thank you for your quick reply. You won me: I will learn XHTML (from HTMLDog). Just a last question: when in the next future I will make the transition to HTML5 (served using the text/html MIME type) I hope the XHTML syntax validates anyway, so that I will have just to change the doctype of my pages to <!DOCTYPE html>. Right? (My fear is that the XHTML syntax will require a XHTML5 doctype).

This is correct though you won’t get the extra semantics added by HTML 5. For that I suggest you read the articles that appear on the site. If you want to use semantic class naming in your current XHTML I suggest you see the related links after ‘Automated Conversion’ in this post. – http://html5doctor.com/your-questions-answered-1/

There we have it folks…
Another quick round up of some of the more difficult questions we’ve had to respond to over the last few weeks. We hope that you’ll find this article helpful and remember that if you have a question that hasn’t been covered in an article so far feel free to get in touch, you never know, your question might just appear in one of these posts.

Enjoying: BuddyPress 1.0 Has Arrived ( http://tinyurl.com/d6py6k ) [from http://twitter.com/citizenk/statuses/1662558244]

Good news: apparently the almost-killed-by-yahoo-neglet http://blo.gs has been aquired by automattic. See http://tr.im/jp8d :) [from http://twitter.com/citizenk/statuses/1583625003]

Good news: apparently the almost-killed-by-yahoo-neglet http://blo.gs has been aquired by automattic. See http://tr.im/jp8d :) [from http://twitter.com/citizenk/statuses/1583625003]

{Almaren} Penguins can fly http://shortna.me/d75de [from http://twitter.com/citizenk/statuses/1495825217]

{Almaren} 10 pints of Guinness http://shortna.me/03ab7 [from http://twitter.com/citizenk/statuses/1465374803]

WordPress 2.5 is now in feature freeze. No more new features will be added. Today we enter our beta cycle with full force. Concentration will be on fixing bugs, polishing up the new admin design, and finishing off the new features that are already in. We still have some styling work to do on the new design, but the big changes are already in.

We’ve set March 10th as the release date. This gives us a month of bug fixing. We’ll start off our bug hunt cycle with a hunt on Wednesday, February 13, 2008 at 17:00:00 UTC.  If you’re comfortable with testing almost-beta code, stop by #wordpress-bugs and help us polish up the new admin design, test the plugin updater, and fix bugs.  After the bug hunt, we’ll announce the schedule for our weekly beta packages and bug hunts.