---
title: Notes on the 2010 WordPress Theme
date: 2010-02-24T11:05:33+00:00
modified: 2010-02-24T11:05:33+00:00
permalink: https://kaspars.net/blog/notes-on-the-2010-wordpress-theme
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
category:
  - WordPress
---

# Notes on the 2010 WordPress Theme

Here are some of my random thoughts after going through the files of the new [TwentyTen (2010) theme](http://2010dev.wordpress.com/) which will be introduced in WordPress 3.0.

### header.php isn’t *poetry* at all

The content of the `<title>` should be generated within `functions.php` by using the `wp_title` filter, so that plugins and users can overwrite it. In `header.php` we would have only:

```
<title><?php wp_title('|', true, 'right'); ?></title>
```

and in `functions.php` something like:

```
add_filter('wp_title', 'twentyten_title', 10, 2);

function twentyten_title($title, $sep) {
	global $post;

	$title = wptexturize($title);
	$page_no = get_query_var('paged');

	if (is_front_page())
		$title = get_bloginfo('title') . ' ' . $sep . ' ' . get_bloginfo('description');
	elseif (!is_feed())
		$title .= ' ' . get_bloginfo('title');

	if ($page_no > 1)
		$title .= ' (page ' . $page_no . ')';

	return $title;
}
```

Theme’s stylesheet `style.css` should be loaded *after* the `wp_head()` call, so that users can overwrite styles added by the plugins.

Header image should be a CSS background image not an `<img>`. It should also be added through an action call so that plugins or users can remove or alter it.

### Doctype is the only HTML5

Why not use at least `<header>`, `<footer>`, `<nav>` and `<aside>` if we have decided go with HTML5? If it’s because of IE6 then we can use conditional comments and that little amount of javascript that is necessary to construct those unknown elements.

### Everything is &lt;div&gt;s

Site title and description should be placed inside paragraphs. Additionally `<strong>` and `<em>` could be used to represent their hierarchy:

```
<p id="site-title"><strong><a href="...">...</a></strong></p>
<p id="site-description"><em>...</em></p>
```

The same goes for `.entry-meta`, `.site-info` and `.site-generator`. It is better to use paragraphs instead of generic divs whenever possible.

### Widgets are not lists

It is totally not semantic to place block type content inside inline elements (which lists are). Nested lists can also cause some unexpected and not-so-easy-to-work-around styling and targeting issues. Let’s avoid them.

### Function Exists

Why are we calling `function_exists('twentyten_unique_function')` before every function that is unique to the theme?

### Relative vs. 72 pixels per inch

Web is meant to be flexible and accessible on all devices. Thus, I suggest we:

- don’t use pixels for sizes, and
- include a mobile stylesheet.

Currently the baseline — font size × line height × paragraph spacing — is 16 px × 24 px × 24 px, which is equal to 1 × 1.5 ×1.5 = 2.25 in relative values. The default font size should also be a relative value — *medium* — which is equal to 16px in most of the browsers.

Every element should have a 2.25 baseline — entry meta, for example, is currently set at 12 px or 0.75 of the base font size. With the same line height of 1.5, it would need a 2.25/0.75/1.5 = 2 em paragraph spacing (bottom margin).

Heading line height of 1.5 is too much. It should be around 1.25 which allows to have wider bottom margin.

When spacing individual HTML elements, it is good to think that every element is responsible for the spacing below it.

### Order of comment input fields

I have read the post and now I want to leave a comment — why do we increase the chance of me loosing that great idea by asking for my name and email address *before* the comment itself?