A story about headings

Once upon a time, when I started blogging, there was a strong logic behind the heading distribution on a blog page. The blog title was nested in a h1 tag, and every other title was wrapped by h2 tag. Almost every theme available preserved this structure, proposed by the Classic and Default (Kubrik) themes. But, back then, WordPress was just a blogging platform, and blogs were onlu personal logs. And, for a personal log, it was the best possible distribution.

Next, when the professional blogging sprang into its virtual being, the blog’s name began to lose its importance; the post title was the new star, as it was more likely to be featured by SERPs. The emergence of niche blogs produced an important mutation in the heading structure (as well as in the structure of the title meta tag). The urge of getting individual posts posts indexed fast (and high) convinced pro bloggers to drastically change the headings’ hierarchy. Widget titles were wrapped by h3 tags (which seems to be a good idea, since “Recent comments” or “Blogroll” could hardly be a topic on a blog about tulips), the headings of single post and page titles shifted to h1, and the blog’s name was abandoned to the misery of a h2 tag.

This heading structure, preached by many powerful voices in the wp-sphere, is by now an established coding trend. It can be found in many themes (my own included) and, like any other trend, tends to remain unquestioned.

The problem

The problem with this heading distribution is that it leaves most of the pages without a h1 tag; or, sucha page, is like a book without title. For an information architect, a homepage without a h1 tag is a crime. Indexing robots might have difficulties in finding the most important headline on the page, and they have to only rely on the title tag. This isn’t a drama, but it can be done better.

The solution

Conditional tags are one of the most powerful tools offered by WorsPress. Their reason for being is to allow displaying different content on different type of pages. So why shouldn’t we use them to provide blogs with a proper heading distribution, saving the blog name from oblivion?

The code

Explanation

The code is telling WordPress: if it’s a single or a “page” page, nest the blog name in a h2 tag (since the post title is wrapped by a h1 tag); for any other type of page (homepage/catepgory/tag/year/month/day/hour/minute/search), nest the blog name in a h1 tag.

If you want to use to use this code, open header.php, spot the current code for your blog name and replace it (but don’t forget to back it up before doing so).

Related posts:

1. Top ten free gossip blog themes
2. Optimal title in Wordpress
3. Strict validating searchform (Wordpress)

If, in the same sidebar, someone has chosen to display widgets’ and custom content, and if he hasn’t noticed the opening and closing ul tag, the code simply won’t validate, which can cause some displaying issues in older browsers.
The easiest way to validate the code of a sidebar area is to wrap the widgets with a div tag. Aditionnaly, you may want to change the h2 heading for the widgets’ title to a les important one, since the sidebar’s content is complementay. To do it, all it takes is to replace a little bit of PHP in the functions file of the theme you’re using.
The most common script that registers a sidebar, making it widget ready is this one:

These lines are telling WordPress to allow you to use widgets in two sidebars. The widgets’ markup is the one described above.
To replace the li tag with div, you’ll need this script:

You’ll only have to replace the existing script in the functions.php file registering the sidebars with this one. Then edit the sidebar.php file of your theme and delete the first ul and the last /ul. If you don’t like the appearence of the widgets’ titles, edit the style.css file and look for something like #sidebar h2; change it to #sidebar h3 (or the heading you’ve chosen), and you’re back to the ols look of your blog.
NB The script above is only an example. Your theme might use one or more widgetized sidebars, so make sure you register the actual number:
/p>

.
Caution: Make sure that the functions.php file opens with

and ends with

or your blog won’t display at all.

Related posts:

1. WordPress 2.8 for theme authors
2. Strict validating searchform (Wordpress)
3. How to get the same style for default and widgeted sidebars

What are font stacks

Font stacks are lists of font family names; they live in stylesheets; their members are comma separated; their purpose in life is to prioritize the typeface choice when a browser displays a page. Generally, it is considered that a good font stack contains four elements: the ideal typeface, the alternative, the common and the generic. For instance:

This font stack will tell the browser to look into the system’s font library for Sansation; if this font isn’t installed (and it probably isn’t), the browser will look for Gil Sans; then, for Arial; finally, if the system’s font library doesn’t contain any of the specific fonts declared, it will resign and display the page using the generic sans-serif.

Implementing font stacks it’s a great usability technique. But, like any other usability feature, using it means compromise. A designer will have to review all the all the typographic versions declared in the list of typefaces and unhappily to be aware that most users will only have access to the downgraded versions of his / her work.

The survey
The initial hypothesis of this survey was that font stacks are highly dependable on a website’s niche. A website addressed to designers is more likely to use uncommon typefaces then a site addressing to a general audience; symmetrically, an online newspaper is expected to use dull and flat font stacks. Being quite sure that the hypothesis will be verified, I decided to add another hypothesis, namely that there is a difference in the use of fonts between the American and European typographical tradition (in a web environment). Anyhow, given the uniformity of resources, this difference shouldn’t be radical.

Libération

In order to keep a neutral manner of presentation, I’ll structure the list according to the font declarations and not to the newspapers names.

The font-family declarations

Sans serif familiesArial, sans-serif: used by Le Monde and Métro;
Arial, Helvetica, sans-serif: used by Los Angeles Times, The Boston Globe, Detroit News. USA Today, The Philadelphia Inquirer, The Wall Street Journal, L’Equipe, Le Nouvel Observateur (without a general declaration under the body tag);
Arial, Helvetica, Clean, sans-serif: used by Chicago Tribune and 20 minutes;
Helvetica, Arial, sans-serif: used by The Washington Times;
Arial, Verdana, Helvetica, Tahoma, sans-serif: used by New York Post.
Arial, Verdana, Tahoma, sans-serif: used by Boston Herald;
Arial, Helvetica, Verdana, Geneva, sans-serif: used by Daily News and Le Monde;
Arial, Geneva, Helvetica, sans-serif: used by Le Parisien;
Verdana, Arial, Helvetica, sans-serif: used by Libération;
Geneva, Arial, Helvetica, sans-serif: used by L’Humanité;
“Lucida Grande”, “Lucida Sans Unicode”, sans-serif: used by Le Courrier International;
“Lucida Grande”, Verdana, Geneva, Arial, Helvetica, sans-serif: used by Le Figaro;
Serif fonts
Georgia, serif: New York Times and Le Monde (for the content);
“Trebuchet MS”, serif: France Soir;
“Georgia”, “Times New Roman”, Times, serif: The Boston Globe (font stack for the content).

Sans serif headingsArial,Verdana,sans-serif: Los Angeles Times;
Arial, sans-serif: Chicago Tribune;
Arial Black: Boston Herald;
Arial Narrow, Helvetica, Arial, san-serif: The Washington Times;
‘Trebuchet MS’, Verdana, sans-serif: Le Figaro;
Serif headings
Georgia, “Times New Roman”, Times, serif: The New York Times, Daily News, The Philadelphia Inquirer, Libération;
Georgia, serif: Chicago Tribune;

Georgia, “Century Schoolbook”, “Times New Roman”, Times, serif: The Wall Street Journal;
Other font families, used for minor elements
Tahoma, Arial, Verdana: Boston Herald;
Tahoma: The Philadelphia Inquirer;
‘Century Gothic’, Trebuchet MS: L’Equipe.
Remarks

• as you can see, most of the font stacks presented aren’t too different from the Dreamweaver defaults;
• some of them are really curious, calling first a very common typeface and then a more unusual one;
• generally, online newspapers stick to web-safe fonts;
• the French newspapers, without being more creative, are more relaxed in using fonts (we could even see some bizarre choices, such as ‘Trebuchet MS’, serif.
• none of the websites reviewed uses @font-face rules or sIFR / Cufón embedding.

Conclusion
I definitely prefer printed newspapers’ typography. The sad conclusion of this survey is that none of these online newspapers takes advantage on the benefits of font stacks. I don’t think that the web will kill the print, but, under the current circumstances, it will sure kill an awesome and secular typographical tradition.
I sometimes wonder how much did those newspapers pay for their websites design.
PS. Photo by Mark D. Martin.

Related posts:

1. The Museum got redesigned
2. How to get the same style for default and widgeted sidebars

1. Theme installtion from within the admin area
The analogue feature was available for plugins since version 2.7; with wp 2.8, users will be able to pick a design for their blog by searching the Theme Repository. This means that themes hosted there will probably reach a much larger audience; this also means that the Repository will attract new theme authors, which will eventually increase the competition and the quality of the themes.
To see all the functions used by this feature, download wp 2.8 beta 1 and check wp-admn/includes/theme-install.php.

2. body_class
I’m not into gambling, but I bet body_class will offer theme authors many nights spent in delightful insomnies. This function provides different classes to body elements, so you’ll be able to have particular styles for different templates (homepage, main index page, category, tag, page, search, archive, date) and even different styles for particular posts, pages, categories or tags. Of course, this function will work best for custm themes, but the the oportunities it opens for public releases aren’t to be neglected.
Usage
In header.php, replace <body> with

For the full list of classes generated by this function, check this post by Nathan Rice.
3. Extended control over widgets
If you take a look at wp-includes/widgets.php, you’ll be thrilled to dicover that wp 2.8 will let you create your own widgets and use them in multiple instances on the same page (i.e. WordPress won’t provide an unique id to each widget, but to each widget instance).
But wait, there’s more. If you want to display widgets elsewhere than the sidebar, you don’t need to create fake registered sidebars anymore. Just use the_widget template tag. This means you can create a custom widget and insert it anywhere you want.
The new widget treatment makes an old dream of some WordPress users, who wanted a “module base” CMS, come true.
4. New template tags
First, the tag_description, which acts like the category description we all know. Second, some author related template tags. A brand new feed related funtion, automatic_feed_links() (when set to true in functions.php, you won’t have to link to the blog’s feeds in header.php). Two new parameters for wp_list_pages(), number and offset. Wp_tag_cloud() now supports an echo argument, which is really cute. Finally, wp 2.8 includes the latest jQuery version.
You should definitely check the Default theme’s files (which now supports WAI-ARIA landmark roles) to see other changes, e.g. the new echo esc_attr().
I’ll end this post here, for I feel like coding.

Related posts:

1. How to get the same style for default and widgeted sidebars
2. How to easily modify the colors of a WordPress theme
3. How to easily change the widgets’ markup

Related posts:

1. Optimal title in Wordpress
2. How to easily change the widgets’ markup
3. CSS vs Firefox vs CPU

(The style doesn’t have to be inline; you can also use a selector.)
This script will display an ad in the upper left area of a post. But what if you want to place the ad in the middle of the text? Or in the bottom area? And what if you want to place multiple ad units in posts that perform well in search rankings? Or to disable ads in the latest posts, so that your regular readers didn’t get annoyed? To be able to do all these things, you need to somehow get control over the content block that WordPress dynamically displays.
Using a shortcode
The shortcode solution consists in inserting a little piece of PHP (a function containing the Adsense code) in the functions.php file and calling the ad while creating a new post (or while editing an old one); to call the ad, you’ll use the “[adsense]” shortcode (without the double curly quotes) in the HTML mode of the text editor. The function was written by Jean-Baptise Jung:

The shortcode will allow you to place one or two/three ad units anywhere inside the content. You can even align the ads within the text, using an inline style or a selector, for instance:

Tha main drawback of this solution is that you always have to remember to insert the shortcode when creating a new post. And this may be quite a challenge. I know that, ideally, one should be very careful before pressing the “Publish” button, read the text twice, select the proper keywords and so on, but in the real world things are a little bit different. If you published a few posts in a row and your attention is diminished, or if you’re tired or distracted, it’s probable to simply forget to perform all these repetitive tasks. Then you’d have to edit the post again and again (to asign it to a category, to add some tags, correct a misspell or insert a adsense shortcode. We’ve all been there. Editing a published post isn’t essentially a bad thing when moderately used, but the abuse has its dark sides: it is boring, it sends useless pings (and you’d run the risk to get penalized by some search engines), and it might republish the post in the RSS flux, which would probably irritate your regular readers. So, practically, you need a way to tell WordPress to remember you insert the Adsense shortcode in the posts you create.
Automatic shortcodes
One of the great things about WordPress is that you actually can talk to it. Of course, you need to speak its tongue, but you can be sure it will answer you back.
Applying this general principle to our matter, we can ask WordPress to automatically insert the Adsense shortcode in the text editor. To do this, we’ll adapt a filter written by Justin Tadlock:

NB When using Justin’s filter to preset some HTML, replace the double quoutes in the original code with single quotes; otherwise, you’ll get a syntax error.
Afther having added the code above to the theme’s functions, the text editor of your blog will look like this:

The full code
The full code you’ll have to add in the functions.php file is:

Applications
By combining the two scripts by Jean-Baptiste Jung and by Justin Tadlock in the way I presented, you’ll get to:

• display and style Adsense ad units anywhere in the content (just write above and/or below the styled Adsense shortcode you’ll find in the text editor every time you create a new post);
• easily change the position and placement of an ad (you can float it to left or to right in any single post by only changing the inline declarations, e.g. “float:right;margin-left:10px”;
• disable ads in particulr posts by only deleting the automatically displayed shortcode;
• place differently styled ad units on selected posts (just copy/paste the automatic shortcode and change its style according to the ad unit’s context);
• benefit of the advantages offered by powerful Adsense related plugins without conflicting with the Adsense Program Policy (plugins are pieces of software, so, formally, you’re not allowed to paste Adsense code in their files; functions.php, on the other hand, behaves like a plugin but is definitely a template file).

Bonus
Using this model, you can get any shortcode automatically appear in the text editor of your blog.
Drawbacks
The solution i exposed has three drawbacks:

1. you can use only one ad format;
2. you can only use the HTML mode of the text editor;
3. the automatically embeded code won’t work for older posts (you still have to manually edit them).

Other possibilities
Theoretically, it should be possible to automatically display ads only in posts older than x days, but the eventual filter would annulate the advantages listed above. I said “theoretically” because I got the idea while writing this article, so I couldn’t explore it. I hope I’ll find the time (and will have the skills) to do it.
Demo and download
You can see this solution implemented on my new demo blog – it is run by my mean boss who publishes there his crazy ideas in automatic translation mode.
NB To see it, please select the Doc theme in the theme switcher.
I prepared two files for download. The first one is functions.php. If your blog theme doesn’t already have such a file (and, of course, if you want to have full control over the placement of the Adsense ads displayed on your blog), download the zip archive, extract the file and upload it in your blog theme directory.
The second file is functions.txt. If your blog theme already has a functions.php file, download this archive, extract the text file, copy its content and paste it in the existing functions file, just above the ?> signs.
NB Don’t forget to replace <!--your Adsense code goes here--> in the downloaded files with your Adsense code.
Cautions
Please don’t touch the first and the last line in the functions.php file, or your blog will magically disappear (I’m kidding, it won’t disappear, it will only display a white page).
Please don’t confuse the php and the txt files you might download here; you risk either to get nothing changing, or to get a fatal error.
All along this article, I assumed you knew the Adsense Program Policy (especially regarding the ad placements).
Finally, and most important thing, if you’re not familiar with PHP and with editing template files, you better ask someone to help you.

PS I take no credit for the solution I presented here. I only combined and played around with two existing pieces of code.

Related posts:

1. How to style every single post
2. How to easily change the widgets’ markup
3. WordPress 2.8 for theme authors

1. a semiotic axis, your message to the world; the image will say something about you or about your blog;
2. an artistic axis, the visual form of your message;
3. an architectural axis, the smooth integration of the image into the layout; this axis transcends the image, but you should also remember to keep a ballance within the image.

4. Add the clickable header image
At this point, you have a proper header image. First, you’ll need to publish it somewhere on the web, preferably on your blog. If you’re not comfortable with using CPanel (or any other software your hosting provider chose to give you access to the server), just use the WordPress inbuilt image uploader. Create a new post, upload the image (you don’t need to write anything), copy the image’s url (it will look like http://www.example.com/wp-content/uploads/2009/05/header.png) and press the “Save all changes” button.

Upload a header image

The next step: making the image clickable:

NB Please remember to replace the example urls with the actual one, set a proper alt tag and provide the actual values of the width and height tags.
Finally, insert the image. Edit header.php and spot once again the header’s selector. You’ll probably see something like this:

NB The headings and even the code may vary; this is only an example.
Select the two PHP lines (the ones beginning with h1 and h2, or with h2 and h3 in other themes) and replace them with the clickable image code we’ve already written. For SEO reasons, you might want to nest the code inside of a heading. The final code should look like this:

and that’s almost it. Your blog’s header image is now visible and clickable.
5. Clean the image’s look and get a consistent feel
There are very good chances that your brand new header image had an odd border (in IE6 it’s really ugly). To get rid of it, edit style.css and add this line:

Save. Refresh. The border is gone.
Now take a very attentive look at the overall result. Not just at the header, but at the entire page. See if the theme’s colors fit the image’s colors. If they don’t, you should use a tool that generates color schemes from an image Color Palette Generator is a nice one, but you can find plenty on the web). Now, that you have a consistent color scheme (provided you have used matching colors when creating the image), you can modify the colors of your blog’s theme.
PS I should also write a tutorial on how to set a backgroun image for the header of your blog.

Related posts:

1. How to easily modify the colors of a WordPress theme
2. Doc – a free minimal WordPress 2.7 theme
3. BlackCat – free WordPress theme for cat lovers

Doc’s features

• valid strict XHTML 1.0 markup;
• valid CSS 2.1;
• really fast loading: for the test blog (without gzip compression – 0.56′ with a T1 1.44 Mbps connection; 2.25′ with a ISDN 128k connection; 12.17 with a 28k dial up connection); you can check it on websiteoptimization.com;
• search engine optimized;
• fixed width (fit to 1024px screens);
• custom templates (404.php, error message, archive page, page without comments);
• 3 widgetized areas in the lower section;
• sticky posts (italics);
• gravatars;
• threaded comments;
• social bookmarks (no plugin needed);
• white space, for the sake of your readers’ eyes;
• Microsoft Word-like design;
• print stylesheet.

Caution
Doc can only be used with WordPress 2.7 and above.
Usage
Just use it like any other theme: download the zip file, extract the theme folder, upload it on the server and activate the theme in the appearence tab of the admin area.
Customization and better performance
You can customize the colors or even the layout (if you’re familiar with CSS).
Doc was designed for speed, but you can speed it even more, by replacing the PHP calls with plain HTML (I shoul write a tutorial about this).
Licence
Doc is released under a GNU/GPL licence; you are allowed to freely use it, modify it and distribute it with the condition of preserving the licence and the attribution.

Demo and download

Demo blog

That would be all. Happy blogging.
Later edit
Pictures not appearing on the first page seem to be an important issue. Unfortunately I cannot find the time right now to release a new version of Doc with options included; hopefully it will be available in a couple of months. Anyhow, I’ll provide two alternatives.
1. Full posts on the homepage (as well as on category, tag and time-based archives).
You’ll have to do a little editing, but it’s only a matter of copy/paste. Copy this document (index-full post on homepage.txt). In the admin area, under the Appearance tag, go to Editor and select Main Index Template (index.php). Select the entire content of the document and replace it with the text you’ve just copied.
The main drawback of this method is that the images will only appear if they’re above the “more” quicktag. Additionally, you won’t be able to control the size of the pictures displyed; WordPress will preserve their original width and height.
2. The second alternative is more elegant, but involves two file editing actions (don’t worry, it’s still a copy/paste matter). You’ll need to download this archive (excerpt-and-image.zip); it contains two files: functions.txt and index-excerpt plus image.txt. Go to Appearance > Editor, select Theme Functions (functions.php) and replace the existing content with the content of the functions.txt you’ve found in the archive; then replace the current content of the Main Index Template (index.php) with the text in index-excerpt plus image.txt.
At this point, the first picture of each post will be automatically displayed. The pictures are resized (300px wide ane 225 px heigh) and aligned to left. If you’re plased with these settings, you’re done.
Possible customizations
You can control which image will get displayed on the front page, its size, its position. To do this, you only have to spot a line in the Main Index Template (index.php):

The arguments:
1 = the first image; (2=second image), etc;
300 = the picture’s width; / replace it with another numeric value;
225 = the picture’s height;
alignleft = picture floating left and wrapped by text; / you can replace it with: ‘alignright’ or ‘alignnone’ (in this case, the text will be pushed under the picture).
false = image not clickable; / true = clickable image (this argument should’t be wrapped by single quotes, otherwise the images are clickable by default).
Hope it was clear enough. If you’re havng any trouble in implementing this, please let me know.
PS If you want to add some special styles to these images, simply use the “thumbnail” class.

Related posts:

1. Bleen – A grue (green and blue) free Wordpress theme
2. OrangeJuice – a free fluid WordPress 2.7 theme
3. Typogriph – a free fluid WordPress 2.7 theme

Related posts:

1. How to easily modify the colors of a WordPress theme
2. The web is ugly
3. CSS vs Firefox vs CPU

• body: usually sets the background and the text colors;
• a sets the links color;
• p deals with the texts (stands for paragraph); it’s quite rare though to find any color declaration under this one;
• h1...h6: colors for headings;
• occasionally em and strong, for italic and bold text;

The markup selectors
Markup selectors vary from one theme to another, so you’ll have to figure what are the ids and classes used by your theme. The most common are wrapper / container, header, post, sidebar, footer (but some theme authors may chose other selectors). Long story short, you only need to see the source of your blog (homepage, single post, other templates) and patiently write down the id and class selectors. Then you should check whether (or rather what) HTML tags have special styles according to their position in the markup (for instance #header h1 / h2 will stand for the blog title, #header h2 / h3 for the blog description and so on). Now, after having identified all these tags and selectors, you can change anything you want.
Use the Theme Teaker plugin
The Theme tweaker plugin was written by Manoj Thulasidas; basically, it enables you to visually modify the colors of your WordPress blog; technically, it creates a style and embeds it in the head of your blog.
I won’t insist in presenting it (actually the author provides a detailed description, and the plugin is very easy to use).
Please note: If you use the plugin’s default settings, i.e. don’t generate a stylesheet or a child theme, your twaks will simply disappear when the plugin is deactivated.
NB: While testing Theme Tweaker, I accidentally came across a bug, namely it won’t work for blogs that aren’t located in the root folder: if your blog’s url is example.com/blog and there’s another blog installed on example.com, the plugin will try to modify the look of the blog installed under the main domain.
There’s really no conclusion for this post. I only hope you’ll find it useful (and be creative).

Related posts:

1. How to add a clickable image to the header of a WordPress theme
2. 24 beautiful wood colors for your backgrounds
3. WordPress 2.8 for theme authors